expo - How to detect screen orientation change in React Native?

Question

I'm using Video from expo-av to display my videos. My goal is to display the video depending on the Orientation of the device of the user. I'm using ScreenOrientation from expo-screen-orientation so i can detect the rotation using the addOrientationChangeListener function. I tried my code below but i can't detect the change of the orientation. Any Help of how can i achieve my goal or what's wrong in my code?

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  TouchableOpacity,
  Image,
  Text,
  Alert,
  ScrollView,
  Dimensions
} from 'react-native';
import { Video } from 'expo-av';
import * as ScreenOrientation from 'expo-screen-orientation';
import NavigationHelper from '../../../../Helpers/NavigationHelper';

export default class VideoScreen extends Component {
  constructor(props) {
    super(props);
    /* enum Orientation {
      UNKNOWN = 0,
        PORTRAIT_UP = 1,
        PORTRAIT_DOWN = 2,
        LANDSCAPE_LEFT = 3,
        LANDSCAPE_RIGHT = 4
    } */
    this.state = {
      orientation: 1,
    };
  }

  async componentDidMount() {
    await this.detectOrientation();
    this.subscription = ScreenOrientation.addOrientationChangeListener(this.onOrientationChange);
    /* if (ScreenOrientation.Orientation.LANDSCAPE) {
      this.changeScreenLandscapeOrientation();
    } */
  }

  async componentWillUnmount() {
    await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
    ScreenOrientation.removeOrientationChangeListener(this.subscription);
    // this.changeScreenPortraitOrientation();
  }

  onOrientationChange = async (orientation) => {
    console.log('orientation changed');
    if (orientation === 3 || orientation === 4) {
      await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
    } else {
      await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
    }
    this.setState({ orientation });
  };

  detectOrientation= async () => {
    let orientation = await ScreenOrientation.getOrientationAsync();
    const screen = Dimensions.get('screen');
    if (orientation === 0) {
      orientation = screen.width > screen.height ? ScreenOrientation.Orientation.LANDSCAPE : ScreenOrientation.Orientation.PORTRAIT;
    }
    this.setState({ orientation });
    console.log(orientation);
  };

  render() {
    const { route } = this.props;
    const { videoUri } = route.params;

    if (!videoUri) {
      NavigationHelper.back();
    }

    return (
      <ScrollView style={styles.container}>
        <Video
          source={{ uri: videoUri }}
          rate={1.0}
          volume={1.0}
          isMuted={false}
          resizeMode={Video.RESIZE_MODE_CONTAIN}
          shouldPlay
          isLooping
          useNativeControls
          style={{ width: 300, height: 300, alignSelf: 'center' }}
          orientationChange={this.onOrientationChange}
        />
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000000',
    flexDirection: 'column'
  },
});

question from:https://stackoverflow.com/questions/65939656/how-to-detect-screen-orientation-change-in-react-native

Answer 1

Look at the library method getOrientationAsync()

export declare function getOrientationAsync(): Promise<Orientation>;

The orientation definition is

export declare enum Orientation {
    UNKNOWN = 0,
    PORTRAIT_UP = 1,
    PORTRAIT_DOWN = 2,
    LANDSCAPE_LEFT = 3,
    LANDSCAPE_RIGHT = 4
}

So, it already returns the integer that refers to the correct orientation. Maybe what you want to do is just remove the brackets between the orientation:

    let orientation = await ScreenOrientation.getOrientationAsync();