Navigation iOS in React Native

Question

I've looked at many different Stack Overflow posts about how to navigate screens in React Native but none of them seem to be working, perhaps because those posts were for older versions of React Native. Here is my code with the irrelevant parts taken out below. I'm trying to navigate from this screen to another screen called SubTasks. I made sure to say export default class SubTasks extends React.Component in SubTasks.js, by the way. The error I'm getting when I click on the button is "undefined is not an object (evaluating this.props.navigator.push'). Does anyone know where my error may be?

    import React, { Component, PropTypes } from 'react';
    import { StyleSheet,NavigatorIOS, Text, TextInput, View, Button} 
             from 'react-native';
    import SubTasks from './SubTasks';

    export default class App extends React.Component {
      constructor(props) {
        super(props);
      }                                                        
      renderScene(route, navigator) {
         if(route.name == 'SubTasks') {
           return <SubTasks navigator = {navigator} />
         }
      }

      _navigate() {
        this.props.navigator.push({
          title: 'SubTasks',
        })
      }

      render() {
        return (
          <View>
            <NavigatorIOS
              initialRoute= {{ 
                title: 'SubTasks',
                component: SubTasks,
              }} 
              style = {{ flex: 1 }}                                          
            />                                 
            <Button 
              title= 'SubTasks'
              style = {{flexDirection: 'row', fontSize: 20, alignItems: 'flex-end'}}
              color = 'blue'
              onPress= {() => this._navigate()}>
              styleDisabled = {{color: 'red'}}
            </Button>
          </View>                                                              
      )}                                                                       
   }

dotcomXY · Accepted Answer · 2017-08-08 02:25:29Z

1

Make sure you bind your _navigate function in your constructor:

constructor(props) {
  super(props);
  this._navigate = this._navigate.bind(this);
}

Or consider using arrow function

_navigate = () => {
  this.props.navigator.push({
    title: 'SubTasks',
  })
}

edited Aug 8, 2017 at 2:25

answered Aug 8, 2017 at 2:12

dotcomXY

1,5961 gold badge16 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sukhpreet Pabla Over a year ago

Thank you! Unfortunately, after fixing that clicking the button that is supposed to take me to the SubTasks screen doesn't do anything. Kinda flustered because I can't figure out what's wrong.

dotcomXY Over a year ago

@SukhpreetPabla Check out this link: facebook.github.io/react-native/docs/…, right now you are pushing a js object with only title key value pair, you will need to add the component key with SubTasks.

dotcomXY Over a year ago

@SukhpreetPabla Can you accept and upvote the answer?

Sukhpreet Pabla Over a year ago

I already did, but I don't have 15 reputation yet (just made my acct recently) so my vote doesn't "change the publicly displayed post score." Sorry.

Sukhpreet Pabla Over a year ago

Also, correct me if I'm wrong but I'm assuming (since I haven't done the backend yet) that if I used the first button to navigate to Subtasks, wrote/saved some data, and then went back and navigated with the second button, that data from before would still be there? If so, Is there a way for each button to navigate to a different "version" of the same screen? For example, could each button go to its own version of Subtasks.js, or would I have to make Subtasks1.js, Subtasks2.js, Subtasks3.js, etc.? If the former isn't possible, I'd need a fixed number of nav buttons,plus a lot of memory wasted.

Collectives™ on Stack Overflow

Navigation iOS in React Native

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related