How to get data from another screen to home screen which doesn't have any class and have to set in HeaderRight part in react native

Question

Please find the code below for Stack navigation,in this page am having only stack and drawer navigation , when i click on "Pickup Location" which is in "Header Right" it will open another page (SubProductPage) there it will display all address, on press of any address in that page,i have to show that address details in "Pickup location" place which is present in another page.

How to do that

const HomeNavigation = createStackNavigator({
  HomeHomePageDrawer:HomePage,
  DeliveryDetails:{
    screen:DeliveryAddressPage,
    navigationOptions:{
      header:null
    }
  },
  SubProductPage:{
    screen:SubProductPage,
    navigationOptions:{
      header:null
    }
  }
},
{
  defaultNavigationOptions:({navigation})=>{
    return{
      headerStyle:{
        backgroundColor:'rgb(28, 34, 36)'
      },
      headerTintColor:'#fff',
      headerTitleStyle:{
        fontWeight:'bold',
        textAlign:'center',
        flex:1
      },
      headerLeft:(
        <View>
          <Icons name="md-menu" style={{fontSize:35,color:'white',paddingLeft:10}} onPress={()=>navigation.openDrawer()} />
        </View>
      ),
      headerRight:(
        <View style={{flex:1,flexDirection:'row'}} >
          <View style={{marginRight:40}}>
            <Text style={{fontSize:10,marginLeft:10,fontWeight:'200',color:'white'}}>Pickup Location</Text>
            <View>
              <TouchableOpacity style={{flexDirection:'row'}} onPress={() =>navigation.navigate('DeliveryDetails')}>
                <Text style={{fontSize:18,marginLeft:10,fontWeight:'900',color:'white',overflow:'hidden',width:230}} numberOfLines={1}>Pickup Location</Text>
                <SimpleLineIcons name="pencil" style={{fontSize:17,color:'white',paddingLeft:10}} />
              </TouchableOpacity>
            </View>
          </View>
          <MaterialIcons name="logout" style={{fontSize:30,color:'white',paddingRight:5}} onPress={() =>navigation.navigate('Auth')} /> 
        </View>
      )
    }
  }
})

after clicking on pencil icon below screen will appear

after clicking on address it should appear on Pickup location

Answer 1

You can pass params using navigation params in react-navigation.

this.props.navigation.navigate('RouteName', { /* params go here */ })

You can find more about it from below link

https://reactnavigation.org/docs/en/params.html