How to use a navigation button inside a drawer?

Question

I have a button inside a custom drawer, however when trying to use a cross-screen navigation method on this button I get the following error: Error

I am using: "react-navigation": "^3.11.1", "react-native": "^0.60.4", "react": "16.8.6". I am debugging the application on an S8 + with Android 8.0

const DEVICE_WIDTH = Dimensions.get('window').width;
const CustomDrawerComponent = props => (
  <SafeAreaView style={{ flex: 1 }}>
    <ScrollView>
      <View style={{flexDirection:'row', backgroundColor:'#006bb3', height:100, flex:1, justifyContent:'center'}}> 
        <View style={{height:100,width:60, borderRadius:30,justifyContent:'center'}}>
          <Image source={require('../../assets/no-login.png')} style={{height:40,width:40, borderRadius:20}}></Image>
        </View>
        <View style={{justifyContent:'center', height:100}}>
          <Text style={{color:'white', fontSize:15, fontWeight:'700'}}>Acesse sua conta agora!</Text>
          <Text style={{color:'white', fontSize:14, fontWeight:'600', textDecorationLine:'underline'}}>Clique aqui!</Text>
        </View>
      </View>
      <DrawerItems {...props} />
      <TouchableOpacity 
        style={{height:50, justifyContent:'center'}}
        onPress={this.logout}
        >
        <View style={{marginBottom:0, flexDirection:'row'}}>
          <View style={{marginLeft:14}}>
            <Icon name='login-variant'type='MaterialCommunityIcons' style={{color:'grey' ,fontSize:25}}/>
          </View>
          <View style={{marginLeft:27}}>
            <Text style={{fontSize:15, fontWeight:'700', color:'grey'}}> Sair da Conta</Text>
          </View>
        </View>
      </TouchableOpacity>
    </ScrollView>
  </SafeAreaView>
);

const AppDrawerNavigator = createDrawerNavigator(
  {
    Home:{
      screen:HomeScreen,
      navigationOptions:{
      drawerLabel:'Home',
      drawerIcon: ({tintColor}) =>
       (<Icon name='home'type='FontAwesome' style={{color:tintColor, fontSize:25}}/>) 
    },
    },
    HomeLogin:{
      screen:HomeLogin,
      navigationOptions:{
        drawerLabel: () => null,
      },
    },
  Login:{
      screen:LoginScreen,
      navigationOptions:{
        drawerLabel: () => null
      } 
  },
  Register:{
    screen:RegisterScreen,
    navigationOptions:{
      drawerLabel: () => null
    },
    headerStyle:{
      backgroundColor:'#006bb3',
    },
    headerTitleStyle:{
      fontWeight:'bold',
    },
    title:'Cadastre-se!'
  },
  },  
  {
    drawerWidth: DEVICE_WIDTH*0.7,
    initialRouteName:'Home',
    contentComponent: CustomDrawerComponent,
    contentOptions:{
      activeTintColor:'#006bb3',
      labelStyle:{
        fontSize:14,   
      }, 
    }
  }
);
logout = () =>{
  this.props.navigation.navigate('Login')
}
const Menu = createAppContainer(AppDrawerNavigator);
//export default connect(mapStateToProps, mapDispatchToProps) (Menu)
export default Menu

I was hoping that clicking on the "Sair da conta" button would navigate to the 'Login' screen.

score 0 · Accepted Answer · answered Sep 01 '19 at 16:02

0

You didn't deliver props to the object. And you don't have to make a function in a simple command syntax.

onPress={() => this.props.navigation.navigate('Login')}
...
contentComponent: props => < CustomDrawerComponent {...props} />,

answered Sep 01 '19 at 16:02

hong developer

13,291
4
38
68

Thanks for your response! I did what I recommended, however, I have the following error: ```TypeError: undefined is not an object (evaluating '_this.props.navigation'``` – leandror Sep 01 '19 at 16:24
There is no need to pass a function to the `contentComponent` and spread props manually as the navigation props gets passed in automatically. So your error is telling you that this is not happening for some reason. Try logging your props to see what is getting passed – Travis James Sep 01 '19 at 22:32
@leandror Is the code in question the code on one screen? If you have one screen code, transfer your supply code to another file. – hong developer Sep 02 '19 at 01:59
Hi guys, thanks for the help! I found it better to use another method for login. I now have a page specified for the User Profile and here I have the option to sign out of the account. – leandror Sep 02 '19 at 12:48

How to use a navigation button inside a drawer?

1 Answers1