react-navigation how to navigate from customDrawer navigation

Question

I am using createDrawerNavigator and inside this I made a custom profile view. When I press navigate I want to move to another screen.

But this give me an error undefined is not an object (evaluating"_this.props.navigation") . Other components one , two , three works fine.

This is my code:

export default class App extends Component {
  render() {

    return (
      <View style={{flex:1, marginTop:30}}>
        <AppContainer/>
      </View>
    );
  }
}

    const CustomDrawerContentComponent = (props)=> {
      return(
      <SafeAreaView style={{flex:1}}>
        <View style={{ height:100, backgroundColor: '#9FA8DA' }}>
          <Image
                style={{marginLeft:20,height:100,width:100,borderRadius:50}}
                source={require('./assets/puppy.jpg')}/>
        </View>

        <View style={{flexDirection:'row', margin:20, alignItems:'center'}}>
    //////here is where I get an error
        <TouchableOpacity
            style={{marginTop:0}}
            onPress={()=> {this.props.navigation.navigate('profile')}}>
          <Text style={{fontSize:18, fontWeight:'bold'}}>navigate</Text>
          <Image
                style={{height:12,width:12}}
                source={require('./assets/drawable-hdpi/ic_arrow_depth.png')}/>
        </TouchableOpacity>
        </View>
        <ScrollView>
          <DrawerItems {...props}/>
        </ScrollView>
      </SafeAreaView>
      )
    }

const AppDrawerNavigator = createDrawerNavigator({
    one: AppStackNavigator,
    two: BoardScreen,
    three: NotificationScreen,
  },{
    contentComponent:CustomDrawerContentComponent,
  })

const AppStackNavigator = createStackNavigator({
  profile: {
  screen: profileScreen,
  navigationOptions: {
      header: null
    },
  },
})

const StartSwitchNavigator = createSwitchNavigator(
    {
      App: AppDrawerNavigator,
    },
    {
      initialRouteName: 'App',
    }
  )

Answer 1

Your CustomDrawerContentComponent component is functional component. Use props.navigation directly instead of this.props