Embedding a screen within a Navigation stack using react-navigation package

App.js

import React from 'react';

// import third party libraries 
import { createStackNavigator } from 'react-navigation'

// import screens 
import MainScreen from './screens/MainScreen'
import DetailScreen from './screens/DetailScreen'

const RootStack = createStackNavigator({
  Home: MainScreen,
  Detail: DetailScreen
})

export default class App extends React.Component {
  render() {
    return (
      <RootStack/>
    );
  }
}

DetailScreen.js

import React, { Component } from 'react'
import { View, 
         Text, 
         StyleSheet, 
         TouchableHighlight, 
         FlatList, 
       } from 'react-native'

export default class DetailScreen extends Component {
  constructor(props) {
    super(props)
    const { navigation } = this.props
    const cityProp = navigation.getParam('city', 'no city name')
    this.state = {
      city: cityProp
    }
    console.log('city is ' + this.state.city)
  }

  static navigationOptions = ({ navigation }) => ({
    title: `${navigation.state.params.city}`, 
    headerTitleStyle: {textAlign: 'center', alignSelf: 'center'},
    headerStyle: {backgroundColor: 'powderblue'},
  })

  render() {
    return(
      <View style={styles.container}/>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    backgroundColor: '#fff',
  }
})

MainScreen.js

import React, { Component } from 'react'
import { View, 
         Text, 
         StyleSheet, 
         TouchableHighlight, 
         FlatList, 
       } from 'react-native'

const cities = [{key: 'London'}, 
                {key: 'New York'}, 
                {key: 'Chicago'}, 
                {key: 'Tokyo'}, 
                {key: 'Berlin'}, 
                {key: 'Paris'}, 
                {key: 'Philadelphia'}, 
                {key: 'Malmo'}, 
               ]

const itemSeperator = <View style={{backgroundColor:'powderblue', height: 0.5}}/>


export default class MainScreen extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: 'Home', 
    headerTitleStyle: {textAlign: 'center', alignSelf: 'center'},
    headerStyle: {backgroundColor: 'powderblue'},
  })

  didSelectItem() {
    console.log('item selected')
  }

  render() {
    return(
      <View 
        style={styles.container}
      >
        <FlatList
          data={cities}
          renderItem={({item}) => <TouchableHighlight 
                                    style={styles.item}
                                    onPress={() => this.props.navigation.navigate('Detail', {
                                      city: item.key
                                    })}
                                    underlayColor='white'
                                  >
                                    <Text style={styles.itemText}>{item.key}</Text>
                                  </TouchableHighlight>}
          ItemSeparatorComponent={() => itemSeperator}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    backgroundColor: '#fff'
  }, 
  item: {
    alignItems: 'flex-start',
    justifyContent: 'center',  
    height: 100, 
  }, 
  itemText: {
    fontSize: 17, 
    padding: 10, 
  },
})