How to add drawer navigation to tabs navigation

[exlnt]

💬 Question

I am a fairly new React-Native developer. I still have not picked up TypeScript, so I'm struggling to convert your TS code into plain RN code. I have read all of your get started docs and gone through it step by step. I also read your entire blog post on React-Navigation 5 and UI kitten. I downloaded the code repo for that too. But since it is using TS, I'm finding it difficult to convert it to plain RN(JS) code.

Here is my navigation.component.js file:

` import React from 'react'; import {NavigationContainer} from '@react-navigation/native'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import { BottomNavigation, BottomNavigationTab, Layout, Text, Icon, Tab, } from '@ui-kitten/components'; import {HomeScreen} from '../screens/home.component'; import {DetailsScreen} from '../screens/details.component'; import {RequestScreen} from '../screens/request.component';

const HomeIcon = (props) => <Icon {...props} name="home" />; const DetailIcon = (props) => <Icon {...props} name="list" />; const RequestIcon = (props) => <Icon {...props} name="clipboard" />;

const {Navigator, Screen} = createBottomTabNavigator();

const BottomTabBar = ({navigation, state}) => ( <BottomNavigation selectedIndex={state.index} onSelect={(index) => navigation.navigate(state.routeNames[index])}>

<BottomNavigationTab title="DETAILS" icon={DetailIcon} />
<BottomNavigationTab title="Request" icon={RequestIcon} />

);

const TabNavigator = () => ( <Navigator tabBar={(props) => <BottomTabBar {...props} />}>

<Screen name="Details" component={DetailsScreen} />
<Screen name="Request" component={RequestScreen} />

);

export const AppNavigator = () => (

);

`

In reading and watching React-Navigation 5 tutorials I should be able to add a drawer navigator by simply creating a drawer navigator and then referencing the Tab navigator in one of the Drawer.Screen entries. How can I do the same with UI Kitten components and React-Navigation5 components?

UI Kitten and Eva version

Package	Version
@eva-design/eva	2.0.0
@ui-kitten/components	5.0.0

[exlnt]

I created a new component with this code: drawer.navigation.component-js.txt

And it leads to this error:

[artyorsh]

@exlnt you're missing the concept of object destruction usage. There is no TNavigator and TScreen in object returned by createBottomTabNavigator