React-native-neo-orientation NPM

react-native-neo-orientation

device orientation for React Native

Installation

npm install react-native-neo-orientation

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

Usage

import { Button, StyleSheet, Text, View } from 'react-native';
import React from 'react';
import NeoOrientation 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();
  };
  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,
  },
});