0
I’m developing an application in React Native with three types of browsing: Drawer, Bottom Tab and Stack Navigator. I entered these three types of navigation but shows the following error:
He says I have two "Navigationcontainer" but there is only one in my application. Does anyone know what I can do in this case? Follow code below:
function Drawer(){
return(
<AppDrawer.Navigator
drawerContent={(props) => <CustomDrawer {...props} />}
drawerStyle={{
backgroundColor: '#0e28cc'
}}
drawerContentOptions={{
labelStyle: {
fontWeight: 'bold'
},
activeTintColor: '#fff',
inactiveTintColor: '#ddd',
activeBackgroundColor: '#0e9dcc',
inactiveBackgroundColor: '#0e9dcc',
itemStyle: {
marginVertical: 5
}
}}
>
<AppDrawer.Screen name="Editar Perfil" component={EditPerfil} />
</AppDrawer.Navigator>
)
}
function Tabs(){
return(
<Tab.Navigator
screenOptions={({route}) => ({
tabBarIcon: ({color, size}) => {
const {} = icons[route.name];
return <Icon name={name} color={color} size={size} />
}
})}
tabBarOptions={{
style: {
backgroundColor: '#121212'
},
activeTintColor: '#fff',
}}
>
<Tab.Screen name="Home" component={Home}/>
<Tab.Screen name="Formulário" component={Form}/>
<Tab.Screen name="Perfil" component={Perfil}/>
</Tab.Navigator>
)
}
export default function AppRoutes(){
return(
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={Tabs} options={{headerShown: false}}/>
<Stack.Screen name="Editar Perfil" component={Drawer} options={{headerShown: false}}/>
</Stack.Navigator>
</NavigationContainer>
)
}
You installed the React-natvigation library and did import correctly? import { Navigationcontainer } from '@React-navigation/Native';
– Lucas Caires Rodrigues
Yes, it is installed and import is correct.
– João Vitor