Passing parameters to routes, after create a stack navigator with some routes and navigate between those routes.

App.js

import React 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 />
    )
  }
}

const Home = ({ navigation }) => (
  <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 {
  
  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>
      </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;

There are two pieces to this:

1. Pass params to a route by putting them in an object as a second parameter to the navigation.navigate function: this.props.navigation.navigate('RouteName', { /* params go here */ })
2. Read the params in your screen component: this.props.navigation.getParam(paramName, defaultValue).

---

You can also directly access the params object with this.props.navigation.state.params. This may be null if no params were supplied, and so it's usually easier to just use getParam so you don't have to deal with that case.

If you want to access the params directly through props (eg. this.props.itemId) rather than this.props.navigation.getParam, you may use a community-developed react-navigation-props-mapper package.

reference source: reactnavigation/docs/params