How do you set state when navigating with TouchableOpacity react native

Question

I am using a TouchableOpacity and when I press it I want to set some state and then pass that state down as a prop when I navigate. However when I try it navigates before the state is updated. Here is my code:

import {TouchableOpacity} from 'react-native-gesture-handler';

type props = {
    route: any,
}

const Identity = ({route}: props) => {
    const [identity, setIdentity] = useState('')

    const navigation = useNavigation();

    const {name, date} = (route.params)

    const [loaded] = useFonts({
        Poppins_600SemiBold,
    });

    if (!loaded) {
        return null;
    }

    return (
        <SafeAreaView style={styles.container}>
            <PageIndicator currentPosition={2}/>
            <View>
                <Text style={{
                    marginTop: 100,
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontFamily: 'Poppins_600SemiBold',
                    fontSize: 30,
                    paddingLeft: 30
                }}
                >
                    What's your gender?
                </Text>
                <View style={styles.row}>
                    <TouchableOpacity
                        style={styles.button}

                        onPress={() => {
                            setIdentity('Man');
                            navigation.addListener('focus', () => {
                                setIdentity('Man')
                            });
                            navigation.navigate('InterestedIn', {
                                name,
                                date,
                                identity
                            });
                        }}
                    >
                        <Text style={{
                            color: '#fc92c5',
                            fontFamily: 'Poppins_600SemiBold',
                            fontSize: 15,

                        }}
                        >
                            Man
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => {
                            setIdentity('Woman')
                            navigation.navigate('InterestedIn', {
                                name,
                                date,
                                identity
                            })
                        }}
                    >
                        <Text style={{
                            color: '#fc92c5',
                            fontFamily: 'Poppins_600SemiBold',
                            fontSize: 15,
                        }}
                        >
                            Woman
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => {
                            setIdentity('Other')
                            navigation.navigate('InterestedIn', {
                                name,
                                date,
                                identity
                            })
                        }}
                    >
                        <Text style={{
                            color: '#fc92c5',
                            fontFamily: 'Poppins_600SemiBold',
                            fontSize: 15,
                        }}
                        >
                            Other
                        </Text>
                    </TouchableOpacity>
                </View>
            </View>
        </SafeAreaView>
    );
}

export default Identity;

Here is where my code navigates to:

import React, {useState} from "react";
import {SafeAreaView, StyleSheet, Text, View} from "react-native";
import {useNavigation} from "@react-navigation/native";
import {useFonts} from 'expo-font';
import {Poppins_600SemiBold} from '@expo-google-fonts/poppins';
import {TouchableOpacity} from 'react-native-gesture-handler';
import PageIndicator from './PageIndicator';

type props = {
    route: any,
}

const InterestedIn = ({route}: props) => {
    const [interest, setInterest] = useState('')

    const navigation = useNavigation();

    const {name, date, identity} = (route.params)

   // console.log(name)
   // console.log(date)
    console.log("identity", identity)
    console.log(route.params)

    const [loaded] = useFonts({
        Poppins_600SemiBold,
    });

    if (!loaded) {
        return null;
    }

    return (
        <SafeAreaView style={styles.container}>
            <PageIndicator currentPosition={3}/>
            <View>
                <Text style={{
                    marginTop: 100,
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontFamily: 'Poppins_600SemiBold',
                    fontSize: 30,
                    paddingLeft: 30
                }}
                >
                    Who do you want to date?
                </Text>
                <View style={styles.row}>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => {
                            navigation.navigate('navigator')
                            setInterest('Men')
                        }}
                    >
                        <Text style={{
                            color: '#FFF',
                            fontFamily: 'Poppins_600SemiBold',
                            fontSize: 15,

                        }}
                        >
                            Men
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => {
                            navigation.navigate('navigator')
                            setInterest('Women')
                        }}
                    >
                        <Text style={{
                            color: '#FFF',
                            fontFamily: 'Poppins_600SemiBold',
                            fontSize: 15,
                        }}
                        >
                            Women
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => {
                            navigation.navigate('navigator')
                            setInterest('Everyone')
                        }}
                    >
                        <Text style={{
                            color: '#FFF',
                            fontFamily: 'Poppins_600SemiBold',
                            fontSize: 15,
                        }}
                        >
                            Everyone
                        </Text>
                    </TouchableOpacity>
                </View>
            </View>
        </SafeAreaView>
    );
}

export default InterestedIn;

And here is the console log:

    identity
Object {
  "date": 2002-04-03T23:00:00.000Z,
  "identity": "",
  "name": "Ol",
}

I tried to add an event listener to the navigation but that didnt work. Do you have any suggestions, or maybe better ways to give text to a touchable opacity rather than this way? thanks:)

Answer 1

It actually navigates after the state is updated, but it happens so fast that you can't see it.

setIdentity('Man');

setTimeout(() => navigation.navigate('InterestedIn', {
  name,
  date,
  identity
}), 1000)

if you try something like this you'll see that the state gets updated.

Answer 2

You might use useEffect , based on the ( documentation , that would look like this:

useEffect(() => {
    if (identity) {
        navigation.navigate('InterestedIn', {
             name,
             date,
             identity
        });
    }
});