CODEWITHSUNDEEP
react-nativeorientationlandscapelandscape-portraitportrait
Kaushal Lalani
Kaushal Lalani

Reputation: 115

How to lock Orientation for a particular screen in ios in react native?

I want to lock the orientation of my camera screen.

<Stack.Screen name="Camera" component={Camera} options={{ headerShown:false,orientation:'landscape'}}/>

This works fine in android but does not work on ios devices. Is there a way to solve this problem?

Upvotes: 3

Views: 8388

Answers (3)

Marcel
Marcel

Reputation: 770

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]);

Upvotes: 0

BeHappy
BeHappy

Reputation: 3978

<Stack.Screen name="Camera" component={Camera} options={{ headerShown:false,orientation:'landscape'}}/>

It's now work on android and iOS.

Upvotes: 1

user9106403
user9106403

Reputation:

You can use below plugin for that https://www.npmjs.com/package/react-native-orientation-locker

Set up plugin and configure as mention in their doc and in react native side add below code which you want to Lock Screen portrait or landscape

import Orientation from 'react-native-orientation-locker';

useEffect(()=>{
   Orientation.lockToPortrait(); //this will lock the view to Portrait
   Orientation.lockToLandscape(); //this will lock the view to Landscape
})

EDIT

One more plugin is there you can set screen wise orientation https://www.npmjs.com/package/react-native-orientation In my one of the project this is also working . Hope your issue will be resolve on this.

Upvotes: 5

Related Questions