### Install React Native Orientation Locker Source: https://context7.com/wonday/react-native-orientation-locker/llms.txt Instructions for installing the react-native-orientation-locker package using either yarn or npm. This step is required before using the library's functionalities. ```bash # Using yarn (RN 0.60+) yarn add react-native-orientation-locker # Using npm npm install react-native-orientation-locker ``` -------------------------------- ### Install react-native-orientation-locker using Yarn Source: https://github.com/wonday/react-native-orientation-locker/blob/master/README.md Installs the react-native-orientation-locker package using Yarn. For React Native versions 0.60 and above, a simple add command is sufficient. For older versions (0.59 and below), an additional linking step is required. ```bash yarn add react-native-orientation-locker ``` ```bash yarn add react-native-orientation-locker react-native link react-native-orientation-locker ``` -------------------------------- ### Orientation Query Functions Source: https://github.com/wonday/react-native-orientation-locker/blob/master/README.md Functions to get the current orientation and device orientation. ```APIDOC ## Orientation Query Functions ### Description Functions to retrieve the current screen orientation and device orientation, as well as the auto-rotate state. ### Method `getOrientation(callback)` `getDeviceOrientation(callback)` `getAutoRotateState(callback)` (Android only) `isLocked()` ### Endpoint N/A (These are direct function calls) ### Parameters #### `getOrientation` and `getDeviceOrientation` - **callback** (function) - A function that receives the orientation string as an argument. #### `getAutoRotateState` - **callback** (function) - A function that receives the auto-rotate state (boolean) as an argument. ### Request Example ```javascript OrientationLocker.getOrientation((orientation) => { console.log('Current orientation:', orientation); }); OrientationLocker.getDeviceOrientation((deviceOrientation) => { console.log('Device orientation:', deviceOrientation); }); // Android only OrientationLocker.getAutoRotateState((state) => { console.log('Auto-rotate state:', state); }); const lockedStatus = OrientationLocker.isLocked(); console.log('Is orientation locked?', lockedStatus); ``` ### Response #### Success Response (Callback) - **orientation** (string) - The current screen orientation. Possible values: `PORTRAIT`, `LANDSCAPE-LEFT`, `LANDSCAPE-RIGHT`, `PORTRAIT-UPSIDEDOWN`, `FACE-UP`, `FACE-DOWN`, `UNKNOWN`. - **deviceOrientation** (string) - The current device orientation. Same possible values as `orientation`. - **state** (boolean) - The auto-rotate state (true if enabled, false if disabled). (Android only) - **isLocked()** (boolean) - Returns true if the orientation is locked by this library, false otherwise. ### Notes - `PORTRAIT-UPSIDEDOWN` is not supported on iOS. - `FACE-UP` and `FACE-DOWN` are only supported on iOS and Windows. ``` -------------------------------- ### Get Initial Orientation in React Native Source: https://context7.com/wonday/react-native-orientation-locker/llms.txt Synchronously returns the orientation of the application at startup. This function is not asynchronous and provides an immediate value, unlike `getOrientation`. It's useful for setting initial layout configurations. ```javascript import Orientation from 'react-native-orientation-locker'; function App() { // Get initial orientation synchronously - available immediately const initialOrientation = Orientation.getInitialOrientation(); const [layout, setLayout] = useState( initialOrientation === 'PORTRAIT' ? 'vertical' : 'horizontal' ); useEffect(() => { console.log('App started in:', initialOrientation); // Configure initial layout based on starting orientation if (initialOrientation === 'LANDSCAPE-LEFT' || initialOrientation === 'LANDSCAPE-RIGHT') { setLayout('horizontal'); } }, []); return ; } ``` -------------------------------- ### Implement Orientation Control and Monitoring in React Native Source: https://context7.com/wonday/react-native-orientation-locker/llms.txt This example demonstrates how to use hooks like useOrientationChange and useLockListener to track orientation state, and imperative methods to lock or unlock the screen orientation. It requires the react-native-orientation-locker library and is designed for React Native applications. ```javascript import React, { useEffect, useState } from 'react'; import { View, Text, TouchableOpacity, ScrollView, StyleSheet, Platform } from 'react-native'; import Orientation, { useOrientationChange, useDeviceOrientationChange, useLockListener } from 'react-native-orientation-locker'; export default function App() { const [isLocked, setIsLocked] = useState(false); const [uiOrientation, setUiOrientation] = useState('UNKNOWN'); const [deviceOrientation, setDeviceOrientation] = useState('UNKNOWN'); const [lockState, setLockState] = useState('UNKNOWN'); useOrientationChange((o) => setUiOrientation(o)); useDeviceOrientationChange((o) => setDeviceOrientation(o)); useLockListener((o) => setLockState(o)); useEffect(() => { const initial = Orientation.getInitialOrientation(); setIsLocked(Orientation.isLocked()); if (Platform.OS === 'android') { Orientation.getAutoRotateState((enabled) => console.log('Auto-rotate enabled:', enabled)); } }, []); const updateLockState = () => setIsLocked(Orientation.isLocked()); return ( Orientation Locker Demo UI Orientation: {uiOrientation} Device Orientation: {deviceOrientation} Locked: {isLocked ? 'Yes' : 'No'} Lock State: {lockState} { Orientation.lockToPortrait(); updateLockState(); }}> Lock to Portrait { Orientation.lockToLandscape(); updateLockState(); }}> Lock to Landscape { Orientation.unlockAllOrientations(); updateLockState(); }}> Unlock All Orientations ); } const styles = StyleSheet.create({ container: { flexGrow: 1, padding: 20, paddingTop: 50, alignItems: 'center' }, title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 }, statusBox: { backgroundColor: '#f0f0f0', padding: 15, borderRadius: 10, marginBottom: 20, width: '100%' }, button: { backgroundColor: '#007AFF', padding: 15, borderRadius: 8, marginVertical: 5, width: '100%', alignItems: 'center' }, unlockButton: { backgroundColor: '#34C759' } }); ``` -------------------------------- ### Lock Device Orientation using OrientationLocker Source: https://context7.com/wonday/react-native-orientation-locker/llms.txt Demonstrates how to import orientation constants and use the OrientationLocker component to programmatically lock the device screen to specific orientations. It includes a functional component example that toggles between different orientation states via button presses. ```javascript import { OrientationLocker, UNLOCK, PORTRAIT, LANDSCAPE, LANDSCAPE_LEFT, LANDSCAPE_RIGHT, PORTRAIT_UPSIDE_DOWN, ALL_ORIENTATIONS_BUT_UPSIDE_DOWN } from 'react-native-orientation-locker'; function OrientationDemo() { const [mode, setMode] = useState(PORTRAIT); return (