Wix React Native Navigation V2, how to lock orientation portrait on Android

Question

I'm using RNN2 and I need to lock orientation on Android to portrait. Usually in a traditional android app it's done with android:screenOrientation = "portrait" in manifest.xml, but when I have setup the screens with RNN2 it's not working.

Any help will be appreciated.

score 4 · Answer 1 · answered Jul 26 '19 at 12:29

The only way I have made this work, was to add the code below to the options of each screen component. Even though the types allow layout to be specfied on stacks and bottomtabs, it only seems to work on the options of components themselves. At least on 2.19 and 2.23 where I tried it.

export class MyScreen extends Component<Props, State> {
  static options = (): Options => ({
    topBar: {
      visible: false,
      drawBehind: true,
    },
    statusBar: {
      style: 'light',
    },
    layout: {
      orientation: ['portrait'],
    },
  })

EDIT

it can also be set to the default this way:

    Navigation.setDefaultOptions({
      layout: { orientation: ['portrait'] },
    })

score 0 · Answer 2 · answered Feb 16 '20 at 13:53

I have a single screen with a side drawer and I got it working across the app by adding layout to the options of the center screen and not the root:

Navigation.setRoot({
root: {
  sideMenu: {
    id: 'sideMenu',
    left: {
      component: {
        id: 'SideDrawer',
        name: 'yourApp.SideDrawer',
      },
      visible:true,
    },
    center: {
      stack: {
        id: 'App',
        children: [{
          component: {
            id: 'HomeScreen',
            name: 'yourApp.HomeScreen',
            options:{
              topBar: {
                leftButtons: [
                  {
                    text:'Menu',
                    id: 'sideDrawerToggle',
                    active: true,
                    visible: true,
                    display: true,
                  }
                ],
                background: {
                  color: '#000',
                  },
                title: {
                  text: 'Your App',
                  fontSize: 18,
                  color: '#fff',
                  fontFamily: 'Helvetica',
                  fontWeight: 'bold', // Available on iOS only, will ignore fontFamily style and use the iOS system fonts instead. Supported weights are: 'regular', 'bold', 'thin', 'ultraLight', 'light', 'medium', 'semibold', 'heavy' and 'black'.
                },
              },
            }
          },
        }],
        options:{
          topBar: {
            background: {
              color: '#000',
              },
            title: {
              fontSize: 18,
              color: '#fff',
              fontFamily: 'Helvetica',
              fontWeight: 'bold', // Available on iOS only, will ignore fontFamily style and use the iOS system fonts instead. Supported weights are: 'regular', 'bold', 'thin', 'ultraLight', 'light', 'medium', 'semibold', 'heavy' and 'black'.
            },
            backButton: {
              visible: true,
              color:'#fff'
            },
          },
          //add layout here
          layout: {
            orientation: ['portrait'],
          },
        }
      }
    }
  }
}});

Wix React Native Navigation V2, how to lock orientation portrait on Android

2 Answers2