CODEWITHSUNDEEP
react-native-navigation-v2
user9677330
user9677330

Reputation:

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

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.

Upvotes: 6

Views: 2659

Answers (2)

sigmapi13
sigmapi13

Reputation: 2535

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'],
          },
        }
      }
    }
  }
}});

Upvotes: 0

Esben von Buchwald
Esben von Buchwald

Reputation: 3049

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'] },
    })

Upvotes: 4

Related Questions