react-native-neo-orientation
device orientation for React Native
Installation
npm install react-native-neo-orientation
or
yarn add react-native-neo-orientation
Configuration
iOS
Add the following to your project's AppDelegate.mm:
+#import <react-native-neo-orientation/NeoOrientation.h>
@implementation AppDelegate
// ...
+- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
+ return [NeoOrientation getOrientation];
+}
@end
Android
Implement onConfigurationChanged method (in MainActivity.kt)
import android.content.Intent
import android.content.res.Configuration
class MainActivity : ReactActivity() {
override fun onConfigurationChanged(newConfig: Configuration) {
super.onConfigurationChanged(newConfig)
val intent = Intent("onConfigurationChanged")
intent.putExtra("newConfig", newConfig)
this.sendBroadcast(intent)
}
}
Add following to MainApplication.kt
import com.neoorientation.NeoOrientationActivityLifecycle
import com.neoorientation.NeoOrientationPackage
class MainApplication : Application(), ReactApplication {
override val reactNativeHost: ReactNativeHost =
object : DefaultReactNativeHost(this) {
override fun getPackages(): List<ReactPackage> =
PackageList(this).packages.apply {
add(NeoOrientationPackage())
}
}
override fun onCreate() {
registerActivityLifecycleCallbacks(NeoOrientationActivityLifecycle.instance)
}
}
Usage
import { Button, StyleSheet, Text, View } from 'react-native';
import React from 'react';
import NeoOrientation, { useDeviceOrientationChange, useOrientationChange } from 'react-native-neo-orientation';
const Home = () => {
const handleLockTolandscape = () => {
NeoOrientation.lockToLandscape();
};
const handleLockToPortrait = () => {
NeoOrientation.lockToPortrait();
};
const handleLockToPortraitUpsideDown = () => {
NeoOrientation.lockToPortraitUpsideDown();
};
const handleLockToLandscapeRight = () => {
NeoOrientation.lockToLandscapeRight();
};
const handleLockToLandscapeLeft = () => {
NeoOrientation.lockToLandscapeLeft();
};
const handleUnlockAllOrientations = () => {
NeoOrientation.unlockAllOrientations();
};
useDeviceOrientationChange((o) => {
});
useOrientationChange((o) => {
});
return (
<View style={styles.container}>
<Text style={styles.text}>Home</Text>
<Button title="Lock to landscape" onPress={handleLockTolandscape} />
<Button title="Lock to portrait" onPress={handleLockToPortrait} />
<Button
title="Lock to portrait upside down"
onPress={handleLockToPortraitUpsideDown}
/>
<Button
title="Lock to landscape right"
onPress={handleLockToLandscapeRight}
/>
<Button
title="Lock to landscape left"
onPress={handleLockToLandscapeLeft}
/>
<Button
title="Unlock all orientations"
onPress={handleUnlockAllOrientations}
/>
</View>
);
};
export default Home;
const styles = StyleSheet.create({
container: {
backgroundColor: 'black',
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
},
text: {
color: 'white',
fontSize: 32,
},
});
Events
addOrientationListener(function(orientation))
removeOrientationListener(function(orientation))
addDeviceOrientationListener(function(deviceOrientation))
removeDeviceOrientationListener(function(deviceOrientation))
addLockListener(function(orientation))
removeLockListener(function(orientation))
removeAllListeners()
Functions
lockToLandscape
lockToPortrait
lockToPortraitUpsideDown
lockToLandscapeRight
lockToLandscapeLeft
lockToAllOrientationButUpsideDown
unlockAllOrientations
getOrientation
getDeviceOrientation
isLocked
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT