event when component is mounted before render React Native

August 19, 2023

I’m creating an React Native App with tab and stack navigation. Is there any solution to handle when its just navigated before render?

For example:

Chats.jsx
...
<Pressable
    onPress={() => props.navigate('Messages', { chatId: chat.id })}
                        ><Chats/>
                        </Pressable>
...

I click the button and jump to MessagesScreen.jsx screen.

MessagesScreen.jsx
...
//Some logic after navigation event. For example, I want to fetch data from a remote source and show at the screen.
...

>Solution :

Use focus event, something like this:

function MessagesScreen({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // TODO
    });

    return unsubscribe;
  }, [navigation]);

  return <... />;
}

See React Navigation lifecycle events for details.