react-native-orientation
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-native-orientation package

    3.1.3 • Public • Published

    React Native Orientation

    npm version

    Listen to device orientation changes in React Native applications and programmatically set preferred orientation on a per screen basis. Works on both Android and iOS.

    Installing

    npm install react-native-orientation --save
    

    Linking Native Dependencies

    Automatic Linking

    react-native link react-native-orientation
    

    Please note that you still need to manually configure a couple files even when using automatic linking. Please see the 'Configuration' section below. You will also need to restart your simulator before the package will work properly.

    Manual Linking

    iOS

    1. Add node_modules/react-native-orientation/iOS/RCTOrientation.xcodeproj to your xcode project, usually under the Libraries group
    2. Add libRCTOrientation.a (from Products under RCTOrientation.xcodeproj) to build target's Linked Frameworks and Libraries list
    3. Add $(SRCROOT)/node_modules/react-native-orientation/iOS/RCTOrientation/ to Project Name -> Build Settings -> Header Search Paths

    Android

    1. In android/setting.gradle

      ...
      include ':react-native-orientation', ':app'
      project(':react-native-orientation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-orientation/android')
      
    2. In android/app/build.gradle

      ...
      dependencies {
          ...
          compile project(':react-native-orientation')
      }
      
    3. Register module in MainApplication.java

      import com.github.yamill.orientation.OrientationPackage;  // <--- import 
       
      public class MainApplication extends Application implements ReactApplication {
        ......
       
        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new OrientationPackage()      <------- Add this
            );
        }
       
        ......
       
      }

    Configuration

    iOS

    Add the following to your project's AppDelegate.m:

    #import "Orientation.h" // <--- import 
     
    @implementation AppDelegate 
     
      // ... 
     
      - (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
        while ([[UIDevice currentDevice] isGeneratingDeviceOrientationNotifications]{
            [[UIDevice currentDevice] endGeneratingDeviceOrientationNotifications];
        }
      
        return [Orientation getOrientation];
      }
     
    @end

    Android

    Implement onConfigurationChanged method in MainActivity.java

        import android.content.Intent; // <--- import 
        import android.content.res.Configuration; // <--- import 
     
        public class MainActivity extends ReactActivity {
          ......
          @Override
          public void onConfigurationChanged(Configuration newConfig) {
            super.onConfigurationChanged(newConfig);
            Intent intent = new Intent("onConfigurationChanged");
            intent.putExtra("newConfig", newConfig);
            this.sendBroadcast(intent);
        }
     
          ......
     
        }

    Usage

    To use the react-native-orientation package in your codebase, you should use the Orientation module:

    import Orientation from 'react-native-orientation';
    export default class AppScreen extends Component {
      // ...
     
      componentWillMount() {
        // The getOrientation method is async. It happens sometimes that
        // you need the orientation at the moment the JS runtime starts running on device.
        // `getInitialOrientation` returns directly because its a constant set at the
        // beginning of the JS runtime.
     
        const initial = Orientation.getInitialOrientation();
        if (initial === 'PORTRAIT') {
          // do something
        } else {
          // do something else
        }
      },
     
      componentDidMount() {
        // this locks the view to Portrait Mode
        Orientation.lockToPortrait();
     
        // this locks the view to Landscape Mode
        // Orientation.lockToLandscape();
     
        // this unlocks any previous locks to all Orientations
        // Orientation.unlockAllOrientations();
     
        Orientation.addOrientationListener(this._orientationDidChange);
      },
     
      _orientationDidChange = (orientation) => {
        if (orientation === 'LANDSCAPE') {
          // do something with landscape layout
        } else {
          // do something with portrait layout
        }
      },
     
      componentWillUnmount() {
        Orientation.getOrientation((err, orientation) => {
          console.log(`Current Device Orientation: ${orientation}`);
        });
     
     
        // Remember to remove listener
        Orientation.removeOrientationListener(this._orientationDidChange);
      }
     
      render() {
        // ...
     
        return (
          // ...
        )
      }
    }

    Orientation Events

    addOrientationListener((orientation) => {});

    orientation will return one of the following values:

    • LANDSCAPE
    • PORTRAIT
    • PORTRAITUPSIDEDOWN
    • UNKNOWN
    removeOrientationListener((orientation) => {});
    addSpecificOrientationListener((specificOrientation) => {});

    specificOrientation will return one of the following values:

    • LANDSCAPE-LEFT
    • LANDSCAPE-RIGHT
    • PORTRAIT
    • PORTRAITUPSIDEDOWN
    • UNKNOWN
    removeSpecificOrientationListener((specificOrientation) => {});

    API

    • lockToPortrait()
    • lockToLandscape()
    • lockToLandscapeLeft()
    • lockToLandscapeRight()
    • unlockAllOrientations()
    • getOrientation((err, orientation) => {})
    • getSpecificOrientation((err, specificOrientation) => {})

    Install

    npm i react-native-orientation

    DownloadsWeekly Downloads

    14,523

    Version

    3.1.3

    License

    ISC

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar