How to detect screen orientation change in react native?

See more:

React

react-native

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 and 'getOrientationAsync' is returning an undefined value and the listener isn't triggered when the orientation changes.

What I have tried:

<pre>import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  TouchableOpacity,
  Image,
  Text,
  Alert,
  ScrollView,
} 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);
    this.state = {
      orientation: ScreenOrientation.OrientationLock.PORTRAIT,
    };
  }

  async componentDidMount() {
    await this.detectOrientation();
    this.subscription = ScreenOrientation.addOrientationChangeListener(this.onOrientationChange);
  }

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

  onOrientationChange = async ({ orientation }) => {
    console.log('orientation changed');
    this.setState({ orientation });
    await ScreenOrientation.lockAsync(orientation);
  };

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

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

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

    return (
      <ScrollView style={styles.container} orientationChange={this.onOrientationChange}>
        <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' }}
        />
      </ScrollView>
    );
  }
}

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