License: MIT License

Objective-C 28.06% JavaScript 13.06% Java 58.88%

react-native-orientation-controller's Introduction

react-native-orientation-controller

A react-native library for obtaining and controlling current device or application orientation

This library is a fork of this library by Ken Wheeler. We thank him.

###Getting Started

Run npm install --save react-native-orientation-controller

Install with RNPM

npm install -g rnpm
rnpm link react-native-orientation-controller

Or Manual Installation

Android

Add to android/settings.gradle:

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

Add the compile project line to android/app/build.gradle (inside dependencies):

dependencies {
    // ... other content ... 
    compile project(':react-native-orientation-controller')
}

Inside MainActivity.java (normally somewhere here android/app/src/main/java/com/<your-app-name>/MainActivity.java) add import com.inprogress.ReactOrientationController.ReactOrientationController; and new ReactOrientationController(this) like in the example below

import com.inprogress.ReactOrientationController.ReactOrientationController; // <<< ADD THIS

/* ... other content ... */

    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new ReactOrientationController(this) // <<< AND THIS
            /* ... other packages can be here ... */
        );
    }

Usage

Import the library:

var Orientation = require('react-native-orientation-controller');

####rotate(orientation)

This method will change the current orientation of the device of 90° for parameter=1, 180° for parameter=2, 270° for parameter=3 :

componentDidMount(){
  Orientation.rotate(parameter);
}

####getOrientation(callback)

This method will return the current orientation of the device, the current orientation of the application, the device model and the screen size in the form of a callback:

componentDidMount(){
  Orientation.getOrientation(
    (deviceOrientation, applicationOrientation, device, size) => {
      console.log(deviceOrientation, applicationOrientation, device, size);
    }
  );
}

####addListener(callback)

This method will add a listener that will call the callback anytime the orientation changes:

_setOrientation(deviceOrientation, applicationOrientation, device, size) {
   console.log(deviceOrientation, applicationOrientation, device, size);
},
componentDidMount(){
  this.orientationListener = Orientation.addListener(this._setOrientation);
}

####removeListener(callback)

This method removes the listener you added in componentDidMount:

componentWillUnmount() {
  this.orientationListener.remove(); 
}

react-native-orientation-controller's People

Contributors

Stargazers

Watchers

Forkers

cyrbon lavarajallu nodonisko heruijun ethandoan

react-native-orientation-controller's Issues

Cocoapods support

Can you also add cocoapods support?

RN 0.39 Android support

React Native changed Android native module API, this module does not work on RN 0.39.

Install with android

@jujumoz

When installing react-native-orientation-controller with rnpm, I got this when building app :

/Users/theo/Projects/tactility/mobile/android/app/src/main/java/com/tactility/MainActivity.java:49: error: constructor ReactOrientationController in class ReactOrientationController cannot be applied to given types;
            new ReactOrientationController(),
            ^
  required: Activity
  found: no arguments
  reason: actual and formal argument lists differ in length

When I restrict my app to portrait then its not working in iOS

Hi,

I am using your module for orientation
My issue is when I Lock my app to portrait in xcode setting then orientation.rotate(1) is not at all working
Can anyone tell me how to solve this.

Android version is not working properly?

Hi,
Thanks for your fork!
I encountered an issue with the Android version, the iOS one works perfectly according to your recommendations.
Here is what I am doing :

componentDidMount(){
  Orientation.getDeviceOrientation(
    (orientation, device, size) => {
      console.log(orientation); // undefined
      console.log(device); // undefined
      console.log(size); // undefined

      console.log(arguments); // Sounds weird but get {}
    }
  );
}

However, orientation, device and size are all undefined.

I checked your Android ReactOrientationControllerModule, and I did not find where you send the device and size :

params.putString("orientation", Orientation);
thisContext
   .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
   .emit("applicationOrientationDidChange", params);

So, firstly, I think you did not handle the device name and size in the Android version, right?

Secondly, if you change the index.js to:

addApplicationListener: function(callback) {
    return DeviceEventEmitter.addListener(
      'applicationOrientationDidChange', function () {
        callback.apply(this, arguments) // [0] is now removed
      }
    );
},

You get the following :

componentDidMount(){
  Orientation.getDeviceOrientation(
    (orientation, device, size) => {
      console.log(orientation); // { orientation: 'LANDSCAPE RIGHT' }
      console.log(device); // undefined
      console.log(size); // undefined

      console.log(arguments); // display: { '0': { orientation: 'LANDSCAPE RIGHT' } }
    }
  );
}

What do you think about this malfunction? What about the Device and Size?
Device used : Wiko PULP 4G Android 5.1.1 (API 22)

inprogress-team / react-native-orientation-controller Goto Github PK