yamill/react-native-orientation


Listen to device orientation changes in react-native and set preferred orientation on screen to screen basis.

https://www.npmjs.com/package/react-native-orientation

License: ISC

Language: Objective-C


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 {
  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) => {})

Project Statistics

Sourcerank 14
Repository Size 236 KB
Stars 1,442
Forks 588
Watchers 26
Open issues 115
Dependencies 472
Contributors 34
Tags 8
Created
Last updated
Last pushed

Top Contributors See all

Yamill Vallecillo Hamzeh Sharawi Aleksi Pousar Michael Crumm Constantin Clauzel PJ Cabrera youenn pennarun waterwu Kenichi Shibata b_d Eugene Sokovikov Gary Fung Dale Jefferson Chris Griffin Nikola Hristov Simon Gough Zolar Josep Bordes Jové Nikita Morozov Laurent Domenech

Packages Referencing this Repo

offlyer-react-native-orientation
Listen to device orientation changes in React Native applications and programmatically set prefer...
Latest release 1.0.0 - Published - 1.44K stars
nunlup-devices-orientation
Listen to device orientation changes in React Native applications and programmatically set prefer...
Latest release 3.1.5 - Updated - 1.44K stars
react-native-orientation-xz
Listen to device orientation changes in React Native applications and programmatically set prefer...
Latest release 1.0.0 - Published - 1.44K stars
react-native-screen-orientation
Listen to device orientation changes in react-native and set preferred orientation on screen to s...
Latest release 1.1.0 - Updated - 1.44K stars
react-native-akoo-orientation
Listen to device orientation changes in React Native applications and programmatically set prefer...
Latest release 3.1.3 - Published - 1.44K stars
@my01/react-native-orientation
Listen to device orientation changes in React Native applications and programmatically set prefer...
Latest release 3.1.6 - Updated - 1.44K stars
react-native-orientation
Listen to device orientation changes in React Native applications and programmatically set prefer...
Latest release 3.1.3 - Updated - 1.44K stars
react-native-orientation-rn29
Listen to device orientation changes in react-native and set preferred orientation on screen to s...
Latest release 1.17.0 - Published - 1.44K stars
faogustavo-react-native-orientation
Listen to device orientation changes in react-native and set preferred orientation on screen to s...
Latest release 1.17.0 - Published - 1.44K stars
react-native-orientation-dreams
Listen to device orientation changes in React Native applications and programmatically set prefer...
Latest release 3.1.3 - Published - 1.44K stars
react-native-ingage-orientation
Listen to device orientation changes in React Native applications and programmatically set prefer...
Latest release 3.1.2 - Updated - 1.44K stars
react-native-orientation-msa
Listen to device orientation changes in React Native applications and programmatically set prefer...
Latest release 3.1.3 - Published - 1.44K stars

Recent Tags See all

3.1.3 December 31, 2017
3.1.2 December 30, 2017
3.1.1 December 30, 2017
3.1.0 September 10, 2017
3.0.0 August 09, 2017
v2.1.0 July 15, 2017
2.1.0 July 15, 2017
v2.0.0 July 06, 2017

Interesting Forks See all

infinitered/react-native-orientation
Listen to device orientation changes in react-native and set preferred orientation on screen to s...
Java - Last pushed - 2 stars
youennPennarun/react-native-orientation
Listen to device orientation changes in react-native and set preferred orientation on screen to s...
Objective-C - Last pushed - 2 stars - 8 forks
Dudyboy/react-native-orientation
Listen to device orientation changes in react-native and set preferred orientation on screen to s...
Objective-C - Last pushed - 2 stars - 1 forks
8fit/react-native-orientation
Listen to device orientation changes in react-native and set preferred orientation on screen to s...
Objective-C - Last pushed - 1 stars - 1 forks
aqnaruto/react-native-orientation
Listen to device orientation changes in react-native and set preferred orientation on screen to s...
Java - Last pushed - 1 stars - 1 forks

Something wrong with this page? Make a suggestion

Last synced: 2019-08-14 14:51:33 UTC

Login to resync this repository