How to add drawer navigation to tabs navigation
exlnt opened this issue · comments
💬 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])}>
);
const TabNavigator = () => (
<Navigator tabBar={(props) => <BottomTabBar {...props} />}>
);
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 |
I created a new component with this code:
drawer.navigation.component-js.txt
@exlnt you're missing the concept of object destruction usage.
There is no TNavigator
and TScreen
in object returned by createBottomTabNavigator