CODEWITHSUNDEEP
react-nativereact-navigationexpo
vishnu
vishnu

Reputation: 233

recieving an error 'undefined is not an object evaluating this.props.navigation' while trying to navigate to another screen

returning this error while tying to navigate using switchnavigation.

i have tried removing this. props then returns undefined 'navigation'.

import React from 'react';
import { Text, View, Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { createSwitchNavigator, createAppContainer , withNavigation } from 'react-navigation';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import layout from '../../constants/LayoutStyle'
import QuoteScreen from './QuoteScreen';

 const HomeScreen = () => {

 return (
           <View style={styles.viewStyles}>
           <View style={{position: 'absolute',top: hp('50%')+wp('37.5%'),left:wp('15%'),width: wp('32.5%'),height: 
      wp('32.5%'),backgroundColor:'rgba(255,255,255,0.1)'}}>
            <View style={{alignItems: 'center',justifyContent: 'center',flex:1}}>
            <Icon name="ios-book" color="purple" size={wp('10%')}
              onPress={() => this.props.navigation.navigate('Quote')}
              />
            <Text style={styles.tabTextStyle}>Books</Text>
            </View>
  </View>

    );
 };

 const RootStack = createSwitchNavigator(
  {
     Home: HomeScreen,
     Quote: QuoteScreen,
   }
 );

  const AppContainer = createAppContainer(RootStack);

  export default class app extends React.Component {
    render() {
      return <AppContainer />
    }
  }

expected to complete navigation properly

Upvotes: 1

Views: 60

Answers (1)

Anand S
Anand S

Reputation: 820

HomeScreen is a functional component and hence you should not use this.props.navigation, just say props.navigation.

And If you want to use props inside the function component, then use should pass props as an argument to that functional component. Like this =>

 const HomeScreen = (props) => {
    return (
       <View style={styles.viewStyles}>
       <View style={{position: 'absolute',top: 
          hp('50%')+wp('37.5%'),left:wp('15%'),width: wp('32.5%'),height: 
  wp('32.5%'),backgroundColor:'rgba(255,255,255,0.1)'}}>
        <View style={{alignItems: 'center',justifyContent: 'center',flex:1}}>
        <Icon name="ios-book" color="purple" size={wp('10%')}
          onPress={() => this.props.navigation.navigate('Quote')}
          />
        <Text style={styles.tabTextStyle}>Books</Text>
        </View>
   </View>
   );
};

If this does not work then pass navigation as props to HomeScreen component wherever u use, Like this =>

<HomeScreen 
  navigation = {this.props.navigation} // or navigation = {props.navigation}, if it is functional component
/>

Upvotes: 2

Related Questions