jedt/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

Download

Step 1. Add the JitPack repository to your build file

Add it in your root settings.gradle at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url 'https://jitpack.io' }
		}
	}

Add it in your settings.gradle.kts at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url = uri("https://jitpack.io") }
		}
	}

Add to pom.xml

	<repositories>
		<repository>
		    <id>jitpack.io</id>
		    <url>https://jitpack.io</url>
		</repository>
	</repositories>

Add it in your build.sbt at the end of resolvers:

 
    resolvers += "jitpack" at "https://jitpack.io"

Add it in your project.clj at the end of repositories:

 
    :repositories [["jitpack" "https://jitpack.io"]]

Step 2. Add the dependency

	dependencies {
		implementation 'com.github.jedt:react-native-orientation:'
	}
	dependencies {
		implementation("com.github.jedt:react-native-orientation:")
	}
	<dependency>
	    <groupId>com.github.jedt</groupId>
	    <artifactId>react-native-orientation</artifactId>
	    <version></version>
	</dependency>

                            
    libraryDependencies += "com.github.jedt" % "react-native-orientation" % ""
        
        

                            
    :dependencies [[com.github.jedt/react-native-orientation ""]]

Readme

react-native-orientation

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

Installation

via rnpm

Run rnpm install react-native-orientation

Note: rnpm will install and link the library automatically.

via npm

Run npm install react-native-orientation --save

Linking

Using rnpm (iOS + Android)

rnpm link react-native-orientation

Using CocoaPods (iOS Only)

pod 'react-native-orientation', :path => 'node_modules/react-native-orientation'

Consult the React Native documentation on how to install React Native using CocoaPods.

Manually

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

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

Whenever you want to use it within React Native code now you can: var Orientation = require('react-native-orientation');

  _orientationDidChange: function(orientation) {
    if (orientation == 'LANDSCAPE') {
      //do something with landscape layout
    } else {
      //do something with portrait layout
    }
  },

  componentWillMount: function() {
    //The getOrientation method is async. It happens sometimes that
    //you need the orientation at the moment the js starts running on device.
    //getInitialOrientation returns directly because its a constant set at the
    //beginning of the js code.
    var initial = Orientation.getInitialOrientation();
    if (initial === 'PORTRAIT') {
      //do stuff
    } else {
      //do other stuff
    }
  },

  componentDidMount: function() {
    Orientation.lockToPortrait(); //this will lock the view to Portrait
    //Orientation.lockToLandscape(); //this will lock the view to Landscape
    //Orientation.unlockAllOrientations(); //this will unlock the view to all Orientations

    Orientation.addOrientationListener(this._orientationDidChange);
  },

  componentWillUnmount: function() {
    Orientation.getOrientation((err,orientation)=> {
      console.log("Current Device Orientation: ", orientation);
    });
    Orientation.removeOrientationListener(this._orientationDidChange);
  }

Events

  • addOrientationListener(function(orientation))

orientation can return either LANDSCAPE PORTRAIT UNKNOWN also PORTRAITUPSIDEDOWN is now different from PORTRAIT

  • removeOrientationListener(function(orientation))

  • addSpecificOrientationListener(function(specificOrientation))

specificOrientation can return either LANDSCAPE-LEFT LANDSCAPE-RIGHT PORTRAIT UNKNOWN PORTRAITUPSIDEDOWN

  • removeSpecificOrientationListener(function(specificOrientation))

Functions

  • lockToPortrait()
  • lockToLandscape()
  • lockToLandscapeLeft()
  • lockToLandscapeRight()
  • unlockAllOrientations()
  • getOrientation(function(err, orientation)

orientation can return either LANDSCAPE PORTRAIT UNKNOWN PORTRAITUPSIDEDOWN

  • getSpecificOrientation(function(err, specificOrientation)

specificOrientation can return either LANDSCAPE-LEFT LANDSCAPE-RIGHT PORTRAIT UNKNOWN PORTRAITUPSIDEDOWN

TODOS

  • [x] Add some way to allow setting a preferred orientation on a screen by screen basis.
  • [x] Make API Cleaner to Orientation Locking
  • [x] Android Support