React Navigation issue 1127

react-navigation-issue.js

import React, { Component } from 'react'
import { AppRegistry, View, Text, TouchableHighlight } from 'react-native'
import { StackNavigator } from 'react-navigation'

// 1.1
class SubRootOneOne extends Component {
  render() {
    return (
      <View>
        <Text>We are in root stack 1 -> sub view 1</Text>
        <TouchableHighlight onPress={() => this.props.navigation.navigate('RootTwo')}><Text>Go to stack 2</Text></TouchableHighlight>
        <TouchableHighlight onPress={() => this.props.navigation.navigate('SubRootOneTwo')}><Text>Go to sub view 2</Text></TouchableHighlight>
      </View>
    )
  }
}

// 1.2
class SubRootOneTwo extends Component {
  render() {
    return (
      <View>
        <Text>We are in root stack 1 -> sub view 2</Text>
        <TouchableHighlight onPress={() => this.props.navigation.navigate('RootTwo')}><Text>Go to stack 2</Text></TouchableHighlight>
        <TouchableHighlight onPress={() => this.props.navigation.navigate('SubRootOneOne')}><Text>Go to sub view 1</Text></TouchableHighlight>
      </View>
    )
  }
}

// 1
const RootOneStack = StackNavigator(
  {
    SubRootOneOne: { screen: SubRootOneOne },
    SubRootOneTwo: { screen: SubRootOneTwo }
  },
  {
    initialRouteName: 'SubRootOneOne'
  }
)

class RootOne extends Component {

  render() {
    return (
      <RootOneStack />
    )
  }
}

// 2.1
class SubRootTwoOne extends Component {
  render() {
    return (
      <View>
        <Text>We are in root stack 1 -> sub view 1</Text>
        <TouchableHighlight onPress={() => this.props.navigation.navigate('RootOne')}><Text>Go to stack 1</Text></TouchableHighlight>
        <TouchableHighlight onPress={() => this.props.navigation.navigate('SubRootTwoTwo')}><Text>Go to sub view 2</Text></TouchableHighlight>
      </View>
    )
  }
}

// 2.2
class SubRootTwoTwo extends Component {
  render() {
    return (
      <View>
        <Text>We are in root stack 1 -> sub view 2</Text>
        <TouchableHighlight onPress={() => this.props.navigation.navigate('RootOne')}><Text>Go to stack 1</Text></TouchableHighlight>
        <TouchableHighlight onPress={() => this.props.navigation.navigate('SubRootTwoOne')}><Text>Go to sub view 1</Text></TouchableHighlight>
      </View>
    )
  }
}

// 2
const RootTwoStack = StackNavigator(
  {
    SubRootTwoOne: { screen: SubRootTwoOne },
    SubRootTwoTwo: { screen: SubRootTwoTwo }
  },
  {
    initialRouteName: 'SubRootTwoOne'
  }
)

class RootTwo extends Component {

  render() {
    return (
      <RootTwoStack />
    )
  }
}

// Root
class App extends Component {
  render() {
    return (
      <AppNavigator />
    )
  }
}

const AppNavigator = StackNavigator(
  {
    RootOne: { screen: RootOne },
    RootTwo: { screen: RootTwo }
  },
  {
    initialRouteName: 'RootOne',
  }
)

AppRegistry.registerComponent('traede', () => App)