React-Native Screen Navigation Refresh with createDrawerNavigator v5

Question

I am attempting to build an android app using react-native. Here is my layout :

HomeScreen - presents login option to user and navigates to Page2 Page2 (colored yellow) - provides a drawer menu to navigate to either Page 3 (Search Page) or Page 4 (Add Page) Page3 (colored red) - provides a View with red background and text Page4 (colored green( - provides a View with green background and text

My Issue : I do not see Page 2 (yellow screen) ** After logging in successfully Homescreen automatically navigates to Page 2 but instead of showing Page2 (yellow color), I get a red page with slider menu and if I choose page4 (green color) with slider menu.

Please see attached images for clarity (Note : I am not seeing page 2 even though slider menu is being rendered)

My code :

APP.JS

import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {View, Text} from 'react-native';

import HomeScreen from './pages/HomeScreen';
import Page2 from './pages/Page2';
import Page3 from './pages/Page3';
import Page4 from './pages/Page4';


const App = createStackNavigator({

Home: {screen: HomeScreen},
Page2 : {screen: Page2},
Page3: {screen: Page3},
Page4: {screen: Page4},

},
{
    initialRouteName: 'Home',
}
);

export default createAppContainer(App);

HomeScreen.js

import React, {Component} from 'react';
import {ImageBackground, StyleSheet,TextInput, Button,  View, Text} from 'react-native';

export default class HomeScreen extends Component {

  static navigationOptions ={
    title: "HomeScreen"
  };

  constructor(props)
  {
    super(props);
    this.state = {
        login : false

    }
  }

  ConfirmLogin =  () =>
  {

    const {navigate} = this.props.navigation;
    this.setState({login : true});
    console.log("Confirm Login");

    if (this.state.login == true)
    {
      console.log("State is set");
      navigate('Page2');
    }
  }

  render()
  {



          return (


            <View style={styles.container}>
            <Text style = {styles.companyName}> HomeScreen </Text>



                    <View style = {styles.InputContainer}>

                        <TextInput style = {styles.login}
                            underlineColorAndroid = "black"
                            placeholder = "username"
                            autoCapitalize = "none"
                            autoCapitalize = "none"
                            placeholderTextWeight = "bold"
                        />
                        <TextInput style = {styles.login}
                            underlineColorAndroid = "black"
                            placeholder = "password"
                            autoCapitalize = "none"
                            secureTextEntry = {true}

                        />

                        <Button
                            onPress = {this.ConfirmLogin}
                            title = "Submit"
                            color = "blue"
                         />
                    </View>




            </View>



          );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#87CEEB',
        flexDirection: 'column',

    },

    image: {
        flex: 1,
        resizeMode: 'cover',
        justifyContent: 'center',
    },
    companyName: {
        color : 'grey',
        fontSize : 50,
        justifyContent : 'center',
        fontWeight : 'bold'
    },

    InputContainer: {
        height : 120,
        width : 320,
        backgroundColor : 'rgba(0,0,0,0)',
        color : 'white'
    }

})

Page2.JS

import React, {Component} from 'react';
import {StyleSheet,Button, View, Text} from 'react-native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {DrawerNavigator, createAppContainer} from 'react-navigation';
import {NavigationContainer} from '@react-navigation/native';
import HomeScreen from './HomeScreen';
import Page3 from './Page3';
import Page4 from './Page4';
import DrawerNavigation from './Navigation';



export default class Page2 extends Component{

    render()
    {

        return(


            <View style={styles.container}>
                <DrawerNavigation/>
            </View>






        );
    }

}

const styles = StyleSheet.create({

container: {
            flex: 1,
            backgroundColor: 'yellow',
            flexDirection: 'column',

        },

})

Page3.js

import React, {Component} from 'react';
import {StyleSheet, TextInput, Text, View} from 'react-native';
import {Icon, Container, Header, Content} from 'native-base';

export default class Page3 extends Component
{

    render()
    {
        return(

            <View style = {styles.container}>
                    <Text> Search Parts </Text>

            </View>


        );
    }

}

const styles = StyleSheet.create ({
    container: {
            flex: 1,
            backgroundColor: 'red',
            flexDirection: 'column',

        },
        input: {
            margin: 15,
            height: 40,
            borderColor: '#7a42f4',
            borderWidth: 1
        }


});

Page4.js

import React, {Component} from 'react';
import {StyleSheet, TextInput, Text, View} from 'react-native';
import {Icon, Container, Header, Content} from 'native-base';

export default class Page4 extends Component
{

    render()
    {
        return(

            <View style = {styles.container}>
                    <Text> Add Product Screen </Text>

            </View>


        );
    }

}

const styles = StyleSheet.create ({
    container: {
            flex: 1,
            backgroundColor: 'green',
            flexDirection: 'column',

        },
        input: {
            margin: 15,
            height: 40,
            borderColor: '#7a42f4',
            borderWidth: 1
        }


});

Navigation.js

import React, {Component} from 'react';
import HomeScreen from './HomeScreen';
import Page3 from './Page3';
import Page4 from './Page4';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';

const drawer = createDrawerNavigator();

function DrawerNavigation(){

    return(
        <NavigationContainer>
            <drawer.Navigator>
                <drawer.Screen name='Page 3' component={Page3}/>
                <drawer.Screen name="Page 4" component={Page4}/>
            </drawer.Navigator>
        </NavigationContainer>
    );

}

export default DrawerNavigation

Answer 1

The reason you are not able to display Page2 is you are directly loading your Navigator in Page2

   <View style={styles.container}>
                <DrawerNavigation/>
            </View>

When you are doing this it will navigate to the first screen in your drawer navigator that is Page3 that's the reason you are not able to see the yellow screen. If you really want to show your yellow screen create another screen in stack navigator like this:

Page5: {screen: Page5},

You need to include your DrawerNavigation in page5 like you are doing in page2 and include a button from page2 to navigate to page5.Than you will able to see the yellow screen.

Hope this helps!