Drawer Navigate inside a stack Navigator-CodePudding

Inside my Home (Stack) page I want to create a drawer to show more information options that will be routes, is there a possibility to create a drawer inside this Home(Stack) to navigate to other routes?


import { api } from '../../services/api'

import Cultural from '../Cultural'
import Religioso from '../Religioso'

export default function Home() {

  const Drawer = createDrawerNavigator()

  const { user } = useContext(AuthContext)
  const [teste, setTeste] = useState([])

  async function loadingRequest() {
    const res = await api.get('/religioso')
    setTeste(res.data)
  }

  useEffect(() => {
    loadingRequest()
    console.log(teste)
  }, [])

  console.log(teste)

  return (
    <SafeAreaView>
      <ContainerCard>
        <Image style={{ width: '100%', height: 120, backgroundColor: 'red' }} />
      </ContainerCard>
      <NavigatorContainer>
        <Drawer.Navigator>
          <Drawer.Screen name='Cultural' component={Cultural} />
          <Drawer.Screen name='Religioso' component={Religioso} />
        </Drawer.Navigator>
      </NavigatorContainer>
    </SafeAreaView>
  )
}```

CodePudding user response：

Here is the react navigation documentation on nesting navigators.

https://reactnavigation.org/docs/nesting-navigators/

Article TL;DR

Based on your question, it looks like an example of nested navigation in your react native app.

Your root app contains page Home, and this Home page has pages Cultural, Religioso.

You can nest your navigation pages as follows:

function Home() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Cultural" component={Cultural} />
      <Drawer.Screen name="Religioso" component={Religioso} />
    </Drawer.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
        />
        {/** Other stack screens here */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}