NavStackAppDemo.js

const stuff = [
  { path: '/one', label: 'One' },
  { path: '/two', label: 'Two' },
  { path: '/three', label: 'Three' },
  { path: '/four', label: 'Four' }
]

class Item extends Component {
  render() {
    const { pathname='', isRoot, parentLocation } = this.props

    return (
      <StackMatch
        pattern={isRoot ? '/' : `${pathname}/:id`}

        renderTitle={(props) => console.log(props.location.pathname) || (
          <View style={{ backgroundColor: `hsl(${pathname.length * 20}, 50%, 50%)`, paddingTop: 15, paddingBottom: 15 }}>
            <Text style={{ color: 'white', textAlign: 'center' }}>
              TITLE: {props.pathname}
            </Text>
            {parentLocation && (
              <Back style={{ position: 'absolute', top: 15, left: 10 }}>
                <Text style={{ color: 'white' }}>&lt; Back</Text>
              </Back>
            )}
          </View>
        )}

        renderContent={(props) => (
          <ScrollView style={{ flex: 1 }}>
            {stuff.map((item, index, arr) => (
              <View key={item.path}>
                <Nav to={`${props.pathname}${item.path}`} style={{ padding: 15, borderBottomWidth: 1, borderBottomColor: '#ccc' }}>
                  <Text>{item.label}</Text>
                </Nav>
              </View>
            ))}
          </ScrollView>
        )}

        renderChild={(props) => (
          <Item {...props}/>
        )}
      />
    )
  }
}

class App extends Component {
  render() {
    return (
      <NativeRouter>
        {({ location }) => (
          <View style={{ flex: 1, marginTop: 20 }}>
            <View style={{ backgroundColor: '#333', position: 'absolute', bottom: 0, left: 0, right: 0 }}>
              <Text style={{ color: 'white', textAlign: 'center', padding: 2 }}>Location: {location.pathname}</Text>
            </View>
            <Item isRoot={true}/>
          </View>
        )}
      </NativeRouter>
    )
  }
}

export default App