React Native Pass Selected asyncStorage value to Popup onPress

Question

I'm trying to make a popup screen for the value I have selected. Which is in the localstorage.

I am trying to pass the value firstname, lastname, phone to Popup.

Like this

I want the value "h" to show up next to 'Call' and 'Text'.

      {
    favContact.map((obj,i)=>{
      return (
        <View style={[HomePageStyles.ContactList, {width:95}]}>

        {/* CONTACT CALL/MESSAGE POPUP */}
        <ContactPopup Popup={Popup} setPopup={setPopup} />

        {/* CONTACT  */}
        <TouchableOpacity onPress={() => {setPopup(true)}
        }>

            {/* CONTACT ICON */}
            { showIcon }

            {/* CONTACT NAME */}
            <Text numberOfLines={1} style={[Fonts.ContactNameFonts, {textAlign:'center', fontSize:11, paddingHorizontal:15}]}>{obj.firstname}</Text>
        </TouchableOpacity>
        {/* END OF CONTACT */}
        </View>
            )
          })
        }

This is my Favorite Contact Page.

<Modal isVisible={props.Popup} hideModalContentWhileAnimating={true}
backdropTransitionOutTiming={0}
onBackdropPress={() => props.setPopup(false)}
onSwipeComplete={() => props.setPopup(false)}
swipeDirection="down"
animationInTiming={550} animationOutTiming={850}>

  <View style={AddPopupStyles.Container}>

    <View style={AddPopupStyles.ImgCont}>

      <Image style={AddPopupStyles.Img}source={require('../assets/icons/swipe.png')}/>

    </View>

    <Text style={AddPopupStyles.Heading}>{firstname}{lastname}</Text>

      <TouchableOpacity style={AddPopupStyles.TextCont}
                        onPress = {() => Communications.phonecall( phone , true)}        
      >
        <Text style={AddPopupStyles.Text}>Call {firstname}{lastname}</Text>
      </TouchableOpacity>

      <TouchableOpacity style={AddPopupStyles.TextCont}
                        onPress={()  => Communications.text(phone, 'Hey ' + firstname + ', im in need of a Ryde. Are you able to pick me up? This is my current location: ' )}
      >
        <Text style={AddPopupStyles.Text}>Text</Text>
      </TouchableOpacity>

      <TouchableOpacity style={AddPopupStyles.TextCont}
        onPress={() => {props.setPopup(false)}}
      >
        <Text style={[AddPopupStyles.Text, AddPopupStyles.CancelText]}>
          Cancel
        </Text>
      </TouchableOpacity>

  </View>

</Modal>

This is my pop up page.

Please help me masters.

Answer 1

     {
    favContact.map((obj,i)=>{
      return (
        <View style={[HomePageStyles.ContactList, {width:95}]}>

        {/* CONTACT CALL/MESSAGE POPUP */}
        <ContactPopup Popup={Popup} setPopup={setPopup} details = {this.state.popupDetails} />

        {/* CONTACT  */}
        <TouchableOpacity onPress={() => {this.onPressContact(obj)}
        }>

            {/* CONTACT ICON */}
            { showIcon }

            {/* CONTACT NAME */}
            <Text numberOfLines={1} style={[Fonts.ContactNameFonts, {textAlign:'center', fontSize:11, paddingHorizontal:15}]}>{obj.firstname}</Text>
        </TouchableOpacity>
        {/* END OF CONTACT */}
        </View>
            )
          })
        }


    onPressContact = (contactDetails) => {
          this.setState({popupDetails: contactDetails})
          setPopup(true)
       }

and next in popup screen 

    <Modal isVisible={props.Popup} hideModalContentWhileAnimating={true}
backdropTransitionOutTiming={0}
onBackdropPress={() => props.setPopup(false)}
onSwipeComplete={() => props.setPopup(false)}
swipeDirection="down"
animationInTiming={550} animationOutTiming={850}>

  <View style={AddPopupStyles.Container}>

    <View style={AddPopupStyles.ImgCont}>

      <Image style={AddPopupStyles.Img}source={require('../assets/icons/swipe.png')}/>

    </View>

    <Text style={AddPopupStyles.Heading}>{props.details.firstname}{props.details.lastname}</Text>

      <TouchableOpacity style={AddPopupStyles.TextCont}
                        onPress = {() => Communications.phonecall( phone , true)}        
      >
        <Text style={AddPopupStyles.Text}>Call {props.details.firstname}{props.details.lastname}</Text>
      </TouchableOpacity>

      <TouchableOpacity style={AddPopupStyles.TextCont}
                        onPress={()  => Communications.text(phone, 'Hey ' + props.details.firstname + ', im in need of a Ryde. Are you able to pick me up? This is my current location: ' )}
      >
        <Text style={AddPopupStyles.Text}>Text</Text>
      </TouchableOpacity>

      <TouchableOpacity style={AddPopupStyles.TextCont}
        onPress={() => {props.setPopup(false)}}
      >
        <Text style={[AddPopupStyles.Text, AddPopupStyles.CancelText]}>
          Cancel
        </Text>
      </TouchableOpacity>

  </View>

</Modal>

In brief, here what i have done is on click of contact i'm calling a function onPressContact and storing the obj of that particular contact and then sending to popup using details props in contactPopup