Last active
October 25, 2019 13:22
-
-
Save artyorsh/06cbe3ff6776a26dcfe48011ecc7e41c to your computer and use it in GitHub Desktop.
UI Kitten TabBar with burger menu (Binding React Navigation 5 to Eva Design System)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
props.navigation.navigate(selectedTabRoute); | |
}; | |
return ( | |
<SafeAreaLayout insets={SaveAreaInset.TOP}> | |
<Toolbar | |
title='React Navigation Ex 🐱' | |
backIcon={MenuIcon} | |
onBackPress={props.navigation.toggleDrawer} | |
/> | |
<TabBar selectedIndex={props.state.index} onSelect={onTabSelect}> | |
<Tab icon={GridIcon} title='IN PROGRESS'/> | |
<Tab icon={DoneAllIcon} title='DONE'/> | |
</TabBar> | |
<Divider/> | |
</SafeAreaLayout> | |
); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment