Is TabNavigator deprecated?

react-native react-navigation react-native-tabnavigator
arnoldbird picture arnoldbird · Apr 3, 2018 · Viewed 7.3k times · Source

When I run the simulator with...

react-native run-ios

...I am seeing a message in the terminal that "TabNavigator is deprecated. Please use the createBottomTabNavigator..."

However, I don't think TabNavigator is deprecated, and I don't think createBottomTabNavigator exists on the web or in reality generally. Other than that, all's well! Except I can't run my app. Because I get this red-screen error suggesting something is amiss with React Navigation:

undefined is not a function (near '...(0 , _reactNavigation.TabNavigator)...')

Additional context: These issues began to appear after I ejected an expo app and then tried to re-constitute it in its pre-ejected state by creating a new app (create-react-native-app) and then moving my custom code into the new app, from a git commit prior to ejecting. I also had to update the Expo client in the simulator. I'm not sure if this is relevant info, but before I ejected, I did not see this message suggesting TabNavigator is deprecated.

The React Navigation docs give no indication that TabNavigator might be deprecated: https://reactnavigation.org/docs/tab-based-navigation.html

Here is the terminal output with a message indicating TabNavigator is deprecated:

terminal output says TabNavigator is deprecated

Answer

Dazzle picture Dazzle · May 5, 2018

Got the same error

Fix =

change import { TabNavigator } from 'react-navigation'

to

import { createBottomTabNavigator } from 'react-navigation'

...

const MainNavigator = createBottomTabNavigator({
  welcome: { screen: WelcomeScreen },
  auth: { screen: AuthScreen },
});

Related questions

Hide header in stack navigator React navigation

I'm trying to switch screen using both stack and tab navigator. const MainNavigation = StackNavigator({ otp: { screen: OTPlogin }, otpverify: { screen: OTPverification}, userVerified: { screen: TabNavigator({ List: { screen: List }, Settings: { screen: Settings } }), }, }); In this case stacknavigator is used first and then tabnavigator. and …

Read More
Disable back button in react navigation

I'm using react native navigation (react-navigation) StackNavigator. it starts from the Login page throughout the whole lifecycle of the app. I don't want to have a back option, returning to the Login screen. Does anyone know how it can be …

Read More
React navigation goBack() and update parent state

I've a page that will render the user's name if s/he is logged in or "Create an account" or "Sign in" option if s/he not. Screen as below They can navigate to "Sign in" or "Create an account" …

Read More