CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Mendes
Mendes

Reputation: 18521

How to keep a common state between react-navigation components?

Consider a simple stack navigator using react-native navigator:

const stackNav = createStackNavigator(
  {
    CustomerList: {
      screen: CustomerList,
      navigationOptions: {
        title: "Select a customer"
      }
    },
    CustomerDetail: {
      screen: CustomerDetail
    }
  },
  {
    navigationOptions: {
      headerStyle: {
        backgroundColor: colors.dark
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: "bold"
      }
    }
  }
);

export default stackNav;

CustomerDetail is called from within CustomerList using the navigation props.

Both CustomerList and CustomerDetail contains specific states, like position on the list the user clicked to open the details, selected item on list, detail depth, and so on.

What I've notice is that on every screen change from CustomerList to CustomerDetail the components are rerendering, calling componentWillMount. On that way, I loose all my previous states, what leads to loose the user context on the list and on the detail.

I need a way to store that states and I can think of 3 options:

a. Store then on React Context, and reload on `componentWillMount``

b. Store the states on AsyncStorage

c. Find a way to share a common state between CustomerDetail and `CustomerList``

(a) and (b) does not seen the case here, so my question is how to share a common state between 2 components on react navigatior. I'm pretty sure that should be simple, but I cannot realize how to do it.

Upvotes: 4

Views: 4547

Answers (2)

Asaf David
Asaf David

Reputation: 3297

An additional option is to pass params in your navigation action. The navigation.navigate method accepts a second param (object) which will be available in your next screen.

navigation.navigate('CustomerDetail', { someData: 'yo' })

Then in the CustomerDetail you can access it as follows:

this.props.navigation.state.params.someData

Or:

this.props.navigation.getParam(paramName, defaultValue)

Read this

Upvotes: 1

Henry
Henry

Reputation: 15732

If you want to share state between different components, there are two ways to go:

Option 1: Use a Parent Component

Use the closest common ancestor of you components to hold all the data you want in its state and then pass the data down via props. If you want these child components to be able to modify the data, have the parent pass down a callback function (or multiple) that updates the parent's state.

This is a simple a lightweight way to go.

Option 2: Use Redux

Redux can hold the whole state for your application and can be accessed and updated from any component you want.

This is the way you want to go if you'll be doing this with many different components or in many different ways. The downside is that it does take some effort to set up, so if this is the only time in your application that various components need to share state, then Redux is probably overkill, but if you have more or if things get more complicated, it's a good way to go.

Here are the docs on Redux: https://redux.js.org/ and specifically on usage with React: https://redux.js.org/basics/usagewithreact

Upvotes: 2

Related Questions