Skip to content

Instantly share code, notes, and snippets.

View artyorsh's full-sized avatar

Artur Y artyorsh

View GitHub Profile
@artyorsh
artyorsh / mapping.json
Last active March 24, 2024 15:54
Time Picker example with UI Kitten and DateTimePicker
{
"components": {
"Timepicker": {
"meta": {
"scope": "all",
"parameters": {
"minHeight": {
"type": "number"
},
"paddingHorizontal": {
@artyorsh
artyorsh / createSwitchNavigator.tsx
Created May 30, 2020 15:55
React Navigation 5 - Basic Switch Navigator
import React from 'react';
import { View } from 'react-native';
import { useNavigationBuilder, TabRouter, NavigationHelpersContext, createNavigatorFactory } from '@react-navigation/native';
interface SwitchNavigatorProps {
children: React.ReactNode;
}
const SwitchNavigator = (props: SwitchNavigatorProps): React.ReactElement => {
@artyorsh
artyorsh / form-autocomplete.component.tsx
Last active July 15, 2023 10:10
UI Kitten Components x Formik
import React from 'react';
import { StyleSheet, NativeSyntheticEvent, TextInputSubmitEditingEventData } from 'react-native';
import { FormikContextType, useFormikContext } from 'formik';
import { Autocomplete, AutocompleteProps, AutocompleteItem, AutocompleteItemElement } from '@ui-kitten/components';
export interface FormAutocompleteDataItem {
toString: () => string;
}
type FormAutocompleteDataProps<Item extends FormAutocompleteDataItem = any> = Override<AutocompleteProps, {
import React from 'react';
import { StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
import { ButtonElement } from '@ui-kitten/components';
interface ButtonSwitchProps extends ViewProps {
fullWidth?: boolean;
children: ButtonElement[];
selectedIndex: number;
onSelect: (index: number) => void;
}
@artyorsh
artyorsh / webpack.config.js
Last active December 10, 2020 14:28
UI Kitten 4.3 - webpack config
const path = require('path');
// npm i -D @expo/webpack-config
const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const uiKittenComponents = path.resolve(__dirname, './node_modules/@ui-kitten/components');
const uiKittenComponentAlias = {
'@ui-kitten/components': path.resolve(__dirname, uiKittenComponents),
'./bottomNavigationTab.component.tsx': path.resolve(uiKittenComponents, 'ui/bottomNavigation/bottomNavigationTab.component.js'),
@artyorsh
artyorsh / auth.navigator.tsx
Created October 25, 2019 14:35
Passing additional props to screens (Binding React Navigation 5 to Eva Design System)
export const AuthNavigator = (props: AuthNavigatorProps): React.ReactElement => {
const SignInNavigationScreen = (screenProps: SignInScreenProps): React.ReactElement => (
<SignInScreen {...screenProps} onAuthorized={props.onAuthorized}/>
);
const SignUpNavigationScreen = (screenProps: SignUpScreenProps): React.ReactElement => (
<SignUpScreen {...screenProps} onAuthorized={props.onAuthorized}/>
);
@artyorsh
artyorsh / sign-in.component.tsx
Created October 25, 2019 14:31
Additional Sign In screen props (Binding React Navigation 5 to Eva Design System)
interface SignInProps extends SignInScreenProps {
onAuthorized: () => void;
}
@artyorsh
artyorsh / sign-in.component.tsx
Created October 25, 2019 14:27
Form submit handler (Binding React Navigation 5 to Eva Design System)
const onFormSubmit = (values: SignInData): void => {
props.onAuthorized();
};
// AdditionalNavigationProp is, for example, DrawerNavigationProp
export type BottomTabBarProps<AdditionalNavigationProp = {}> = BottomTabBarOptions & {
state: TabNavigationState;
descriptors: BottomTabDescriptorMap;
navigation: NavigationHelpers<ParamListBase> & AdditionalNavigationProp;
// ....
};
@artyorsh
artyorsh / auth.navigator.tsx
Last active October 24, 2019 15:03
Type definitions for Auth screens (Binding React Navigation 5 to Eva Design System)
import { ParamListBase, RouteProp } from '@react-navigation/core';
import { StackNavigationProp } from '@react-navigation/stack';
import { AppRoute } from './app-routes';
interface AuthNavigatorParams extends ParamListBase {
[AppRoute.SIGN_IN]: undefined;
[AppRoute.SIGN_UP]: undefined;
[AppRoute.RESET_PASSWORD]: undefined;
}