Problems at nested Stack Navigation and Drawer Navigator for Android React Native

Viewed 206

thanks for helping.

I'm learning React Native with Expo and I'm trying to use Stack Navigator and Drawer Navigator. The stacks from Stack Navigator are rendering the screens and all of this is inside of the Drawer Navigator.

Everything "works" fine but actually, it looks like is rendering the screens from the stack, inside of another screen from the drawer.

Stack Navigator rendering the screens

import React from 'react'
import HomeR from '../screens/HomeR'
import TaskR from '../screens/TasksR'
import AboutR from '../screens/AboutR'
import RenderTasksR from '../screens/RenderTasksR'
import { createStackNavigator } from '@react-navigation/stack'

const Stack = createStackNavigator ();

const AboutStack = () =>{
  return (
    <Stack.Navigator>
      <Stack.Screen name = 'AboutA' component={AboutR}/>
    </Stack.Navigator>
  )
}
const HomeStack = () => {
  return (
    <Stack.Navigator >
      <Stack.Screen name = 'HomeInit' component={HomeR} />
      <Stack.Screen name = 'Task' component={TaskR} />
      <Stack.Screen 
        name = 'RenderTasks' 
        component={RenderTasksR}
        options={({route}) => ({title: route.params.task})}
      />
    </Stack.Navigator>
  )
}

export {AboutStack, HomeStack}

Drawer Navigator rendering the stacks from Stack Navigator

import React from 'react'
import { createDrawerNavigator } from '@react-navigation/drawer'
import { AboutStack, HomeStack } from './MyRoutes'

const MyDrawer = () => {
  const Drawer = createDrawerNavigator ()
  return (
    <Drawer.Navigator>
      <Drawer.Screen name = 'Home' component={HomeStack} />
      <Drawer.Screen name = 'About' component={AboutStack} />
    </Drawer.Navigator>
  )
}

export default MyDrawer

App.js rendering the Drawer

import React from 'react'
import { NavigationContainer } from '@react-navigation/native';
import MyDrawer from './routes/MyDrawer';

export default function App(){
  return(
    <NavigationContainer> 
      <MyDrawer/>
    </NavigationContainer>
  );
}

Emulator showing 2 different "screens" (one inside the other) Emulator showing 2 different "screens" (one inside the other)

After navigate, the main screen keeps showing "Home"

After navigate, the main screen keeps showing "Home"

The navigation with the buttons of the app works on the inside screen, while the navigation with the drawer works on the outside screen. So the showed on display never navigates between screens according to the drawer.

I'm very new to this and I'm following a course from Udemy, in the videos the guy's using an iOS emulator and it works fine for him, so, I think that this happens only on Android.

I really appreciate it if u can help me and explain to me why this happens. Thank you so much.

0 Answers
Related