Not able to navigate to another screen react native IOS App-CodePudding

I have a React Native IOS App, where in I am getting undefined error when navigating to another page.

Below is the Navigator where I have declared 'Setting' screen.

FRNavigator.js

import React from 'react';
import { View,StyleSheet,SafeAreaView,Button,ScrollView,Text} from 'react-native';
import { createSwitchNavigator,createAppContainer } from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import MainPage from '../screens/FaceRecog/MainPage';
import UploadPage from '../screens/FaceRecog/UploadPage';
import { createDrawerNavigator,DrawerItems} from 'react-navigation-drawer';
import Icon from 'react-native-vector-icons/Ionicons';
import DownloadPage from '../screens/FaceRecog/DownloadPage';
import ForgotPasswordScreen from '../screens/UI/ForgotPasswordScreen';
import ImageBrowserScreen from '../screens/FaceRecog/ImageBrowserScreen';
import LoginScreen from '../screens/UI/LoginScreen';
import RegisterScreen from '../screens/UI/Register';
import AddDevicePage from '../screens/FaceRecog/AddDevicePage';
import LogoutComponent from '../components/FaceRecog/LogoutComponent'
import DrawerHeader from '../components/FaceRecog/DrawerHeader';
import CommunicateComponent from '../components/FaceRecog/CommunicateComponent';
import ManageDevice from '../screens/FaceRecog/ManageDevicePage';
import Register from '../screens/UI/Register';
import { Settings } from '../screens/FaceRecog/Settings';

 const AuthNavigator = createStackNavigator(
{
Login:
{
 screen:LoginScreen,
 navigationOptions: {
  headerShown: false,
}
},
SignUp:
{
 screen:Register,
},
ForgotPasswordPage:ForgotPasswordScreen
},
);

const MainPageNavigator = createStackNavigator({
Home:MainPage,
AddDevice:AddDevicePage,
Upload:UploadPage,
ImagePicker:ImageBrowserScreen,
ManageDev:ManageDevice
})
const DrawerNavigator = createDrawerNavigator(
{

Home:
{
  screen:MainPageNavigator,
  navigationOptions:{
    drawerIcon:(
      <Icon
      name='md-home-sharp' size={25}  color='grey'/>
    )
  }
},

Download:
{
  screen:DownloadPage,
  navigationOptions:{
    drawerIcon:(
      <Icon
      name='md-download'
      type='ionicons' size={25} color='grey'onPress={ () => {
     
    }}/>
  
    )
  }
},
Exit:
{
  screen:Register,
  navigationOptions:{
    drawerIcon:(
      <Icon
      name='exit-outline'
      type='ionicons' size={25} color='grey' onPress={ () => {    
    }}/>
    )
    }
    } 
    },
    {
     contentOptions:{
     activeTintColor: '#e91e63',
     }
     ,  contentComponent: props => 
   <ScrollView>
   <SafeAreaView style={{flex:1}} forceInset={{ top: 'always', horizontal: 'never', 
     height:180 }}>
    <View style={{width:'100%', backgroundColor: 'white', }}> 
      <DrawerHeader />
    </View>
    <DrawerItems {...props} />
    <LogoutComponent />
    <View
                    style={{
                    borderBottomColor: 'grey',
                    borderBottomWidth: 1

                }}/> 
                <View style={styles.communicateview}>
    <Text style={styles.communicatetext}>Communicate</Text>
    <CommunicateComponent />
    </View>
    </SafeAreaView>
   </ScrollView>,  
   },
   {
   Setting:Settings
   },
   );


  const MainNavigator = createSwitchNavigator({
  Auth: AuthNavigator,
  App:DrawerNavigator
  });

  const styles = StyleSheet.create({
  communicatetext:{
   fontWeight:'800',
   color:'grey'
  },
  communicateview:{
    top:'3%',
    left:'3%'
  }
  })

  export default createAppContainer(MainNavigator);

Below is the CommunicateComponent in the Drawer where I call props.navigation.navigate().

CommunicateComponent.js

import React from 'react';
import { Platform, TouchableOpacity, Alert, View, Text, StyleSheet ,ScrollView} from 
'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

