Error: Couldn't register the navigator.
orjiAce opened this issue · 30 comments
Hello i ran into some issues, I'm building the app with expo and react-navigation v5 but i got this error when i tried to view the app on my device
Error: Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'?
This error is located at:
in BottomTabNavigator (at AnimatedTab.js:30)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
in ThemeProvider (at NavigationContainer.tsx:90)
in ForwardRef(NavigationContainer) (at AnimatedTab.js:27)
in TabNav (at App.js:86)
in ThemeProvider (at App.js:82)
in App (created by ExpoRoot)
in ExpoRoot (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)
and yes i wrapped the app with NavigationContainer, please can u help me out? thank youi
Please see this issue #70, it's related to you you're experiencing.
I just checked and I ran this command
npm cache clean --force
.
then restarted the application with Expo start and I'm still experiencing the issue
AppLoading threw an unexpected error when loading:
Error: Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'?
React.useEffect(() =>{
const {register, unregister} = container;
register(key);
Could you post your package.json and the source file where you define your navigation? Thanks.
Okay
this is my package.json looks like >
..
...
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@expo/vector-icons": "^12.0.0",
"@react-native-async-storage/async-storage": "^1.14.1",
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/bottom-tabs": "^5.11.9",
"@react-navigation/material-top-tabs": "^5.3.15",
"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^5.14.3",
"@types/react-native": "^0.63.51",
"expo": "~40.0.0",
"expo-app-loading": "^1.0.1",
"expo-asset": "~8.2.1",
"expo-font": "~8.4.0",
"expo-status-bar": "~1.0.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-animated-nav-tab-bar": "^3.1.4",
"react-native-app-intro-slider": "^4.0.4",
"react-native-appearance": "~0.3.3",
"react-native-gesture-handler": "~1.8.0",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "~2.15.2",
"react-native-smart-tip": "^2.3.0",
"react-native-svg": "^12.1.0",
"react-native-vector-icons": "^8.1.0",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"@babel/core": "~7.9.0",
"react-native-responsive-screen": "^1.4.2"
},
"private": true
}
this is the Navigation code >
...
..
import React from 'react'
import { Text, TouchableOpacity, Image } from 'react-native'
import HomeScreen from "../screens/HomeScreen";
import UserProfile from "../screens/ProfileScreen";
import DividendScreen from "../screens/DividendScreen";
import Projects from "../screens/ProjectsScreen";
import { AnimatedTabBarNavigator } from 'react-native-animated-nav-tab-bar'
import {NavigationContainer} from "@react-navigation/native";
import Icon from 'react-native-vector-icons/Feather'
const Tabs = AnimatedTabBarNavigator()
const TabBarIcon = props => {
return (
<Icon
name={props.name}
size={props.size ? props.size : 24}
color={props.tintColor}
/>
)
}
const TabNav = () => (
<Tabs.Navigator>
<Tabs.Screen
name="Dashboard"
component={HomeScreen}
options={{
tabBarIcon: ({ focused, color }) => (
),
}}
/>
<Tabs.Screen
name="Projects"
component={Projects}
options={{
tabBarIcon: ({ focused, color, size }) => (
),
}}
/>
<Tabs.Screen
name="Dividend"
component={DividendScreen}
options={{
tabBarIcon: ({ focused, color }) => (
),
}}
/>
<Tabs.Screen
name="Profile"
component={UserProfile}
options={{
tabBarIcon: ({ focused, color }) => (
),
}}
/>
</Tabs.Navigator>
)
export default TabNav;
hi
was this ever resolved? having a similar issue
was this ever resolved? having a similar issue
No, I had built my own custom bottom tab from scratch using react-native-reanimated-2
Well I would love to use this package but can't figure out this problem as well. Have done the same troubleshooting as issue #70 and have react navigation v5.x and the newest version of this package. I am also using Redux to clarify any confusion with the tags.
If anyone has any suggestions here is my current navigation set up:
======== App.js =============
return (
<NavigationContainer>
{!loggedIn ? (
<AuthStack.Navigator initialRouteName="Login">
<AuthStack.Screen name="Login">
{(props) => <FormikLogin {...props} />}
</AuthStack.Screen>
<AuthStack.Screen name="Register">
{(props) => <FormikRegister {...props} />}
</AuthStack.Screen>
</AuthStack.Navigator>
) : (
<Provider store={store}>
<ProfileStack.Navigator
initialRouteName="Home"
>
<ProfileStack.Screen name="Home" options={{ headerShown: false }} component={HomeScreen} navigation={this.props.navigation} />
... other screens
</Provider>
)}
</NavigationContainer>
)
======= Home.js =========
import { AnimatedTabBarNavigator } from "react-native-animated-nav-tab-bar";
const Tabs = AnimatedTabBarNavigator();
render() {
return (
<Tabs.Navigator
// default configuration from React Navigation
tabBarOptions={{
activeTintColor: "#2F7C6E",
inactiveTintColor: "#222222"
}}
>
<Tabs.Screen name='Feed' component={FeedScreen} />
<Tabs.Screen name='Trending' component={ExploreScreen} />
<Tabs.Screen name='Profile' component={ProfileScreen} />
</Tabs.Navigator>
)
}
This happens because this library adds @react-navigation/native to its dependencies which makes it possible to include multiple versions of @react-navigation/native since you will also have it in your own package.json, and multiple versions of @react-navigation/native will cause such issues:
It needs to move @react-navigation/native to peerDependencies.
It also does the same for react-native-screens, it's in dependencies whereas it should be in peerDependencies.
I'm getting this issue as well. I wonder if it is because I'm using v6 of react navigation?
@jezzgoodwin no, it's because of what wrote above
Thanks @satya164 for pointing out the issue. I'll come up with a fix this weekend.
Thanks a bunch!
@jezzgoodwin I have not checked if the package works with v6, I noticed they just released it recently. Will look into that this weekend too.
im having this same issue. wondering if this has been resolved?
@aircliff It's not solved yet, but you can workaround as commented by
@satya164. Remove react-navigation lib and it´s dependencies from dependencies, and put into peerDependencies , in package.json.
"peerDependencies": {
"@react-navigation/bottom-tabs": "5.11.3",
"@react-navigation/native": "5.9.0",
"react-native-screens": "^3.5.0"
}
Can somebody create a PR for this or provide a fork?
I tried forking this repo and apply @rogeraugusto 's changes, however it's still not working for me
Thank you 🙏
Can somebody create a PR for this or provide a fork?
I tried forking this repo and apply @rogeraugusto 's changes, however it's still not working for me
Thank you 🙏
@merganon it´s a simple solution, just edit your package.json and change the libs order as commented above
Seems like I forgot to add "@react-navigation/bottom-tabs": "5.11.3", to the peerDependencies. Thank you!
Everything is working fine, except for the inactiveTintColor prop which is not applying. Does anyone have the same issue?
you can follow the documentation here https://github.com/torgeadelin/react-native-animated-nav-tab-bar#documentation and set the options in your Navigator
<Navigator
appearance={{
// options
}}
tabBarOptions={{
// options
}}
>
This is my configuration:
export default () => (
<Tabs.Navigator
tabBarOptions={{
activeTintColor: "#2F7C6E",
inactiveTintColor: "#FF0000",
}}
>
<Tabs.Screen name="Home" component={Home} />
<Tabs.Screen name="User" component={User} />
</Tabs.Navigator>
)
I set inactiveTintColor to red, but it's not working (see GIF below).
Also I'm getting this warning every time I load the app:
It's probably libs version issue.
Try set your libs as below and run a yarn install
"dependencies": {
"react-native-animated-nav-tab-bar": "^3.1.4",
},
"peerDependencies": {
"@react-navigation/bottom-tabs": "5.11.3",
"@react-navigation/native": "5.9.0",
"react-native-screens": "^3.5.0"
},
I have the same versions. So weird.
Does it work for you?
I also have (maybe worth to note):
"react": "17.0.2",
"react-native": "0.65.1",
and I'm running Android Emulator on Windows 10.
I´m using expo, so the libs are kind different. But it´s working fine.
"dependencies": {
"@expo-google-fonts/livvic": "^0.2.0",
"expo": "~42.0.1",
"expo-app-loading": "^1.1.2",
"expo-blur": "~9.0.3",
"expo-font": "~9.2.1",
"expo-splash-screen": "~0.11.2",
"expo-status-bar": "~1.0.4",
"expo-updates": "~0.8.1",
"moti": "^0.12.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "~0.63.4",
"react-native-animated-nav-tab-bar": "^3.1.4",
"react-native-gesture-handler": "^1.10.3",
"react-native-iphone-x-helper": "^1.3.1",
"react-native-reanimated": "~2.2.0",
"react-native-responsive-fontsize": "^0.5.1",
"react-native-safe-area-context": "^3.2.0",
"react-native-unimodules": "~0.14.5",
"react-native-web": "~0.13.12",
"styled-components": "^5.3.0"
},
"peerDependencies": {
"@react-navigation/bottom-tabs": "5.11.3",
"@react-navigation/native": "5.9.0",
"react-native-screens": "^3.5.0"
},
I'm on React Native CLI. I guess this library is only working for Expo then
I'm on React Native CLI. I guess this library is only working for Expo then
I´ll try a implementation on CLI to validate this libs.
@merganon I´ve implemented and example template with CLI, and it´s working fine too, check it out here https://github.com/rogeraugusto/animated-tabbar-app.
Anyone else having problems with react navigation v6? It worked for me with React Navigation v5, but unfortunately not with the v6 version. For more details, see the issue I published.
@rogeraugusto Thank you!!! your example repo saved me 👍
This should be now fixed, please update to 3.1.5
@torgeadelin you have exact version in peer dependency which will still cause the issue with npm due to auto-install and print warning on yarn. You have to use a version range such as >= 5.0.0 || >= 6.0.0 or use * for any version.
@satya164 I have addressed that now. I have used ^5.9.0 since I haven't fully tested the new major release. Hoping to do that soon, and will update the dependency with the latest version.