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