React native orientation is not working || locking on IOS

user_15182846 0
Viewed 4240

I created an app with React-native. All pages I made are designed for portrait mode except 1 page. The page accessibility comes from a button onPress then navigates to the page, so I can't lock orientation on Xcode

I installed this package and I can run it on android perfectly

import Orientation from 'react-native-orientation';

When I tried it on IOS simulator on every page it can turns orientation to landscape.

I put this line in every pages componentdidmount but nothing changes.

componentDidMount() {
   

    Orientation.lockToPortrait()
...
}

What should I do?

react-native orientation ios
1 Answers

Hey again @masterAvatarr,

I believe that this is what you're looking for, if you need something else please explain it to me :) We can make it happen.

I made a simple example for you.

https://github.com/WrathChaos/react-native-portrait-locker-example

I use React Native Orientation Locker Library

The important parts are:

  • Make sure that you linked the library manually (check AppDelegate.m)
  • You need to make a logic for unlocking and lock the portrait mode depends on your use-case

Please take a look at HomeScreen and DetailScreen


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


React.useEffect(() => {
    const unsubscribe = navigation.addListener("focus", () => {
      // The screen is focused
      // Call any action
      Orientation.unlockAllOrientations();
      Orientation.lockToPortrait();
    });

    // Return the function to unsubscribe from the event so it gets removed on unmount
    return unsubscribe;
  }, [navigation]);

Note: There is a little GIF Demo on the Github Repo

user_22470550
Related