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:

PropertyDescription
drawerConfigConfiguration for a drawer component.
drawerWidthThe width of the drawer . Default 300
drawerPositionThe position of the drawer (left, right, or undefined). Default left
renderNavigationViewContent 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>
    )
}

Dynamic ScreenHooks