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

0
votes

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.

3
javascriptreact-nativereduxnavigationreact-navigation

3 Answers

2
votes

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!

0
votes

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.

0
votes

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!