akveo / kittenTricks

React Native starter kit with over 40 screens and modern Light and Dark theme for creating stunning cross-platform mobile applications.

Home Page:https://akveo.github.io/react-native-ui-kitten/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to add drawer navigation to tabs navigation

exlnt opened this issue · comments

commented

💬 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
commented

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

And it leads to this error:
Screenshot_1591560984

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