Skip to content

Instantly share code, notes, and snippets.

@artyorsh
artyorsh / drawer-home.component.tsx
Last active October 23, 2019 16:29
Drawer component for Home Navigator (Binding React Navigation 5 to Eva Design System)
import React from 'react';
import { Drawer, DrawerElement, MenuItemType } from 'react-native-ui-kitten';
import { InfoIcon, LogoutIcon } from '@app-assets/icons';
import { AppRoute } from '@app-navigation/app-routes';
import { SafeAreaLayout, SaveAreaInset} from '@app-components/safe-area-layout.component';
const drawerData: MenuItemType[] = [
{ icon: InfoIcon, title: 'About' },
{ icon: LogoutIcon, title: 'Log Out' },
];
@artyorsh
artyorsh / todo.component.tsx
Last active October 25, 2019 13:22
UI Kitten TabBar with burger menu (Binding React Navigation 5 to Eva Design System)
import React from 'react';
import { TabBar, Tab, Divider } from 'react-native-ui-kitten';
import { SafeAreaLayout, SaveAreaInset, SafeAreaLayoutElement } from '@app-components/safe-area-layout.component';
import { Toolbar } from '@app-components/toolbar.component';
import { DoneAllIcon, GridIcon, MenuIcon } from '@app-assets/icons';
export const TodoScreen = (props): SafeAreaLayoutElement => {
const onTabSelect = (index: number): void => {
const { [index]: selectedTabRoute } = props.state.routeNames;
@artyorsh
artyorsh / home.navigator.tsx
Created October 23, 2019 15:30
Home Navigator with Drawer and Tabs (Binding React Navigation 5 to Eva Design System)
import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { BottomHomeScreen, DrawerHomeScreen, AboutScreen } from '@app-scenes/home';
import { TodoNavigator } from './todo.navigator';
import { ProfileNavigator } from './profile.navigator';
import { AppRoute } from './app-routes';
const Drawer = createDrawerNavigator();
const BottomTab = createBottomTabNavigator();
@artyorsh
artyorsh / app.navigator.tsx
Created October 23, 2019 14:43
App Navigator with Auth and Home screens (Binding React Navigation 5 to Eva Design System)
import React from 'react';
import { NavigationNativeContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { AuthNavigator } from './auth.navigator';
import { HomeNavigator } from './home.navigator';
import { AppRoute } from './app-routes';
const Stack = createStackNavigator();
export const AppNavigator = (config): React.ReactElement => (
@artyorsh
artyorsh / home.navigator.tsx
Created October 23, 2019 12:26
Home Navigator with Tabs at the bottom (Binding React Navigation 5 to Eva Design System)
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { BottomHomeScreen } from '@app-scenes/home';
import { TodoNavigator } from './todo.navigator';
import { ProfileNavigator } from './profile.navigator';
import { AppRoute } from './app-routes';
const BottomTab = createBottomTabNavigator();
export const HomeNavigator = (): React.ReactElement => (
@artyorsh
artyorsh / profile.navigator.tsx
Created October 23, 2019 12:23
The second navigator for bottom tabs (Binding React Navigation 5 to Eva Design System)
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { ProfileScreen } from '@app-scenes/profile';
import { AppRoute } from './app-routes';
const Stack = createStackNavigator();
export const ProfileNavigator = (): React.ReactElement => (
<Stack.Navigator headerMode='none'>
<Stack.Screen name={AppRoute.PROFILE} component={ProfileScreen}/>
@artyorsh
artyorsh / bottom-home.component.tsx
Last active October 25, 2019 13:24
UI Kitten BottomNavigation (Binding React Navigation 5 to Eva Design System)
import React from 'react';
import { BottomNavigation, BottomNavigationTab, Divider } from 'react-native-ui-kitten';
import { SafeAreaLayout, SafeAreaLayoutElement, SaveAreaInset } from '@app-components/safe-area-layout.component';
import { LayoutIcon, PersonIcon } from '@app-assets/icons';
export const BottomHomeScreen = (props): SafeAreaLayoutElement => {
const onSelect = (index: number): void => {
const { [index]: selectedRoute } = props.state.routeNames;
props.navigation.navigate(selectedRoute);
@artyorsh
artyorsh / todo.component.tsx
Last active October 25, 2019 13:23
UI Kitten TabBar (Binding React Navigation 5 to Eva Design System)
import React from 'react';
import { TabBar, Tab, Divider } from 'react-native-ui-kitten';
import { SafeAreaLayout, SaveAreaInset, SafeAreaLayoutElement } from '@app-components/safe-area-layout.component';
import { Toolbar } from '@app-components/toolbar.component';
import { DoneAllIcon, GridIcon } from '@app-assets/icons';
export const TodoScreen = (props): SafeAreaLayoutElement => {
const onTabSelect = (index: number): void => {
const { [index]: selectedTabRoute } = props.state.routeNames;
@artyorsh
artyorsh / app.navigator.tsx
Last active October 22, 2019 15:22
App Navigator with Auth and Home screens Binding (React Navigation 5 to Eva Design System)
import React from 'react';
import { NavigationNativeContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { AuthNavigator } from './auth.navigator';
import { TodoNavigator } from './todo.navigator';
import { AppRoute } from './app-routes';
const Stack = createStackNavigator();
export const AppNavigator = (config): React.ReactElement => (
@artyorsh
artyorsh / todo.navigator.tsx
Last active October 23, 2019 11:14
Todo Navigator with Tabs at the top (Binding React Navigation 5 to Eva Design System)
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { TodoScreen, TodoInProgressScreen, TodoDoneScreen } from '@app-scenes/todo';
import { AppRoute } from './app-routes';
const Stack = createStackNavigator();
const TopTab = createMaterialTopTabNavigator();
export const TodoNavigator = (): React.ReactElement => (