This is my TabBar Component: NavBar.js:
`
...
// Js
import { AnimatedTabBarNavigator } from "react-native-animated-nav-tab-bar";
//Pages
import Home from "../../pages/Home"; //Home Page
And this is my App.js:
`
//NavBar
import NavBar from "./src/components/NavigationBar/NavBar";
import { NavigationContainer } from "@react-navigation/native";
export default function App() {
return (
);
}
...
error and explanation:
Component Exception
Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'?
`
full error:
`
Error: Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'?
This error is located at:
in BottomTabNavigator (at NavBar.js:25)
in _default (at App.js:16)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
in ThemeProvider (at NavigationContainer.tsx:90)
in ForwardRef(NavigationContainer) (at App.js:15)
in RCTView (at View.js:34)
in View (at App.js:11)
in App (created by ExpoRoot)
in ExpoRoot (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in DevAppContainer (at AppContainer.js:121)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)
at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:294:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:155:27 in invoke
at node_modules\regenerator-runtime\runtime.js:165:18 in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue
`
I have some problems that I can't get over.
This is my TabBar Component: NavBar.js: ` ... // Js import { AnimatedTabBarNavigator } from "react-native-animated-nav-tab-bar"; //Pages import Home from "../../pages/Home"; //Home Page
const Tabs = AnimatedTabBarNavigator(); // thanks. https://js.coach/package/react-native-animated-nav-tab-bar export default () => { return ( <Tabs.Navigator // default configuration from React Navigation tabBarOptions={{ activeTintColor: "#2F7C6E", inactiveTintColor: "#222222", activeBackgroundColor: "#e4e4e7", }}
And this is my App.js: ` //NavBar import NavBar from "./src/components/NavigationBar/NavBar"; import { NavigationContainer } from "@react-navigation/native";
export default function App() { return (
); } ...
error and explanation:
Component Exception Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'? `full error: ` Error: Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'?
This error is located at: in BottomTabNavigator (at NavBar.js:25) in _default (at App.js:16) in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409) in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91) in ThemeProvider (at NavigationContainer.tsx:90) in ForwardRef(NavigationContainer) (at App.js:15) in RCTView (at View.js:34) in View (at App.js:11) in App (created by ExpoRoot) in ExpoRoot (at renderApplication.js:45) in RCTView (at View.js:34) in View (at AppContainer.js:106) in DevAppContainer (at AppContainer.js:121) in RCTView (at View.js:34) in View (at AppContainer.js:132) in AppContainer (at renderApplication.js:39) at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException at node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0 at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch at node_modules\regenerator-runtime\runtime.js:294:29 in invoke at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch at node_modules\regenerator-runtime\runtime.js:155:27 in invoke at node_modules\regenerator-runtime\runtime.js:165:18 in PromiseImpl.resolve.then$argument_0 at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0 at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in guard$argument_0 at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in guard at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue at [native code]:null in flushedQueue at [native code]:null in invokeCallbackAndReturnFlushedQueue `