Redux & NavigatorIOS does not update state in child views in react-native?

Question

How can I make redux update master and detail views contained inside a NavigatorIOS?

Both the Master and Detail views do not update:

MainView > TabBar > TabBarItem > NavigatorIOS > MasterMenu > Detail

Other TabBarItem's work great using redux. For example:

MainView > TabBar TabBarItem > ViewProfile

  <Icon.TabBarItem
  style={{borderColor:'red', borderWidth:0}}
  {...this.props}
  iconName="timeline"
  title="View"
  selected={this.state.selectedTab === 'viewTab'}
  onPress={() => {
    this.setState({
      selectedTab: 'viewTab',
      presses: this.state.presses + 1
    });
  }}>
  <ViewProfile {...this.props} />
  </Icon.TabBarItem>

This MainView > TabBar > TabBarItem > NavigatorIOS > MasterMenu > Detail does NOT update:

<Icon.TabBarItem
style={{borderColor:'red', borderWidth:0}}
title={'Menu'}
iconName="more-vert"
selected={this.state.selectedTab === 'moreTab'}
onPress={() => {
  this.setState({
    selectedTab: 'moreTab',
  });
}}>
<View style={ss.container}>
<NavigatorIOS
ref="nav"
style={ss.container}
{...this.props}
initialRoute={{
  title: 'Master Menu',
  component: MasterMenu,
  passProps: {
    ...this.props,
  },
}}
/>
</Icon.TabBarItem>

</TabBarIOS>

This is how I connect and pass props to MainView that contains the NaigatorIOS > MasterMenu > Detail

File: mainApp.js

class MainApp extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    console.log('****** MainApp::render ****');
    const { state, actions } = this.props;
    return (
      <MainView
        {...this.props} />
    );
  }
}

// mapStateToProps
function mapStoreStateToComponentProps(state) {
  return {
    state: state.appState,
  };
}
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Object.assign({}, appActions), dispatch),
  }
}
export default connect(
  mapStoreStateToComponentProps,
  mapDispatchToProps
)(MainApp)

I can drill down into a NavigatorIOS containing a MasterMenu->DetailMenu view, call an action in the detail view, the state changes and all other views in TabBarIOS update. However, the redux state in both the master and detail views contained inside the <NavigatorIOS> retain their original values.

Is passProps not the way to do it?

Or is there other listen or subscribe methods that a master and child view can use to update when data store state changes?

Answer 1

Known issue with NavigatorIOS

NavigatorIOS does not rerender a scene, when passProps changed.

Bypass by connecting redux at a lower point in the hierarchy

You could bypass this issue by connecting your component MasterMenu with redux, instead of MainView.