NavigationContainer Problem in Custom NavBar

[alpertas]

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",
}}
>
<Tabs.Screen name="Home" component={Home} />
</Tabs.Navigator>
);
};
`

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
`

[neelpatel23]

Wrap Tabs.Navigation in NavigationContainer

[torgeadelin]

Duplicate of #81