React Native, expo-screen-orientation

Viewed 2278

I am working on IOS React Native Project (using expo with bare workflow). By default my app use portrait mode, but sometimes I need change screen orientation to landscape mode. I use expo-screen-orientation library to change screen orientation. When app change screen orientation I have issue in released app, although in debug mode it is works perfect (both IOS Simulator / IOS device). In release mode I have issue with cut screen. Please check photos in attach

import { StatusBar } from 'expo-status-bar';
import {StyleSheet, Text, View, Button} from 'react-native';
import * as ScreenOrientation from 'expo-screen-orientation';

export default function App() {

  const foo = async()=>{
    await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_LEFT);
  }

  return (
    <View style={styles.container}>
      <Text style={{paddingTop:50}}>Open up App.js to start working on your app!</Text>
      <Button title="Rotate" onPress={foo}/>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#cccccc',
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
});

Portrait mode


Landscape mode, with cut screen

Landscape mode with cut screen

1 Answers

There was a bug with expo-updates with expo SDK 43, you'll need to update expo-updates to v0.10.15 in your package.json, then npm install and run pod install. That fixed the issue for me. Others noted that downgrading expo to SDK 42 also fixed things.

More info here: https://github.com/expo/expo/issues/14967#issuecomment-966811190

Related