How can I get data from one screen to another (currently using Stack Navigator)

Question

im trying to get the total calories to show up on a different screen. Currently I have a tracker.js screen that lets me press on items which changes the state of totalCalories, (also stored in async Storage) However I want this value to show on home page:

My tracker.js file:

constructor:

export default class Tracker extends React.Component {
  static navigationOptions = {
    title: "Tracker",
  };

  constructor(props) {
    super(props);
    this.getData();

    this.state = {
      isLoading: true,
      dataSource: null,
      show: false,
      totalCalories: 0,
    };
  }

The function I made to add the calories when the item is pressed:

fetchOnPressOpacity = async (item) => {
    // console.log(this.state.totalCalories);
    this.state.totalCalories += item.food.nutrients.ENERC_KCAL;
    try {
      this.setState({});
      await AsyncStorage.setItem(
        "totalCalories",
        JSON.stringify(this.state.totalCalories)
      );
    } catch (error) {
      console.log(error);
    }
  };



getData = async () => {
    try {
      const totalCalories = await AsyncStorage.getItem("totalCalories");
      const x = parseInt(totalCalories);
      if (totalCalories !== null) {
        this.setState({
          totalCalories: x,
        });
      }
    } catch (error) {}

};

The render method (has a lot of code not need for the question:

render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <Button title="clear" onPress={() => this.resetCalories()} />
        <Text>
          {" "}
          Total Calories: {console.log(this.state.totalCalories)}
          {this.state.totalCalories}
        </Text>
        <View style={styles.viewForInputContainer}>
          <TextInput
            onChangeText={(text) => this.setState({ item: text })}
            style={styles.textInputContainer}
            clearTextOnFocus={true}
          >
            <Text style={styles.textColour}> Search Food </Text>
          </TextInput>
        </View>

        <Button
          title="Search"
          onPress={() => this.fetchData(this.state.item)}
        />

        <View style={styles.ViewFilterContainer}>
          <TouchableOpacity style={styles.ViewFilterContainer}>
            <View style={styles.filterButtonView}>
              <Text style={styles.filterText}> Filter </Text>
            </View>
          </TouchableOpacity>
        </View>
        <View style={styles.paddingForResultsContainer}>
          <FlatList
            style={styles.resultsBackground}
            data={this.state.itemArray}
            renderItem={({ item, index }) => (
              <TouchableOpacity
                onPress={() => this.fetchOnPressOpacity(item, index)}
              >
                <View style={styles.resultsContainer}>
                  <View style={styles.textView}>
                    <Text style={styles.resultsText}>
                      {item.food.label}
                      {item.food.brand}
                      {index}
                    </Text>
                  </View>
                  <View style={styles.nutritionResultsText}>
                    <Text style={styles.resultsTextSubInfo}>
                      F: {Math.round(item.food.nutrients.FAT)}
                    </Text>
                    <Text style={styles.resultsTextSubInfo}>
                      C: {Math.round(item.food.nutrients.CHOCDF)}
                    </Text>
                    <Text style={styles.resultsTextSubInfo}>
                      P: {Math.round(item.food.nutrients.PROCNT)}
                    </Text>
                    <Text style={styles.resultsTextSubInfo}>
                      K/Cal: {Math.round(item.food.nutrients.ENERC_KCAL)}
                    </Text>
                  </View>
                </View>
              </TouchableOpacity>
            )}
          />
        </View>

So I've got a Home.js file where I want to display the total Calories however I cannot seem to pass the data into props etc.

Thank you in advanced,

Matt:)

Answer 1

The most right solution its use Redux for this task

Answer 2

Pass data to navigate like this:

const { navigation } = this.props;
navigation.navigate('YourNextScreen',
     {
       totalCalories: this.state.totalCalories
     });

on you next screen you can retrieve them like with

const { totalCalories } = this.props.route.params;

https://reactnavigation.org/docs/params/