export default class CommunicateComponent extends React.Component {
navigateTo = (routeName) => {
    this.props.navigation.navigate(routeName)
  }

render() {
return(
<View>
  <View>
    <View style={styles.iconview}>
      <Icon
  name='settings'
  type='ionicons' size={25}  color='grey'/>
    </View>
    <TouchableOpacity style={styles.logoutview} 
 onPress={this.navigateTo('Setting')}
  >
   <Text style={styles.settingstext}> Settings </Text></TouchableOpacity>
   </View>
   <View>
    <View style={styles.iconview}>
      <Icon
  name='md-heart-circle'
  type='ionicons' size={25}  color='grey'/>
    </View>
    <TouchableOpacity style={styles.logoutview} 
  >
   <Text style={styles.settingstext}> Rate Us </Text></TouchableOpacity>
   </View>
   <View>
    <View style={styles.iconview}>
      <Icon
  name='ios-share-social'
  type='ionicons' size={25}  color='grey'/>
    </View>
    <TouchableOpacity style={styles.logoutview} 
  >
   <Text style={styles.settingstext}> Share </Text></TouchableOpacity>
   </View>
   <View>
    <View style={styles.iconview}>
      <Icon
  name='information-circle'
  type='ionicons' size={25}  color='grey'/>
    </View>
    <TouchableOpacity style={styles.logoutview} 
  >
   <Text style={styles.settingstext}> About </Text></TouchableOpacity>
   </View>
</View>
)
}
}

const styles = StyleSheet.create({
iconview:{
   top:'30%',
   left:'3%'
},
logoutview:{
    left:'20%',
    bottom:'20%'
},
settingstext:{
  fontWeight:'bold'
}
})

When I click on 'Settings' button(Touchable Opacity) in the Drawer Navigator ,I want to close the Drawer and go to Settings Page, but I am getting the error below.

TypeError: undefined is not an object (evaluating '_this.props.navigation.navigate').

Can anyone tell where I am going wrong.Thanks in Advance.

CodePudding user response：

CommunicateComponent does not have access to navigation. You should pass it to enable any possible action. Change this:

contentComponent: {navigation} => <ScrollView>
<SafeAreaView style={{flex:1}} forceInset={{ top: 'always', horizontal: 'never', 
 height:180 }}>
  <View style={{width:'100%', backgroundColor: 'white', }}> 
    <DrawerHeader />
  </View>
  <DrawerItems {...props} />
  <LogoutComponent />
  <View
    style={{
    borderBottomColor: 'grey',
    borderBottomWidth: 1
  }}/> 
  <View style={styles.communicateview}>
    <Text style={styles.communicatetext}>Communicate</Text>
    <CommunicateComponent navigation={navigation} />
  </View>
</SafeAreaView>
</ScrollView>

CodePudding user response：

I changed the CommunicateComponent from class to functional component as below:

import React from 'react';
import { Platform, TouchableOpacity, Alert, View, Text, StyleSheet 
,ScrollView} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {withNavigation} from 'react-navigation';

const CommunicateComponent = (props)=>{
return(
<View>
<View>
  <View style={styles.iconview}>
    <Icon
name='settings'
type='ionicons' size={25}  color='grey'onPress={ () => {
 
   }}/>
  </View>
  <TouchableOpacity style={styles.logoutview} 
  onPress={ ()=>props.navigation.navigate({routeName:'Setting'})}
>
 <Text style={styles.settingstext}> Settings </Text></TouchableOpacity>
 </View>
 <View>
  <View style={styles.iconview}>
    <Icon
name='md-heart-circle'
type='ionicons' size={25}  color='grey'onPress={ () => {
 
   }}/>
  </View>
  <TouchableOpacity style={styles.logoutview} 
>
 <Text style={styles.settingstext}> Rate Us </Text></TouchableOpacity>
 </View>
 <View>
  <View style={styles.iconview}>
    <Icon
name='ios-share-social'
type='ionicons' size={25}  color='grey'/>
  </View>
  <TouchableOpacity style={styles.logoutview} 
>
 <Text style={styles.settingstext}> Share </Text></TouchableOpacity>
 </View>
 <View>
  <View style={styles.iconview}>
    <Icon
name='information-circle'
type='ionicons' size={25}  color='grey'onPress={ () => {
   }}/>
  </View>
  <TouchableOpacity style={styles.logoutview} 
>
 <Text style={styles.settingstext}> About </Text></TouchableOpacity>
 </View>
</View>
 )
 }

const styles = StyleSheet.create({
iconview:{
   top:'30%',
   left:'3%'
},
logoutview:{
    left:'20%',
    bottom:'20%'
},
settingstext:{
  fontWeight:'bold'
}
})

export default withNavigation(CommunicateComponent);

And I used {withNavigation} from react-navigation and it takes to the specified screen.