CODEWITHSUNDEEP
react-native
Dmila Ram
Dmila Ram

Reputation: 1074

BottomTabNavigator - react native

I want to have bottomTabNavigator in my app,I have installed the followings:

>     "react-navigation": "^4.0.7",
>     "react-navigation-tabs": "^2.5.5",

then i have created a TabNavigator like:

import React from "react";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { createStackNavigator } from "react-navigation-stack";
import HomeScreen from "../screens/HomeScreen";
import VideosScreen from "../screens/VideosScreen";

const HomeStack = createStackNavigator(
  {
    Home: HomeScreen,
    Videos: VideosScreen
  },
  {
    mode: "modal"
  }
);

const VideosStack = createStackNavigator({
  Videos: VideosScreen,
  Video: VideosScreen
});

const FoodsStack = createStackNavigator({
  Foods: VideosScreen,
  Food: VideosScreen
});
const TrainingsStack = createStackNavigator({
  Trainings: VideosScreen,
  Training: VideosScreen
});

const TabNavigator = createBottomTabNavigator({
  HomeStack,
  VideosStack
});

export default TabNavigator;

and, then i have created an AppNavigator:

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import HomeScreen from "../screens/HomeScreen";
import VideosScreen from "../screens/VideosScreen";
import TabNavigator from "./TabNavigator";

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Videos: VideosScreen
  },
  {
    mode: "modal"
  }
);

export default createAppContainer(TabNavigator);

now when i run the application it crashes as you can see in the picture below: enter image description here

now what can i do? any ideas?

Upvotes: 1

Views: 253

Answers (1)

Krishna Vyas
Krishna Vyas

Reputation: 1028

If you're on an older React Native version, you need to manually link the dependencies. To do that,

run on terminal:

react-native link react-native-reanimated
react-native link react-native-gesture-handler
react-native link react-native-screens

or if you are using expo, run:

expo install react-native-gesture-handler react-native-reanimated

Upvotes: 1

Related Questions