gaguirre / react-native-orientation

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

react-native-orientation

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

Add it to your project

Run npm install react-native-orientation --save

iOS

1. Open your project in XCode, right click on your project and click Add Files to "Your Project Name"
2. Add RCTOrientation folder from your node_modules/react-native-orientation folder. Make sure you have 'Create Groups' selected

Android

1. In android/setting.gradle

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

2. In android/app/build.gradle

   ...
   dependencies {
       ...
       compile project(':Orientation')
   }
   

3. Register module (in MainActivity.java)

   import com.github.yamill.orientation.OrientationPackage;  // <--- import
   
   public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
     ......
   
     @Override
     protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       mReactRootView = new ReactRootView(this);
   
       mReactInstanceManager = ReactInstanceManager.builder()
         .setApplication(getApplication())
         .setBundleAssetName("index.android.bundle")
         .setJSMainModuleName("index.android")
         .addPackage(new MainReactPackage())
         .addPackage(new OrientationPackage(this))              // <------ add here
         .setUseDeveloperSupport(BuildConfig.DEBUG)
         .setInitialLifecycleState(LifecycleState.RESUMED)
         .build();
   
       mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);
   
       setContentView(mReactRootView);
     }
   
     ......
   
   }
   

4. Implement onConfigurationChanged method (in MainActivity.java)

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        Intent intent = new Intent("onConfigurationChanged");
        intent.putExtra("newConfig", newConfig);
        this.sendBroadcast(intent);
    }

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

Usage

  _orientationDidChange: function(orientation) {
    if(orientation == 'LANDSCAPE'){
      //do something with landscape layout
    }else{
      //do something with portrait layout
    }
  },
  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))
• removeOrientationListener(function(orientation))

Functions

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

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

TODOS

• Add some way to allow setting a preferred orientation on a screen by screen basis.
• Make API Cleaner to Orientation Locking
• [] Find a way to expose shouldAutoRotate (??? a PR would be great)