How to lock orientation for specific screen on TabNavigator

Question

I used TabNavigation for my app. In some screen, I want it only display on portrait orientation, and others are landscape. I've found react-native-orientation and try in my screens:

Screen 1

import React from "react";
import Orientation from 'react-native-orientation';
import { Text } from 'react-native'

export default Screen1 extends React.PureComponent{

 componentDidMount(){
  Orientation.lockToLandscape();
 }

 componentWillUnmount(){
  Orientation.unlockAllOrientations();
 }

 render() {
  return(<Text>Screen 1</Text>);
 }
}

Screen 2

import React from "react";
import Orientation from 'react-native-orientation';
import { Text } from 'react-native'

export default Screen2 extends React.PureComponent{

 componentDidMount(){
  Orientation.lockToPortrait();
 }

 componentWillUnmount(){
  Orientation.unlockAllOrientations();
 }

 render() {
  return(<Text>Screen 2</Text>);
 }
}

Tab Navigator

const AppNavigator = TabNavigator(  {
  Screen1: { screen: Screen1 },
  Screen2: { screen: Screen2 },
});

But it always portrait, which mean that its orientation always set base on orientation of last screen I add in TabNavigator. Any help is appreciate, thank you in advance! Edit 1 I've try StackNavigation instead, and it work. Still don't know why it's not run with TabNavigation.

Answer 1

It has been long time since I asked this questions, and react-navigation is upgrade to version 3. My solution for this problem is set orientation for tab each time it's pressed, cause tab screen isn't unmount when you click on other tab. To fix that, you can add tabBarOnPress to your navigationOptions of your screen like this

import Orientation from 'react-native-orientation';
...
class TabbarScreen1 extends Component {
  static navigationOptions = {
    ...,
    tabBarOnPress: ({ defaultHandler }) => {
      // Orientation.lockToLandscape();
      Orientation.lockToPortrait();
      defaultHandler();
    },
  }
  ...
}