Skip to content
This repository has been archived by the owner on Aug 18, 2020. It is now read-only.

A react-native library for obtaining current device orientation


Notifications You must be signed in to change notification settings


Repository files navigation


This repository has been archived and is not supported.

No Maintenance Intended


A react-native library for obtaining current device orientation

###Getting Started

  • Run npm install --save react-native-orientation-listener


  • Open your Xcode project, and select your project in the Project Navigator tab
  • Right click the Libraries folder and select "Add files to [your project]"
  • Add RCTOrientationListener.xcodeproj from your node_modules folder
  • Click your main project icon back in the Project Navigator to bring up preferences, and go to the Build Phases tab.
  • Click the + button underneath Link Binary With Libraries section.
  • Add libRCTOrientationListener.a


  • Open /android/settings.gradle
  • Replace include ':app' with:
include ':com.walmartreact.ReactOrientationListener', ':app'
project(':com.walmartreact.ReactOrientationListener').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-orientation-listener/android')
  • Open android/app/build.gradle
  • Add the following under dependencies:
compile project(':com.walmartreact.ReactOrientationListener')
  • Open your file under android/src
  • Import the lib using import com.walmartreact.ReactOrientationListener.*;
  • Add the following after .addPackage(new MainReactPackage()):
.addPackage(new ReactOrientationListener())


Import the library:

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


This method will return the current orientation and device string in the form of a callback:

    (orientation, device) => {
      console.log(orientation, device);


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

_setOrientation(data) {
    orientation: evt.orientation,
    device: evt.device


This method removes the listener you added in componentDidMount:

componentWillUnmount() {