StackNavigator and TabNavigaor is deprecated in react-native

Question

In my project, after updating node modules, react navigation showed some issues. In the console it says, The tabBarBottom is deprecated. Use react-navigation-tabs package. stackNavigator function name is deprecated. Use createStackNavigator tabNavigator is deprecated. Use createBottomTabNavigator

import React from "react";
import { StackNavigator } from "react-navigation";
import { TabNavFooter } from "./TabNavFooter";
import { SIGNIN_KEY, SIGNUP_KEY } from "../config/routeKeys";
import {
  SignupScreen,
  SigninScreen,
  MainFeedScreen,
  CommentScreen,
  SharePostScreen
} from "../screens";

export const Routes = StackNavigator({
  mainfeed: { screen: TabNavFooter },
  signin: { screen: SigninScreen },
  signup: { screen: SignupScreen },
  comments: { screen: CommentScreen },
  sharePost: { screen: SharePostScreen }
});


import React from "react";
import { TabNavigator, TabBarBottom } from "react-navigation";
import { ClickableImage, ClickableIcon } from "../mixing/UI";
import TAB_NAVIGATOR_IMAGES from "../config/tabNavImgs";
import { Image } from "react-native";

import {
  MainFeedScreen,
  WorkoutScreen,
  VideosScreen,
  ChatScreen,
  ProfileMainScreen
} from "../screens";

export const TabNavFooter = TabNavigator(
  {
    mainfeed: { screen: MainFeedScreen },
    workout: { screen: WorkoutScreen },
    video: { screen: VideosScreen },
    chat: { screen: ChatScreen },
    profile: { screen: ProfileMainScreen }
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let imageSource;

        if (routeName === "mainfeed") {
          imageSource =
            TAB_NAVIGATOR_IMAGES[
              `${focused ? "mainfeedActive" : "mainfeedInactive"}`
            ];
        } else if (routeName === "workout") {
          imageSource =
            TAB_NAVIGATOR_IMAGES[
              `${focused ? "workoutActive" : "workoutInactive"}`
            ];
        } else if (routeName === "video") {
          imageSource =
            TAB_NAVIGATOR_IMAGES[
              `${focused ? "videoActive" : "videoInactive"}`
            ];
        } else if (routeName === "chat") {
          imageSource =
            TAB_NAVIGATOR_IMAGES[`${focused ? "chatActive" : "chatInactive"}`];
        } else if (routeName === "profile") {
          imageSource =
            TAB_NAVIGATOR_IMAGES[
              `${focused ? "profileActive" : "profileInactive"}`
            ];
        }

        return (
          <Image
            source={imageSource}
            style={{
              width: 25,
              height: 25,
              tintColor: tintColor,
              marginBottom: 0
            }}
          />
        );
      }
    }),
    tabBarComponent: TabBarBottom,
    tabBarPosition: "bottom",
    tabBarOptions: {
      activeTintColor: "blue",
      inactiveTintColor: "gray"
    },
    swipeEnabled: false,
    lazyLoad: true,
    animationEnabled: false
  }
);

How can I solve these errors?

Answer 1

It's due to upgrade in react-navigation version. you have probably upgraded to v2 of the package.

They have documentation for that version but still not complete and lack in some minute details. you can see the doc in this link

the configuration differs between v1 and v2. you could manage to get v2 work with some difficulties. you can ask specific difficulties you face in that process here or in some other question. But if you find still tough, you can move back to lower version which is well documented.