[NavigatorIOS] doesn't update when passProps update

[lazywei]

I'm not sure if this is a feature or a bug:

When I change the value of passProps of a navigator, I expect it would re-render again, just like other react components do. However, it seems it will not do so.

For example,

          <NavigatorIOS
            style={{flex: 1}}
            initialRoute={{
              component: MyChatList,
              title: "My Chat List",
              passProps: {
                recentChats: this.state.ChatListData.recentChats,
                renderRow: this.renderRecentChat,
              },
            }} />

When the state ChatListData (which comes from flux) updates, the navigator will not update it self correspondly.

[bakso]

I don't know

[ericvicenti]

initialRoute only specifies the initial scene in the navigator.

The reason we don't do this is we don't want to re-render all of the scenes every time you re-render NavigatorIOS. This would make the app very slow once you have several scenes open. If your props are changing, you can call navigator.replace(newRoute), or use event emitters to communicate to inner scenes.

Navigator handles this case a bit better. When you re-render, it will call renderScene again for the currently-visible scenes (unless you are mid-transition).

I'm still trying to figure out the ideal pattern for re-rendering internal scenes. Feedback and ideas are welcome!

[lazywei]

@ericvicenti Oh, I totally forgot I can use replace. I feel that is a little anti-react though. I mean, monitoring new props ourself. On the other hand, using event emitters is probably more like Flux, right? However, I'd personally prefer keep the states on the top-most components and let it pass props down, instead of let the navigator listen to the store directly.

For the Navigator, would it also be slow if I keep re-render (new props keep coming, for example)?

Thanks for your elaborating.

[mwilc0x]

I too ran into this when I first started writing a RN app.

Is there any way that calling setState can update props to any potential children on the same route like with React?

e.g.

  _buttonPress() {

    this.setState({
      input: 'heyo'
    })

  },

  render() {
    return (
      <View>
         <ChildComponent input={this.state.input} /> // input prop change will be heard by Child
      </View>
    )
  }

I understand that on mobile you're probably not building as complex UI Component structures for a given single route. I'm not sure what the benefits/trade-offs is/are here.

[ericvicenti]

@mjw56, That code should work, the input prop would be updated when setState is called. Are you having difficulties when putting ChildComponent inside a Navigator or NavigatorIOS?

@lazywei, I agree that it would be nicer to re-render the scene when the NavigatorIOS gets re-rendered. It would be great if somebody could implement Navigator's renderScene API for NavigatorIOS. That way the initial route would remain, but you could re-render the scene according to changing state outside the navigator.

When it comes to slowness from re-rendering in Navigator, it shouldn't be a problem because Navigator is careful to only re-render scenes that are visible. This would also be important to do if somebody adds the renderScene API to NavigatorIOS.

You might run into issues if you want to re-render aggressively, but you could always improve the shouldComponentUpdate logic in your scenes.

[ustun]

It also doesn't update when navigationBarHidden is changed, see #846

[mars]

Still an issue with React Native 0.6rc. Workaround is calling this.refs.navigator.replace(…) with the updated state in passProps.

[Iragne]

may be this PR can solved your issue ?
#1733

[edo1493]

@mars: It's a Workaround if you haven't got anything in NavigatorIOS. What if you have pushed several routes?

I am trying to use resetTo() in order to reset the whole thing every time new props come in. (http://stackoverflow.com/questions/31320583/invariant-violation-calling-pop-to-route-for-a-route-that-doesnt-exist)

Any idea?

[mars]

@edo1493 I ended up using the more manual but less limiting React.Navigator and …navigator.immediatelyResetRouteStack(). See Navigator docs

[edo1493]

@ericvicenti have you seen this? Thanks.

Thank you for reporting this issue and appreciate your patience. We've notified the core team for an update on this issue. We're looking for a response within the next 30 days or the issue may be closed.