79214779

Date: 2024-11-22 11:23:05
Score: 0.5
Natty:
Report link

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]);
Reasons:
  • Long answer (-0.5):
  • Has code block (-0.5):
  • User mentioned (1): @BeHappy'sseems
  • Low reputation (0.5):
Posted by: Marcel