react-native-webview doesn't change screen orientation on iOS

Question

I'm working on a small react-native app. It's nearly only a container for showing my webapp, so nearly everthing is running cool.

The problem is, the user needs to rotate the screen on some of the webapp-sites. With my implementation this works very good on android, but not on iOS. The funny thing is, when I start the app on iOS via EXPO GO, it also works.

I've searched a lot but I can not find a solution for this. Do you have any idea how to change that behavior on iOS?

This is my App.js

import React from "react";
import { StyleSheet, View } from "react-native";
import WebView from 'react-native-webview';

const WEBSITE = 'https://www.google.com'

export default function App() {

  return (
    <View style={styles.container}>
      <View style={{ width: '100%', height: '100%' }}>
        <WebView
          source={{ uri: WEBSITE }}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "flex-start",
  },
});

Answer 1

I would first check your xcode project settings and ensure that the orientations you are looking for are enabled. If you open up xcode and check the orientations you should have all the orientations selected that you want to support. The project below has only portrait enabled therefore I'd suggest you enable the landscape orientations and hopefully this should resolve your problem.