My issue

I cannot get the ScreenOrientation.addOrientationChangeListener to trigger on my iOS devices. It works fine on Android.

How to solve this question

The example below is my best effort to demonstrate my issue. If someone could help me trigger the orientationListener() in this code, using an iOS device, that would solve my problem.

Any advice or suggestions where to look are greatly appreciated 🙂

Gif displaying my issue

Details of my issue

I have a useEffect() where I implement the ScreenOrientation.addOrientationChangeListener(). When triggered it should trigger the orientationListener(). This works in Android but not iOS.

What does work on my iOS is, if I comment out my useEffect, I have a button that uses ScreenOrientation.getOrientationAsync() to populate my orientation. I can change the orientation of my device press this button and get the correct orientation on my iOS and Android. I am not sure exactly what this tells me but it makes me optimistic that there is a solution to the listener issue I am having.

My research

I have found this post (/a/76683420/11925053) and corresponding GitHub issue using ScreenOrientation.unlockAsync() , but that has also yeilded no success on my part. I have tried various variations of placing this in my useEffect or triggered by a button. I have also tried variations of modifying my app.json to start with a postion or default.

Code

import React, { useEffect, useState } from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
import * as ScreenOrientation from "expo-screen-orientation";

export default function Orientation06() {
  const [orientation, setOrientation] = useState("Unknown");

  useEffect(() => {
    const startListeningToOrientation = async () => {
      await ScreenOrientation.addOrientationChangeListener(orientationListener);
      console.log("in listeningToOrientation");
    };

    startListeningToOrientation();
  });

  const checkOrientation = async () => {
    console.log("in checkOrientation");
    const orientation = await ScreenOrientation.getOrientationAsync();
    setOrientation(orientation);
    console.log(`orientation is ${orientation}`);
  };

  const orientationListener = (o) => {
    console.log("in orientationListener 🔔");
    setOrientation(o.orientationInfo.orientation);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Current Orientation:</Text>
      <Text style={styles.orientation}>{orientation}</Text>
      <TouchableOpacity
        style={styles.touchOpNav}
        onPress={() => checkOrientation()}
      >
        <Text style={styles.txtTouchOpNav}>Check orientation </Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f5f5f5",
  },
  text: {
    fontSize: 24,
    fontWeight: "bold",
  },
  orientation: {
    fontSize: 32,
    marginTop: 20,
    color: "#007AFF",
  },
  touchOpNav: {
    backgroundColor: "black",
    padding: 5,
    width: 250,
    borderRadius: 12,
    marginBottom: 1,
  },
  txtTouchOpNav: {
    color: "gray",
    alignSelf: "center",
    fontSize: 20,
  },
});

app.json

{
  "expo": {
    "name": "native-stuff-reducer-array",
    "slug": "native-stuff-reducer-array",
    "version": "1.0.0",
    "orientation": "default",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "newArchEnabled": true,
    "splash": {
      "image": "./assets/splash-icon.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "plugins": [
      "expo-video",
      [
        "expo-screen-orientation",
        {
          "initialOrientation": "DEFAULT"
        }
      ]
    ]
  }
}