Passing objects between react native tab navigator's screens

Question

I have a bottom tab-bar navigator and has 3 screens. In Menu screen, I am trying to pick a menu-item and in Cart-screen, which is 2nd route of tab navigator, show the selected menu item. Here is my tab-navigator

const MenuNavigator = createBottomTabNavigator(
  {
    Menu:MenuScreen,
    Cart:CartScreen,
    Options:OptionScreen
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Menu') {
          iconName = `ios-md-book${focused ? '' : '-outline'}`;
        } else if (routeName === 'Cart') {
          iconName = `ios-options${focused ? '' : '-outline'}`;
        }else if(routeName ==='Options'){
          iconName=`ios-options${focused? '' : '-outline'}`;
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return <Ionicons name={iconName} size={horizontal ? 20 : 25} color={tintColor} />;
    },
    }),tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
  }

  );

I have a menu-item object in a button's onPress function like this:

var menuitem={itemId:item.itemId,
                    name:item.name,
                    ingredients:item.ingredients,
                    price:item.price,
                    type:item.type};

and assigning it in the same onPress funttion to the MenuScreen's menuItem object.

this.setState({menuItem:Object.assign({},menuitem)});

And successfully rendering it in a modal which belongs to Menu-screen,but I want to render it in Cart-screen too.

But then how will I reach that object from the Cart Screen? the project has so many codes and screens so I only copied related parts.

Answer 1

You can use Redux to provide an overarching store across all Screens that you use to share data. If you are navigating across screens, you can also pass data by using

this.props.navigation.navigate("NewScreen", {data: dataToBePassed})

You can then retrieve the data by using

this.props.navigation.getParam("data", defaultValue)

You can learn more here.