CODEWITHSUNDEEP
androidreact-native
Ian
Ian

Reputation: 13842

react-native navigator not updating scene

I'm trying to get navigating working with react-native. I am testing it with 2 pages (HomePage & OtherPage) and want HomePage to be able to nav to OtherPage when I submit some text.

My basic navigator index.android.js file...

class MyApp extends Component {

  _renderScene = function(route, nav) {
    switch (route.index) {
          case 'HomePage':
            console.log('homepage nav')
            return <HomePage navigator={nav} />
          case 'OtherPage':
            console.log('otherpagenav')
            return <OtherPage navigator={nav} />
    }
  }


  render() {
    return (
      <Navigator
        initialRoute={{ title: 'My Initial Scene', index: 'HomePage' }}
        renderScene={ (route, nav) => { return this._renderScene(route, nav) } }
      />
    )
  }
}

Both pages HomePage and OtherPage work if I set them manually via the index and initialRoute. 

initialRoute={{ title: 'My Initial Scene', index: 'HomePage' }}

or

initialRoute={{ title: 'My Initial Scene', index: 'OtherPage' }}

My HomePage.js file which is loaded fine, looks like...

class HomePage extends Component {
  constructor(props) {
    super(props);
  }

  _onSubmit() {
    console.log( 'submit2', this);
    this.props.navigator.push({
            title: "Other Page",
            index: 'OtherPage',
            component: OtherPage,
            passProps: { testprop: 'someuser'},
        });
  }


  render() {
    return (
      <View>
        <Text>Current Scene: {this.props.title}</Text>
        <TextInput
          onChangeText = {( keywords ) => this.setState({ keywords })}
          defaultValue = 'Type a keyword'
          onSubmitEditing = { this._onSubmit.bind( this ) }
        />
      </View>
    )
  }
}

My Test OtherPage is just 

class OtherPage extends Component {
  constructor( props ) {
    super( props );
  }

  componentDidMount() {
    console.log( 'otherpage component mounted');
  }

  render() {
    return (
     <View><Text>Other Page</Text>
     </View>
    );
  }
}

When I enter some text and submit. I see the submit console.log from _onSubmit() So I know the navigator is getting called ok.

I also see 'otherpage component mounted'.

So everything looks ok log wise, but I don't see the scene/page updated, all I see is the updated console.logs.

Is there something I need to do to force it to update the scene, or shouldn't it happen automatically with the navigator push ? (I'm also a little unsure of the need for navigator component, as I've seen it in some example, but not really referenced anywhere).

Upvotes: 1

Views: 174

Answers (1)

Ian
Ian

Reputation: 13842

Looks like there was something odd with the avd. I ended up upgrading react-native to 0.39.2 (which I don't think made a difference, but including for completeness). Then I deleted the avd, created a mew one (target name Android 6.0 Platform 6.0 API 23 Intel Atom x86_64) selected delete all user data, and then it seems to work.

Wish I knew specifically why, so if anyone has a better answer, I will gladly accept.

Upvotes: 0

Related Questions