React Native Expo Device Orientation

Features

• Detects device orientation changes.
• Provides the current orientation of the device.
• Lightweight and easy to use.
• Supports both Android and iOS.

Orientation Values

• 0°: PORTRAIT_UP
• 90°: LANDSCAPE_LEFT
• -90°: LANDSCAPE_RIGHT
• 180°: PORTRAIT_DOWN

Installation

npm i react-native-expo-device-orientation

Usage in Expo App

1. Install the package:

   npm i react-native-expo-device-orientation

2. Import it into your project:

   import { useDeviceOrientation } from 'react-native-expo-device-orientation';

3. Use it:

   const orientation = useDeviceOrientation();

Example Code

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { useDeviceOrientation } from 'react-native-expo-device-orientation';

export default function App() {
  const orientation = useDeviceOrientation();

  return (
    
      
        Orientation: {orientation}°
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  orientationText: {
    textAlign: 'center',
    marginTop: 20,
    fontSize: 18,
  },
});
      

Usage in Bare React Native App

1. Install the package:

   npm i react-native-expo-device-orientation

2. Import it:

   import { useDeviceOrientation } from 'react-native-expo-device-orientation';

3. Install Expo modules:

   npx install-expo-modules@latest

4. Use it:

   const orientation = useDeviceOrientation();

Example Code

import React from 'react';
import { Text, View } from 'react-native';
import { useDeviceOrientation } from 'react-native-expo-device-orientation';

function App() {
  const orientation = useDeviceOrientation();

  return (
    
       Orientation = {orientation} 
    
  );
}

export default App;
      

Contributing

Submit a pull request to the contrib-testing branch of the GitHub repository. All contributions are reviewed before merging.

Stay connected: LinkedIn Profile