Is TabNavigator deprecated?

Question

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:

Irradiation

tab navigator is being moved into a separate repo for react-navigation v2, but should work in v1 well – Urdar

@vonovak, I added a screenshot showing the terminal output. Any idea what createBottomTabNavigator is? – Irradiation

It's deprecated as it said. See the docs, it has been updated: reactnavigation.org/docs/en/tab-based-navigation.html – Quirinus

Answer 1

TabNavigator is not deprecated in v1 of React Navigation. However, because I referenced react-navigation in my package.json like this...

"react-navigation": "git+https://github.com/react-community/react-navigation.git",

I was pulling the latest code, and at some point (presumably yesterday) this reference started pulling in v2 of React Navigation, rather than v2, resulting in the strange "deprecated" message and also the error mentioned in my question.

The solution was provided here: https://github.com/expo/expo/issues/1596#issuecomment-378424966

Irradiation

Answer 2

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 },
});

Sarnoff

Answer 3

Yes, it's deprecated. Use what @dazzle has said. Also one more thing that turns out to be a common mistake is that newbies like me include that MainNavigator inside a view tag. Don't do that. Instead of this

return <View><MainNavigator/><View/>

do this

return <MainNavigator/>

Orthorhombic

Answer 4

Check your react navigation version in your package.json file. If your react navigation is v2 or v3 then this will not work. You have to use createBottomTabNavigator https://reactnavigation.org/docs/en/tab-navigator.html

Trooper