I am trying to build a tiny notes app using React Native. The goal is to dynamically render the header of the note page based on the note’s status and to allow for note deletion. The delete button in the header should delete the note and then navigate back to the home screen. However, when I click the button, the app freezes (remaining on the opened note page forever). After restarting the server and reopening the app, I can see that the note I attempted to delete is indeed gone. Everything else is working fine so I suppose the issue is very likely to be with below code. I can’t understand why navigation.navigate does not work here. Could someone explain how this works under the hood?

useLayoutEffect(() => {
navigation.setOptions({
headerTitle: noteId ? “Edit Note” : “New Note”,
headerRight: () =>
noteId ? (
<Button
title=”Delete”
onPress={async () => {
await deleteNote(noteId)
navigation.navigate(“Home”);
}}
>
) : (
<></>
),
});
}, [navigation]);

Guessing it might be due to the async nature of the call back function, so I simplified the onPress callback function like this onPress={() => navigation.navigate(“Home”)}, the result is still the same