React native navigation (undefined is not an object .. this.props.navigation.navigate

Question

I have a trouble regarding this issue on react native navigation by the way I am using redux.

Listserviceaction.js

contains webservicecall component is being imported here import ListComponent from '../components/ListComponent';

Listactiontype.js

contains action ActionTypes export const SERVICE_PENDING = 'service_pending' and etc.

listcomponent.js

the component, renders data on a list etc

reducers

and then the reducer Part

scenes/List.js

store binding will be done within the initial point of the application and passed down to the other application components as shown below.

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import store from '../reducers/index';
import ServiceAction from '../actions/listserviceaction';
import { Container, Content, Picker, Button, Text } from "native-base";

    export default class RenderList extends Component {
        render() {
            return (
                <Provider store={store}>
                    <ServiceAction />
                </Provider>
            );
        }

}

now after the component is being loaded and when i click onPress={() => this.props.navigation.navigate("ProfileScreen")} on my listcomponent it fires an error (undefined is not an object .. this.props.navigation.navigate) any problem ? any better solution? Thank You.

Answer 1

Include on your ServiceAction the this.props.navigation something like this:

<ServiceAction navigation={this.props.navigation}/>

because the props.navigation are by default on your parent component

and on ServiceAction component you will access to navition like:

..
goToSignUp() {
   this.props.navigation.navigate('SignUp');
}
..

For me also was confusing before. Cheers!

Answer 2

for navigating from one screen to other, both the screens should be in StackNavigator . Can you please show your stacknavigator and code of the screens you are trying to navigate between.

Answer 3

for using react navigation you must do this steps:

1: npm i react-navigation --save 2: npm link react-navigation 3: modify a top level class for your stack like this :

import page_1 from 'YOUR_PAGE1_PATH'
import page_2 from 'YOUR_PAGE2_PATH'
import { createStackNavigator } from 'react-navigation'

export default createStackNavigator({
      p1 : page_1 //remember the first modified shown first
      p2 : page_2
})

then in page_1 if you want to navigate to page 2 :

onPress(()=> this.props.navigation.navigate('p2' , 'maybe other params'))

Note : you must call p1,p2 instead of page_1 or page_2!