how to access property of React Native tag or element in onPress function?

Question

I want to access React Native element property in onPress function i tried it with event.target and ReactNativeComponentTree but it not works , i want to access audioPath property in Onpress function

  <Ionicons
  name="ios-play"
  size={35}
  color={this.state.playAudio ? "red" : "blue"}
  style={{
      left: 90,
      position: "relative",
      shadowColor: "#000",
      shadowOffset: { width: 0, height: 0 },
      shadowOpacity: 0.5,
      backgroundColor: "transparent"
  }}
  audioPath= {audioPath}
  onPress={this.audioPathFunction.bind(this)}
  />

Actually I want to render multiple ioniIcons but problem is that all have the same value I want the ioniIcons to keep its own value of audiopath ,the method you ask give same value to all the ioniIcons when I render multiple time — Waqar Amjad, Aug 10 '19 at 05:25
yes , actually it's a voice chat app in which each recording have a different path , — Waqar Amjad, Aug 10 '19 at 05:35
@WaqarAmjad Check out my answer and let me know if it helps. — ravibagul91, Aug 10 '19 at 05:50

score 0 · Answer 1 · answered Aug 10 '19 at 03:35

 <Ionicons
  name="ios-play"
  size={35}
  color={this.state.playAudio ? "red" : "blue"}
  style={{
      left: 90,
      position: "relative",
      shadowColor: "#000",
      shadowOffset: { width: 0, height: 0 },
      shadowOpacity: 0.5,
      backgroundColor: "transparent"
  }}
  audioPath= {audioPath}
  onPress={()=> this.audioPathFunction(audioPath)}
  />

Depends. you can access it inside , if its state variable/class variable u can access it anywhere even inside onPress function. If its only available in render() use pointer functions like above (which is not a good way)

Actually I want to render multiple ioniIcons but problem is that all have the same value I want the ioniIcons to keep its own value of audiopath ,the method you ask give same value to all the ioniIcons when I render multiple time — Waqar Amjad, Aug 10 '19 at 04:59

score 0 · Answer 2 · answered Aug 10 '19 at 05:49

0

Actually I want to render multiple ioniIcons but problem is that all have the same value I want the ioniIcons to keep its own value of audiopath ,the method you ask give same value to all the ioniIcons when I render multiple time

For this, you can create an array of audioPath and iterate over it to create multiple Ionicons like,

conat audioPathArray = [audiopath1,audiopath2,audiopath3];

Now you can iterate over array,

{audioPathArray.map(audiopath=>{
  <Ionicons
    name="ios-play"
    size={35}
    color={this.state.playAudio ? "red" : "blue"}
    style={{
      left: 90,
      position: "relative",
      shadowColor: "#000",
      shadowOffset: { width: 0, height: 0 },
      shadowOpacity: 0.5,
      backgroundColor: "transparent"
    }}
    audioPath= {audioPath}
    onPress={()=> this.audioPathFunction(audioPath)}
   />
 })
}

This way you will get as many Ionicons as audioPath's, and clicking on each Ionicons will give you different audioPath.

And finally your function,

audioPathFunction = (audioPath) => {
   console.log(audioPath)
}

answered Aug 10 '19 at 05:49

ravibagul91

20,072
5
36
59

is there not any way to access React native element property because the method you tell will make my work complex because my chat contain audio and text both just like in below example i want to get the value of name by onPress – Waqar Amjad Aug 10 '19 at 06:01
@WaqarAmjad If you want to use the button, you can wrap the OnPress function around the icon using touchableOpacity. – hong developer Aug 10 '19 at 06:04
So are you able to render multiple `Ionicons` with different `audioPath`? – ravibagul91 Aug 10 '19 at 06:04
@ravibagul91 with For Each loop yes i can render multiple Ionicons with different audioPath but that's not my desire output it make my work complex to do , simple thing tell me , is it possible to access element property just like event.target.value – Waqar Amjad Aug 10 '19 at 06:21
I think No. here is the good source of info - https://github.com/facebook/react-native/issues/7892 – ravibagul91 Aug 10 '19 at 06:40
Also check this - https://stackoverflow.com/questions/44423132/get-name-of-button-onpress-in-react-native – ravibagul91 Aug 10 '19 at 06:41

how to access property of React Native tag or element in onPress function?

2 Answers2