React Native Orientation

screenshot of React Native Orientation
react-native

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

Overview:

The React Native Orientation npm package allows developers to listen to device orientation changes in React Native applications and set preferred orientations on a per-screen basis for both Android and iOS devices.

Features:

  • Listen to Device Orientation Changes: Get real-time updates on device orientation.
  • Set Preferred Orientation: Programmatically set the preferred orientation for each screen.
  • Cross-Platform Support: Works seamlessly on both Android and iOS platforms.
  • Automatic Linking: Simplifies the process of linking native dependencies.
  • Manual Linking: Provides detailed instructions for manual linking on both iOS and Android.
  • Orientation Events: Access different orientation values such as landscape, portrait, and unknown.
  • API Methods: Functions like lockToPortrait, lockToLandscape, lockToLandscapeLeft, lockToLandscapeRight, and unlockAllOrientations for managing screen orientations.

Automatic Linking:

npm install react-native-orientation

Manual Linking - iOS:

  1. Add node_modules/react-native-orientation/iOS/RCTOrientation.xcodeproj to your Xcode project.
  2. Add libRCTOrientation.a to the Linked Frameworks and Libraries list.
  3. Update Header Search Paths in Build Settings to $(SRCROOT)/node_modules/react-native-orientation/iOS/RCTOrientation/.

Manual Linking - Android:

  1. Update android/settings.gradle file.
  2. Register the module in android/app/build.gradle.
  3. Implement the necessary changes in MainApplication.java.

Summary:

The React Native Orientation package simplifies managing device orientation in React Native apps by providing easy listeners for orientation changes and methods for setting preferred orientations. It offers both automatic and manual linking options for seamless integration with iOS and Android projects, along with a range of API methods for controlling device orientation behavior.

react-native
React Native

React Native is a framework for building mobile applications using React and JavaScript. It enables developers to write once and deploy to multiple platforms, including iOS, Android, and the web, while providing a native app-like experience to users.