react-native-navigator-orientation-bug.md

const React = require('react-native')

var {
  AppRegistry,
  StyleSheet,
  Navigator,
  View,
  Text,
  TouchableHighlight,
  Component,
  PropTypes
} = React

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    justifyContent: 'center',
    backgroundColor: '#ffffff'
  },
  subContainer: {
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    flex: 1
  },
  button: {
    flex: 1,
    borderColor: '#ff9900',
    borderWidth: 2,
    color: '#ff9900',
    fontSize: 15,
    fontWeight: 'bold',
    padding: 5,
    backgroundColor: 'rgba(0,0,0,0)'
  },
  navigator: {
    flex: 1
  }
})

class AnyView extends Component {
  constructor (props) {
    super(props)
    this.state = {
      isBase: (this.props.title.toLowerCase() === 'base')
    }
    this.onPressClick = this.onPressClick.bind(this)
  }
  onPressClick () {
    if (this.state.isBase) {
      // go to other view
      this.props.navigator.push({
        state: 'image',
        sceneConfig: Navigator.SceneConfigs.FloatFromRight
      })
    }else {
      // go back
      this.props.navigator.pop()
    }
  }
  render () {
    return (
      <View style={[styles.subContainer, {backgroundColor: (this.state.isBase ? '#44ffff' : '#ffff44')}]}>
        <Text>{this.props.title}</Text>
        <TouchableHighlight
          onPress={() => this.onPressClick()}
          underlayColor={(this.state.isBase ? '#44ffff' : '#ffff44')}
          style={{width: 70}}
          >
          <Text style={styles.button}>{this.props.text}</Text>
        </TouchableHighlight>
      </View>
    )
  }
}

AnyView.propTypes = {
  navigator: PropTypes.object
}

class ORIENTATION extends Component{
  constructor (props) {
    super(props)

    this.onLayoutChange = this.onLayoutChange.bind(this)
    this.renderScene = this.renderScene.bind(this)
  }
  onLayoutChange (e) {
    console.log('APP LAYOUT CHANGE', e.nativeEvent.layout)
  }
  renderScene (route, navigator) {
    console.log('APP RENDER SCENE:', route.state.toLowerCase(), navigator.getCurrentRoutes())
    let Component = AnyView
    let title = ''
    let text = ''
    switch (route.state.toLowerCase()) {
      case 'base':
        title = 'Base'
        text = 'Go to image'
        break
      case 'image':
        title = 'Image'
        text = 'Back'
        break
      default:
        Component = <View />
        break
    }

    return (
      <View style={styles.container}>
        <Component navigator={navigator} {...route.props} title={title} text={text} style={{flex: 1}} />
      </View>
    )
  }
  render () {
    return (
      <View style={{flex: 1}} onLayout={this.onLayoutChange}>
        <Navigator
          style={[styles.navigator]}
          initialRoute={{
              state: 'base',
              sceneConfig: Navigator.SceneConfigs.FloatFromLeft
            }}
          renderScene={this.renderScene}
          configureScene={(route) => (Object.assign({gestures: route.gestures}, route.sceneConfig || Navigator.SceneConfigs.FloatFromRight))}
          />
      </View>
    )
  }
}

AppRegistry.registerComponent('ORIENTATION', () => ORIENTATION)