{"id":16527501,"url":"https://github.com/intellicode/react-native-screen-orientation","last_synced_at":"2026-05-11T10:35:36.115Z","repository":{"id":66194802,"uuid":"82661079","full_name":"Intellicode/react-native-screen-orientation","owner":"Intellicode","description":null,"archived":false,"fork":false,"pushed_at":"2017-09-11T13:06:19.000Z","size":176,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-13T16:24:43.729Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Intellicode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-21T09:28:19.000Z","updated_at":"2019-04-09T10:01:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"388e06f9-732e-4ff1-a4a5-acc294604f77","html_url":"https://github.com/Intellicode/react-native-screen-orientation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intellicode%2Freact-native-screen-orientation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intellicode%2Freact-native-screen-orientation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intellicode%2Freact-native-screen-orientation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intellicode%2Freact-native-screen-orientation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Intellicode","download_url":"https://codeload.github.com/Intellicode/react-native-screen-orientation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241610990,"owners_count":19990508,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T17:35:45.344Z","updated_at":"2026-05-11T10:35:36.060Z","avatar_url":"https://github.com/Intellicode.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"## react-native-orientation\nListen to device orientation changes in react-native and set preferred orientation on screen to screen basis.\n\n### Installation\n\n#### via rnpm\n\nRun `rnpm install react-native-orientation`\n\n\u003e Note: rnpm will install and link the library automatically.\n\n#### via npm\n\nRun `npm install react-native-orientation --save`\n\n### Linking\n\n#### Using rnpm (iOS + Android)\n\n`rnpm link react-native-orientation`\n\n#### Using [CocoaPods](https://cocoapods.org) (iOS Only)\n\n`pod 'react-native-orientation', :path =\u003e 'node_modules/react-native-orientation'`\n\nConsult the React Native documentation on how to [install React Native using CocoaPods](https://facebook.github.io/react-native/docs/embedded-app-ios.html#install-react-native-using-cocoapods).\n\n#### Manually\n\n**iOS**\n\n1. Add `node_modules/react-native-orientation/iOS/RCTOrientation.xcodeproj` to your xcode project, usually under the `Libraries` group\n1. Add `libRCTOrientation.a` (from `Products` under `RCTOrientation.xcodeproj`) to build target's `Linked Frameworks and Libraries` list\n\n\n**Android**\n\n1. In `android/setting.gradle`\n\n    ```\n    ...\n    include ':react-native-orientation', ':app'\n    project(':react-native-orientation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-orientation/android')\n    ```\n\n2. In `android/app/build.gradle`\n\n    ```\n    ...\n    dependencies {\n        ...\n        compile project(':react-native-orientation')\n    }\n    ```\n\n3. Register module (in MainApplication.java)\n\n    ```\n    import com.github.yamill.orientation.OrientationPackage;  // \u003c--- import\n\n    public class MainApplication extends Application implements ReactApplication {\n      ......\n\n      @Override\n      protected List\u003cReactPackage\u003e getPackages() {\n          return Arrays.\u003cReactPackage\u003easList(\n              new MainReactPackage(),\n              new OrientationPackage()      \u003c------- Add this\n          );\n      }\n\n      ......\n\n    }\n    ```\n\n### Configuration\n\n#### iOS\n\nAdd the following to your project's `AppDelegate.m`:\n\n```objc\n#import \"Orientation.h\" // \u003c--- import\n\n@implementation AppDelegate\n\n  // ...\n\n  - (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {\n    return [Orientation getOrientation];\n  }\n\n@end\n```\n\n\n## Usage\n\nWhenever you want to use it within React Native code now you can:\n`var Orientation = require('react-native-orientation');`\n\n```javascript\n  _orientationDidChange: function(orientation) {\n    if (orientation == 'LANDSCAPE') {\n      //do something with landscape layout\n    } else {\n      //do something with portrait layout\n    }\n  },\n\n  componentWillMount: function() {\n    //The getOrientation method is async. It happens sometimes that\n    //you need the orientation at the moment the js starts running on device.\n    //getInitialOrientation returns directly because its a constant set at the\n    //beginning of the js code.\n    var initial = Orientation.getInitialOrientation();\n    if (initial === 'PORTRAIT') {\n      //do stuff\n    } else {\n      //do other stuff\n    }\n  },\n\n  componentDidMount: function() {\n    Orientation.lockToPortrait(); //this will lock the view to Portrait\n    //Orientation.lockToLandscape(); //this will lock the view to Landscape\n    //Orientation.unlockAllOrientations(); //this will unlock the view to all Orientations\n\n    Orientation.addOrientationListener(this._orientationDidChange);\n  },\n\n  componentWillUnmount: function() {\n    Orientation.getOrientation((err,orientation)=\u003e {\n      console.log(\"Current Device Orientation: \", orientation);\n    });\n    Orientation.removeOrientationListener(this._orientationDidChange);\n  }\n```\n\n## Events\n\n- `addOrientationListener(function(orientation))`\n\norientation can return either `LANDSCAPE` `PORTRAIT` `UNKNOWN`\nalso `PORTRAITUPSIDEDOWN` is now different from `PORTRAIT`\n\n- `removeOrientationListener(function(orientation))`\n\n- `addSpecificOrientationListener(function(specificOrientation))`\n\nspecificOrientation can return either `LANDSCAPE-LEFT` `LANDSCAPE-RIGHT` `PORTRAIT` `UNKNOWN` `PORTRAITUPSIDEDOWN`\n\n- `removeSpecificOrientationListener(function(specificOrientation))`\n\n## Functions\n\n- `lockToPortrait()`\n- `lockToLandscape()`\n- `lockToLandscapeLeft()`\n- `lockToLandscapeRight()`\n- `unlockAllOrientations()`\n- `getOrientation(function(err, orientation)`\n\norientation can return either `LANDSCAPE` `PORTRAIT` `UNKNOWN` `PORTRAITUPSIDEDOWN`\n\n- `getSpecificOrientation(function(err, specificOrientation)`\n\nspecificOrientation can return either `LANDSCAPE-LEFT` `LANDSCAPE-RIGHT` `PORTRAIT` `UNKNOWN` `PORTRAITUPSIDEDOWN`\n\n## TODOS\n\n- [x] Add some way to allow setting a preferred orientation on a screen by screen basis.\n- [x] Make API Cleaner to Orientation Locking\n- [x] Android Support\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintellicode%2Freact-native-screen-orientation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fintellicode%2Freact-native-screen-orientation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintellicode%2Freact-native-screen-orientation/lists"}