Problem with TabNavigator

[mgmg]

Hello,
It’s my first use of Snack. I write a little app, with TabNavigator. I have just copied the original documentation.
I have this error.
Anyone can help me ?
Thanks
MG

const Tab = createBottomTabNavigator(); // line 18

export default function App (){

return (

<Tab.Navigator>
<Tab.Screen name=“AboutMe” component={AboutMe} />
<Tab.Screen name=“Search” component={Search} />
</Tab.Navigator>

);

Error: “(0 , _reactNavigation.TabNavigator) is not a function” in TypeError: (0 , _reactNavigation.TabNavigator) is not a function << at App (App.js.js:18:29 << << at Vo ([snack internals]

[sajico]

Hi,

createBottomTabNavigator() must be put in App function.
And <Tab.Navigator> must be wrap with <NavigationContainer>.

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const AboutMe = () => (
  <View style={styles.container}>
    <Text>AboutMe</Text>
  </View>
);
const Search = () => (
  <View style={styles.container}>
    <Text>Search</Text>
  </View>
);

const App = () => {
  const Tab = createBottomTabNavigator(); // here!
  return (
    <NavigationContainer>{/* here! */}
      <Tab.Navigator>
        <Tab.Screen name="AboutMe" component={AboutMe} />
        <Tab.Screen name="Search" component={Search} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};
export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

If you still getting error, replace package.json like this:

{
  "dependencies": {
    "@react-navigation/native": "*",
    "@react-navigation/bottom-tabs": "*",
    "react-native-screens": "~3.0.0"
  }
}

[mgmg]

Hi,

No more bug when I write
“@react-navigation/native”: “*”,
in package.json.

The others suggestions do not correct the error.
Thank you for help

MgMg