What is the way to go from Drawer Navigation Screen to a Screen out of Drawer navigation using button press in React-Native?

Question

I have created one navigation drawer named HomeDrawer and in this drawer I show two items - Home and Settings. for that reason I have created two classes- NoteMeHome and SettingsScreen .

Now, if I want to go from SettingsScreen to another class (LoginScreen.js) by button click, which is not part of the navigation drawer, then it is not working

Here, I have provided the necessary code to understand the problem.

HomeScreen.js

class HomeScreen extends React.Component {
  state = {
    getValue: null,
  }

  async componentDidMount() {
    const token = await AsyncStorage.getItem('token');
    this.setState({ getValue: token });
  }

  render() {
    console.log('#ZZZ:', this.state.getValue);
      return (
        <AppStackNavigator/>
      ); 
  }
}


const AppStackNavigator = new StackNavigator({
  HomeDrawer: {screen:HomeDrawer},
  WelcomeScreen: {screen:WelcomeScreen},
  LoginScreen: {screen:LoginScreen},
  NoteMeHome: {screen:NoteMeHome},
  SettingsScreen: {screen:SettingsScreen}
})

export default HomeScreen;

HomeDrawer.js

class HomeDrawer extends Component {

  state = {
    loading: true
  }

  static navigationOptions = {
    headerLeft: null
}

  componentDidMount() {
    AsyncStorage.getItem("user_email").then(value => {
     user_email = value;
    });

    AsyncStorage.getItem("user_first_name").then(value => {
     user_first_name = value;
    });

  }

  async componentWillMount() {
    await Font.loadAsync ({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
    });
    this.setState({loading:false});
  }

  render() {
    if(this.state.loading) {
      return(
        <Root>
          <AppLoading/>
        </Root>
      )
    }
    return(
      <MyApp/>
    )

  }
}

const CustomDrawerContentComponent = (props) => (

 <View style={{backgroundColor:"#ffff", height:'100%'}}>

      <ImageBackground source={require('../assets/header.jpeg')} style={{width: '100%', height: 150,  resizeMode:'cover', backgroundColor:"@aaaa"}}>  
      <Body style={styles.drawerBody}>
        <Image
          style={styles.drawerImage}
          source={{uri: 'https://img.icons8.com/ultraviolet/80/000000/administrator-male.png'}}
        />
        <View style={styles.drawerHeaderText}>
          <Text style={{color:'#ffffff', fontSize:20, fontWeight:'400'}}>{user_email}</Text>
          <Text style={{color:'#ffffff', fontSize:16, fontWeight:'200'}}>{user_first_name}</Text>
        </View>

      </Body>
      </ImageBackground>

    <Content style={{marginTop:30 }}>
      <DrawerItems {...props}/>
    </Content>

  </View>

);

const MyApp = DrawerNavigator({
  NoteMeHome:{
    screen: NoteMeHome
  },
  Settings:{
    screen: SettingsScreen
  },
},

{
  initialRouteName: 'NoteMeHome',
  drawerPosition: 'left',
  contentComponent: CustomDrawerContentComponent,
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoute: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle'
}

);

SettingsScreen.js

class SettingsScreen extends Component {
  static navigationOptions = ({navigation}) => ({
    title: "Settings",
    headerLeft: <Icon name="ios-menu" style={{paddingLeft:10}}
    onPress={()=>navigation.navigate('DrawerOpen')}/>,

    drawerIcon: 

    <Image source={{uri: 'https://img.icons8.com/ultraviolet/40/000000/automatic.png'}}
            style={styles.icon}
    />
  })

  render() {
    return(

      <Container>
        <CustomHeader
          title="Settings"
          drawerOpen={()=>this.props.navigation.navigate('DrawerOpen')}
        />
        <Content contentContainerStyle={{flex:1, alignItems:'center', 
        justifyContent:'center', padding:10}}>
        <Button full onPress={() => this.props.navigation.navigate('LoginScreen')}>
          <Text style={{color:'white'}}>Go To Home Screen</Text>
        </Button>
        </Content>
      </Container>
    )
  }
}

export default SettingsScreen;

Answer 1

** Check this example project enter link description here **

https://github.com/habeebrahmanpt/ReactNativeBoilerplate/blob/master/App/Navigation/AppNavigation.js

 // drawer stack  
 const DrawerStack = createDrawerNavigator({               
    HomeScreen: { screen: HomeScreen },     
     TestPage: { screen: TestPage }            
 }, {         
initialRouteName: 'HomeScreen',         
drawerWidth: Dimensions.get('window').width / 1.3,     
headerMode: 'none',         
drawerPosition: 'left',        
useNativeAnimations: false,       
drawerBackgroundColor: 'transparent' ,      
contentComponent: CounterApp,       
  })    


  const PrimaryNav = createStackNavigator({       
//   BottomStack: { screen: BottomStack },       
    DrawerStack: { screen: DrawerStack },       
   HomeScreen: { screen: HomeScreen },       
    CounterApp: { screen: CounterApp },       
   TestPage: { screen: TestPage },       
     Cart: { screen: Cart },       
      }, {       
    // Default config for all screens       
     headerMode: 'none',       
      title: 'HomeScreen',       
      initialRouteName: 'BottomStack'       
    })       

export default PrimaryNav

What is the way to go from Drawer Navigation Screen to a Screen out of Drawer navigation using button press in React-Native?

Question

1 answers

solution1
0 2019-04-03 06:40:14

What is the way to go from Drawer Navigation Screen to a Screen out of Drawer navigation using button press in React-Native?

Question

1 answers

solution1 0 2019-04-03 06:40:14

solution1
0 2019-04-03 06:40:14