React-native-ui-kitten: Unable to show Drawer Navigation

[domsterthebot]

💬 Question

UI Kitten and Eva version

| Package | Version |
| ----------- | ----------- |
| @eva-design/eva | 1.4.0 |
| @ui-kitten/components | 4.4.1 |

Hi, i've a file as a Navigator. I'm unable to show the Drawer Navigation. I did it based on the documentation.

There's no errors/warnings found.

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import { SafeAreaView } from 'react-native';
import { Drawer as UIKittenDrawer } from '@ui-kitten/components';

import InfoScreen, {
  screenOptions as InfoOptions
} from '../screens/InfoScreen';
import HistoryScreen, {
  screenOptions as HistoryOptions
} from '../screens/HistoryScreen';
import ScheduleScreen, {
  screenOptions as ScheduleOptions
} from '../screens/ScheduleScreen';

import LoginScreen, {
  screenOptions as LoginOptions
} from '../screens/LoginScreen';

const AuthStackNavigator = createStackNavigator();

const TrackerDrawerNavigator = createDrawerNavigator();

const drawerData = [
  { title: 'Information' },
  { title: 'Schedule' },
  { title: 'History' }
];

const CustomDrawer = ({ navigation, state }) => {
  const onRouteSelection = index => {
    navigation.navigate(state.routeNames[index]);
  };

  return (
    <UIKittenDrawer
      data={drawerData}
      selectedIndex={state.index}
      onSelect={onRouteSelection}
    />
  );
};

export const TrackerNavigator = () => {
  return (
    <TrackerDrawerNavigator.Navigator
      drawerContent={props => <CustomDrawer {...props} />}
    >
      <TrackerDrawerNavigator.Screen
        name='Information'
        component={InfoScreen}
      />
      <TrackerDrawerNavigator.Screen
        name='Schedule'
        component={ScheduleScreen}
      />
      <TrackerDrawerNavigator.Screen name='History' component={HistoryScreen} />
    </TrackerDrawerNavigator.Navigator>
  );
};

export const AuthNavigator = () => {
  return (
    <AuthStackNavigator.Navigator screenOptions={defaultNavOptions}>
      <AuthStackNavigator.Screen
        name='Login'
        component={LoginScreen}
        options={LoginOptions}
      />
    </AuthStackNavigator.Navigator>
  );
};

My package.json file:

  "dependencies": {
    "@eva-design/eva": "^1.4.0",
    "@react-native-community/masked-view": "0.1.5",
    "@react-navigation/drawer": "^5.0.7",
    "@react-navigation/native": "^5.0.7",
    "@react-navigation/stack": "^5.0.8",
    "@ui-kitten/components": "^4.4.1",
    "@ui-kitten/eva-icons": "^4.4.1",
    "expo": "^36.0.0",
    "react": "16.9.0",
    "react-dom": "16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-safe-area-context": "0.6.0",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-svg": "9.13.3",
    "react-native-web": "^0.11.7",
    "react-navigation": "^4.2.1",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  }

Thanks!

[artyorsh]

Hi @domsterthebot, I'm running your code and it works for me. I guess you have an issue with configuring navigation. From your code, it's not clean where TrackerNavigator is used. So I'm going to close this since this is not UI Kitten issue.

You can see a demo app that runs all UI Kitten navigation components with latest React Navigation, hope it helps.

[domsterthebot]

@artyorsh thank you for the link. I'll follow it and see what i can do. Thanks!

[domsterthebot]

Follow up: I re-did it following UIKitten's docs too. Apparently everything was working.. I just didn't drag from the left. Oh my.. Thanks anyway @artyorsh ! Sorry for the troubles..