3

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>
      );
    } 
}
letter Q
  • 14,735
  • 33
  • 79
  • 118

1 Answers1

2

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).

Georgios
  • 4,764
  • 35
  • 48
  • what version of react and react-native do you have in you package.json? I can't get mine to build with "react": "15.0.2", "react-native": "0.26.3", "react-native-router-flux": "^3.35.0", with and without the ^ – letter Q Oct 03 '16 at 14:53
  • I'm using react 15.3.1, react-native 0.33.0, and react-native-router-flux ^3.35.0. I haven't tried it for iOS yet, only for Android. – Georgios Oct 03 '16 at 15:25
  • Any luck with this? – Georgios Oct 04 '16 at 00:05
  • Having a lot of trouble upgrading my react version to above 0.26 so can't even use the library right now :( – letter Q Oct 04 '16 at 15:17
  • Ok, if you manage to do upgrade and still doesn't work, let me know – Georgios Oct 04 '16 at 17:05