NavigationContainer Problem in Custom NavBar

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 (
    <View style={styles.container}>
      <NavigationContainer>
        <NavBar />
      </NavigationContainer>
    </View>
  );
}
...

error and explanation:

Component Exception
Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'?

I am using this package => react-native-animated-nav-tab-bar

How can I fix this?

This is a problem in the react-native-animated-nav-tab-bar package. It 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:

https://github.com/torgeadelin/react-native-animated-nav-tab-bar/blob/0642630cb487a496b0619201daa68cdd164f8f14/package.json#L59

The library 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.

Please open an issue in the library's repo.