First be aware whether you use @react-navigation/stack
or @react-navigation/native-stack
(cf. this post to understand difference). Understandably, available options differ (check non-native types vs. native types)
If you use @react-navigation/native-stack
, @BeHappy's solution seems most elegant.
If not, like in my case, you might want to try react-native-orientation-locker, however, do not forget to follow instructions regarding the native files (.mm for iOS, Java/Kotlin for Android).
Also, do not forget to unlock view after locking it.
Here is what I did:
useEffect(() => {
return navigation.addListener('focus', () => {
Orientation.lockToPortrait();
});
}, [navigation]);
useEffect(() => {
return navigation.addListener('blur', () => {
Orientation.unlockAllOrientations();
});
}, [navigation]);