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