Configuring the header bar: Setting the header title, setting and updating navigationOptions with setParams

App.js

import React, { Component } from 'react'
import { 
  StyleSheet, 
  View,
  Text,
  Platform, 
  TouchableOpacity, Button
} from 'react-native'
import { Ionicons, FontAwesome } from '@expo/vector-icons'
import { 
        createBottomTabNavigator, 
        createMaterialTopTabNavigator,
        createStackNavigator,
        createDrawerNavigator,
        TabBarBottom, tabBarIcon } from 'react-navigation'
import Detail from './Detail'

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

export class Home extends Component {
  static navigationOptions = {
    title: 'Home',
  }

  render() {
    const { navigation } = this.props

    return(
      <View style={styles.container}>
        <Text style={styles.text}>Home Screen!</Text>
        /* 1.Navigate to the Details route with params */
        <TouchableOpacity onPress={() => navigation.navigate('Detail', {itemId: 86, otherParam: 'anything you want here',})}>
          <Text style={styles.detailText}>Go to Detail</Text>
        </TouchableOpacity>
      </View>
    )
  }

}

const RootStack = createStackNavigator({
  Home:  Home,
  Detail: Detail
},{
  initialRouteName: 'Home',
})

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: 10,
    marginRight: 10
  },
  text: {
    color: 'red'
  },
  detailText: {
    color: 'blue'
  }
})

Detail.js

import React, { Component } from 'react'
import { 
  StyleSheet, 
  View,
  Text,
  Platform, 
  TouchableOpacity, Button
} from 'react-native'
import { Ionicons, FontAwesome } from '@expo/vector-icons'
import { 
        createBottomTabNavigator, 
        createMaterialTopTabNavigator,
        createStackNavigator,
        createDrawerNavigator,
        TabBarBottom, tabBarIcon } from 'react-navigation'

class Detail extends Component {

  static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('otherParam', 'A Nested Details Screen'),
    }
  }
  
  render() {
    /* Get the param, provide a fallback value if not available */
    const { navigation } = this.props
    const itemId = navigation.getParam('itemId', 'No-Id')
    const otherParam = navigation.getParam('otherParam', 'some default values')

    return(
      <View style={styles.container}>
        <Text>Details Screen!</Text>
        <Text>itemId: {JSON.stringify(itemId)}</Text>
        <Text>otherParam: {JSON.stringify(otherParam)}</Text>
        
        <TouchableOpacity onPress={() => navigation.navigate('Home')}>
          <Text style={styles.detailText}>Go to Home</Text>
        </TouchableOpacity>
        
        <Text style={{fontSize: 30}}>---------</Text>
        
        <TouchableOpacity onPress={() => navigation.push('Detail', {
          itemId: Math.floor(Math.random() * 100),
        })}>
          <Text style={styles.detailText}>Go to Detail again</Text>
        </TouchableOpacity>

        <Text style={{fontSize: 30}}>---------</Text>
        
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Text style={styles.detailText}>Go Back</Text>
        </TouchableOpacity>

        <Text style={{fontSize: 30}}>---------</Text>
        
        <TouchableOpacity onPress={() => navigation.setParams({otherParam: 'Updated!'})}>
          <Text style={styles.detailText}>Update the title</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: 10,
    marginRight: 10
  },
  text: {
    color: 'red'
  },
  detailText: {
    color: 'blue'
  }
})


export default Detail;

Configuring the header bar

This two file contain:

1. Setting the header title
2. Using params in the title
3. Updating navigationOptions with setParams

or you might want to know more feature about header bar, check this