Search code examples
react-nativestorenavigator-ios

In React Native how to pass store to Component when using NavigatorIOS?


So originally my app was giving the store to the component fine in index.ios.js like so:

class Laybium extends Component {
  render() {
    return (
      <Provider store={store}>
        <AudioPlayerPage />
      </Provider>
    );
  }
}

However I wanted to add some more screens so I used NavigatorIOS like so:

class Laybium extends Component {
  render() {
    return (
      <Provider store={store}>
        <NavigatorIOS
          initialRoute={{ 
            component: Screen1,
            title: 'Screen 1: Pick username'
          }}
          style={{flex: 1}}
        />
      </Provider>
    );
  }
}

Which allowed my app to go to -> Screen 1 -> Screen 2 -> Screen 3 -> AudioPlayerPage(original Screen I displayed).

The transitions from Screen 1 -> 2 -> 3 work fine. But now I don't know how to provide the store and props to my Component AudioPlayerPage? Since wrapping the NavigatorIOS component within the Provider component doesn't seem to be working.

Here is my Screen3.js that transitions to my component AudioPlayerPage

class Screen3 extends Component {
    static propTypes = {
      navigator: PropTypes.object.isRequired
    }

    constructor(props, context) {
      super(props, context);
      this._onForward = this._onForward.bind(this);
    } 

    _onForward() {
      this.props.navigator.push({
        component: AudioPlayerPage,
        title: 'AudioPlayer: play synced song'
        // TODO: pass store
      });
    }

    render() {
        return (
          <View style={styles.container}>
            <Text style={styles.text}>Screen3</Text>

            <TouchableHighlight style={styles.button}
                onPress={this._onForward}
                underlayColor='#99d9f4'>
              <Text style={styles.buttonText}>Go to AudioPlayerPage</Text>
            </TouchableHighlight>
          </View>
      );
    } 
}

Solution

  • I haven't used NavigatorIOS myself, but using react-native-router-flux, I call dispatch from my components like this: this.props.dispatch(someAction()). As for the state of the store, I access it via the mapStateToProps callbacks. To receive the callback, a component should first be connected using the connect(mapStateToProps)(ComponentName).