CODEWITHSUNDEEP
iosstatereact-native
Hasen
Hasen

Reputation: 12314

React Native Global state

I have a state variable that is set on one of my pages but I want that state value to also be accessible on another page. Not quite sure how this is achieved.

For example on mainpage.ios.js

var MainPage = React.createClass({
  getInitialState: function() {
    return {
      value: 1
    };
  },

Then on otherpage.ios.js I want to update based on what that value was already set to on the previous page. The different pages are selected through Tab bar. So basically that value would be effectively global between all pages.

Upvotes: 3

Views: 5841

Answers (2)

Ryan McDermott
Ryan McDermott

Reputation: 6305

To get a shared global state between multiple components with React Native, you should take advantage of a Flux implementation. I personally prefer redux but you can use any which one you like. Here's an example of redux with React Native: https://github.com/alinz/example-react-native-redux

Upvotes: 4

Hasen
Hasen

Reputation: 12314

Never mind, I found out how to do it. For anyone who doesn't know, here is how I did it. As far as I can see, there is no global states, you just need to pass props to each page component.

So for mainpage.ios.js you require otherpage.ios.js:

 var OtherPage = require('./otherpage');

and then when you use the element you include pass props:

    <OtherPage value={2}/>

Or

    <OtherPage value={this.state.value}/>

Then on otherpage.ios.js you could then reference that variable as you wish using: this.props.value.

Upvotes: 2

Related Questions