How to Communicate with Components in React Navigation

The Goal

Recently I have created a small mobile app with the React Hooks. The app is basically for a three-step enquiry form. We have used the useState() hook to collect the input. We will use three screens i.e. Home Screen, Profile Screen, and the Confirmation Screen. The Home Screen contains the two-child screens Profile and Confirmation. The Profile Screen is basically to enter the profile data like name, email, and phone. And the Confirmation Screen is to display the Profile Screen data before submitting it.

Table of content

• Start with Home Screen ( Parent Component )
• Move to Profile Screen ( Child Component )
• Move to Confirmation Screen ( Child Component )

Let’s Start with Home Screen

The Home Screen goal is to collect the data from Child Component i.e. Profile Screen and pass the profile data to another Child Component i.e. the Confirmation Screen.

Let’s just set the default data to our Child Component with the help of the useState() hook.

const HomeScreen = ({ navigation }) => {

    const [defaultData, setDefaultData] = React.useState({
        name: "",
        email: "", 
        phone: ""
    });

    render (
        ...
        ...
    );
}    

export default HomeScreen;

We have used the React Navigation package to navigate one page to another. The same we have used in the Home Screen to navigate to the Profile Screen.

render (
    ...
    <TouchableHighlight 
        onPress={() => {
            navigation.navigate('Profile', {
                profileData: defaultData,
                onSaveEvent: setDefaultData
            });
        }}
        underlayColor="white">
        <View style={[styles.columnItem, {backgroundColor: '#66AE46'}]}>
            <Text style={styles.columnItemText}>Profile</Text>
        </View>
    </TouchableHighlight>
    ...
);

We have used navigation.navigate() to navigate to the Child component. The first parameter is for the screen name and the second parameter is to send properties to the desired component as we have used. We are sending the defaultData and setDefaultData event to the Profile Screen.

navigation.navigate('Profile', {
    profileData: defaultData,
    onSaveEvent: setDefaultData
});

Move to Profile Screen

The next step is to open the Profile Screen and access the set properties through the parent component.

const ProfileScreen = ({ navigation }) => {

    // Collect the properties parameters
    const { profileData, onSaveEvent } = navigation.state.params;

    // Set default data
    const [name, setName] = React.useState(profileData.name);
    const [email, setEmail] = React.useState(profileData.email);
    const [phone, setPhone] = React.useState(profileData.phone);

    render(
        ...
        ...
    );
};

As you can see, we have accessed the parent properties through the navigation.state.params. Next, we set the default data with the help of useState().

The same section will be used to update the profile data.

Now we have to use the onSaveEvent to send back the Profile Screen data to the Home Screen (Parent Component).

render(
    ...
        <FormButton 
            onPress={() => { 
                onSaveEvent({name, email, phone});
                navigation.goBack();
            }}>
            Save Profile
        </FormButton>
    ...
);

Move to Confirmation Screen

The next step is to send the profile data to the Confirmation Screen. As per the Home Screen and Profile Screen section, we have collected the child component data back to the parent component. And now time to share the child component ( Profile Screen ) data to another child component (Confirmation Screen).

Open the Home Screen file and start editing by adding the following codes.

render (
    ...
    <TouchableHighlight 
        onPress={() => {
            navigation.navigate('Profile', {
                profileData: defaultData,
                onSaveEvent: setDefaultData
            });
        }}
        underlayColor="white">
        <View style={[styles.columnItem, {backgroundColor: '#66AE46'}]}>
            <Text style={styles.columnItemText}>Profile</Text>
        </View>
    </TouchableHighlight>

    <TouchableHighlight 
        onPress={() => {
            navigation.navigate('Confirmation', {
                profileData: defaultData
            });
        }}
        underlayColor="white">
        <View style={[styles.columnItem, {backgroundColor: '#66AE46'}]}>
            <Text style={styles.columnItemText}>Submit</Text>
        </View>
    </TouchableHighlight>
    ...
);

Next, open the Confirmation Screen and access the parent component properties through navigation.state.params.

const ConfirmationScreen = ({ navigation }) => {

    // Collect the properties parameters
    const { profileData } = navigation.state.params;

    render(
        ...
        ...
    );
};

export default ConfirmationScreen;

Please feel free to contact, if you face any problem or have something that works better then the above codes.