How to refresh the previous screen when I goBack()

Question

I'm new to react-native. Now I need to implement a function in two screens. When I click a bottom in the "addActivity" scene, it will go back to the "homeScene" which is the previous scene of "addActivity" and show the data from "addActivity" scene.

I try to store the data in "addActivity" scene by a map:

export const m = new Map();

And import the map in homeScene scene

import { m } from './addActivity';

I'm not sure this way is good. I saw there are some functions of react-native-navigation can pass parameters but I don't know how to use them. Now the biggest is how to refresh the "homeScene" scene when I use goBack() from "addActivity" scene. There is the code of the two scenes

homeScene.js

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    TextInput,
    View,
    TouchableOpacity,
    Dimensions
} from 'react-native';

import { m } from './addActivity';


export default class LeftSideMenu extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isOpen: false,
        }

    add = () => {
        const { navigate } = this.props.navigation;  
        navigate('Add');  
    }

render() {
        return (

                <View style={styles.container}>
                    //I want to show the data here
                    <Text
                        style={styles.btText2}>{m.get("title")}</Text>

                    //This is the bottom to jump to "addActivity" scene
                    <TouchableOpacity
                        onPress={this.add} 
                        style={styles.Addbutton}>
                        <Text
                            style={styles.btText2}>+</Text>
                    </TouchableOpacity>
                </View>

        );

    }
}

addActivity.js

import React, { Component } from 'react';
import { View, ScrollView, Dimensions, StyleSheet, Text, Button, TouchableOpacity, Alert } from 'react-native';

import { NavigationPage, ListRow, Input, Select, Label } from 'teaset';

let { height, width } = Dimensions.get('window');

//initial the map
export const m = new Map();

export default class InputExample extends Component {


  constructor(props) {
    super(props);
    this.state = {
      length: 0,
      title: '',
      isVisible: false,
    };
    Object.assign(this.state, {
      valueTitle: null,
    });
  }


//Return  to homeScene
  homeScene = () => {
    m.set("title", this.valueTitle);
    const { goBack } = this.props.navigation; 
    Alert.alert("Add succeed","return to Homepage",[{text: 'confirm', onPress: () => { goBack(); }}]) 

  }

  render() {
    return (
      <ScrollView style={{ flex: 1 }}>

        <ListRow title='Title *' detail={
          <Input
            style={{ width: 200 }}
            size='md'
            value={this.state.valueMD}
            placeholder=''
            onChangeText={text => this.setState({ valueTitle: text })}
          />
        } topSeparator='full' />

        <TouchableOpacity
          onPress={this.homeScene} 
          style={styles.button}>
          <Text
            style={styles.btText}>Confirm</Text>
        </TouchableOpacity>

      </ScrollView>
    );
  }
}

I expect when I use goBack() to the homeScene the scene can refresh and the data from addActivity scene can be printed on homeScene

Answer 1

In order to refresh the previous screen on back, you can use this code in the screen on which you want to update the component states on returning back from some screen

componentDidMount()
     this.getMoviesFromApiAsync()
     this.props.navigation.addListener('willFocus',this._handleStateChange);

    }

   _handleStateChange = state => {
   alert('Refreshed successfully!')
   this.getMoviesFromApiAsync()
 };

where getMoviesFromApiAsync() is the method containing the code for the API call.

OR You can use Redux to achieve the same.