react native orientation library
npm install @kartikbhalla/react-native-orientationA lightweight React Native library for controlling screen orientation on iOS and Android devices.
- Lock device orientation to portrait mode
- Lock device orientation to landscape mode
- Unlock all orientations (allows device to rotate freely)
- Check if orientation is currently locked
``shUsing npm
npm install @kartikbhalla/react-native-orientation
$3
The package is a Turbo Module, so it should work automatically with CocoaPods and autolinking in React Native ≥ 0.60
`sh
cd ios && pod install
`$3
No additional steps needed for Android as the library uses autolinking.
Usage
`js
import DeviceOrientation from '@kartikbhalla/react-native-orientation';// Lock to portrait mode
DeviceOrientation.lockToPortrait();
// Lock to landscape mode
DeviceOrientation.lockToLandscape();
// Unlock all orientations (allow device to rotate freely)
DeviceOrientation.unlockAllOrientations();
// Check if orientation is currently locked
const checkIfLocked = async () => {
const isLocked = await DeviceOrientation.isLocked();
console.log('Is orientation locked?', isLocked); // true or false
};
`API Reference
$3
Locks the device screen to portrait orientation.
`js
DeviceOrientation.lockToPortrait();
`$3
Locks the device screen to landscape orientation.
`js
DeviceOrientation.lockToLandscape();
`$3
Unlocks the device screen orientation, allowing it to rotate freely based on device orientation.
`js
DeviceOrientation.unlockAllOrientations();
`$3
Returns a Promise that resolves to a boolean indicating whether the orientation is currently locked.
`js
// Using async/await
const isLocked = await DeviceOrientation.isLocked();// Using Promises
DeviceOrientation.isLocked()
.then((isLocked) => {
console.log('Is orientation locked?', isLocked);
});
`Example
`js
import React, { useState, useEffect } from 'react';
import { View, Button, Text } from 'react-native';
import DeviceOrientation from '@kartikbhalla/react-native-orientation';const App = () => {
const [orientationLocked, setOrientationLocked] = useState(false);
useEffect(() => {
// Check initial lock status
checkLockStatus();
// Cleanup on unmount
return () => {
DeviceOrientation.unlockAllOrientations();
};
}, []);
const checkLockStatus = async () => {
const isLocked = await DeviceOrientation.isLocked();
setOrientationLocked(isLocked);
};
return (
Orientation is {orientationLocked ? 'locked' : 'unlocked'}
title="Lock to Portrait"
onPress={() => {
DeviceOrientation.lockToPortrait();
setOrientationLocked(true);
}}
/>
title="Lock to Landscape"
onPress={() => {
DeviceOrientation.lockToLandscape();
setOrientationLocked(true);
}}
/>
title="Unlock All Orientations"
onPress={() => {
DeviceOrientation.unlockAllOrientations();
setOrientationLocked(false);
}}
/>
);
};
export default App;
``- React Native: 0.60 and above
- iOS: 12.0 and above
- Android: API level 21 (Android 5.0) and above
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
---
Made with create-react-native-library