Revision history [back]

To begin a React Native app that supports portrait orientation on both iOS and Android, use the following steps:

1. Create a new React Native project by running npx react-native init MyApp.
2. In the AndroidManifest.xml file located in android/app/src/main add the following code under the android:label tag:

android:screenOrientation="portrait"
android:configChanges="keyboardHidden|orientation"

1. In the Info.plist file located in ios/MyApp add the following code:

<key>UISupportedInterfaceOrientations</key>
<array>
  <string>UIInterfaceOrientationPortrait</string>
  <string>UIInterfaceOrientationPortraitUpsideDown</string>
</array>

1. Add the following code to your App.js file:

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        {/* Add your components here */}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'flex-start',
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
  },
});

This will create a basic layout for your app. You can add your components inside the container view.

1. Test your app on the iOS and Android simulators or on real devices. The app should only allow portrait orientation on both platforms.