Drawer
Wrap the whole project with DrawerContainer
function App(): JSX.Element {
return (
<NavigationContainer
theme={theme}
basePath='/home'
>
<DrawerContainer>
<StatusBar
animated={true}
barStyle='light-content'
backgroundColor={colors.primary}
showHideTransition={'slide'}
hidden={false}
/>
<Screen />
</DrawerContainer>
</NavigationContainer>
);
}
props:
Property | Description |
---|---|
drawerConfig | Configuration for a drawer component. |
drawerWidth | The width of the drawer . Default 300 |
drawerPosition | The position of the drawer (left, right, or undefined). Default left |
renderNavigationView | Content to render inside the drawer. |
How to use drawer and deferent content
<Render.screen
title='home'
drawerConfig={{
drawerPosition: 'left',
drawerWidth: 300,
renderNavigationView: <DrawerHome />
}}
hasFooter={true}
path='/home'
screen={HomeScreen}
/>
Note: If you use the navigation drawer in the parent container it will nest in all pages.
If you don't want to see any screen then follow the example below
<Render.screen
title = 'home'
drawerConfig = {{
renderNavigationView: undefined
}}
hasFooter = { true}
path = '/home'
screen = { HomeScreen }
/>
Or if you want to add it manually inside the screen component
const Home = (props: ScreenProps) => {
const router = useRouter()
const drawer = userDrawer()
useEffect(() => {
drawer.setDrawerConfig({
renderNavigationView: <HomeDrawer />
})
}, [])
return (
<View>
<StyleText>
Home
</StyleText>
<Link href='/about' >
About
</Link>
<Button
title='Home'
onPress={() => {
router.push('/settings/435345')
}}
/>
</View>
)
}