title: React Native-- onPress extract id from "currentTarget"
body: <p>I have created a game on React and I am trying to adapt my code to React Native. One of the things that is troubling me is how to translate these three lines, since in RN there are no DOM solutions to rely on: </p>
  
  <pre><code>handleClick(e) {
  
  this.props.change(e.currentTarget.id);
  
  }  
  </code></pre>
  
  <p>What is happening here is that a stateless child is harvesting a clicked elements id (the currentTarget's) and is using it to call with it a method defined inside the parent. This kind of formulation <code>e.currentTarget.id</code> however does not work in RN. </p>
  
  <p>Is there an eloquent way to re-write this one liner in RN?</p>
  
  <p>Note: there are two questions vaguely resembling this one, <a href="https://stackoverflow.com/questions/44584585/how-to-get-element-properties-in-react-native-on-a-click-event">here</a> and <a href="https://stackoverflow.com/questions/42123545/how-to-read-props-from-a-react-native-touchable-event-currenttarget">here</a>, however the answers look like more like patches than a structural elegant solution. If you are aware of something pls post an answer.</p>
  
  <p><strong>Edit</strong>: It seems that one cannot go around ReactNativeComponentTree.</p>
  
  <p>I have that much so far but this does not work yet: </p>
  
  <pre><code>handlePress(event) {
  
  let number =  ReactNativeComponentTree.getInstanceFromNode(event.currentTarget)._currentElement.id;
  
  this.props.change(number);
  
  }  
  </code></pre>
  
  <p><strong>Second Edit:</strong> Ok maybe I should add a simplistic example of what I am trying to achieve. When I click on any of the flatlist's elements its id should be displayed on the Child's bottom . Clicking on reset will restore default state.</p>
  
  <p>Code of simplistic example below: </p>
  
  <pre><code>    import React, { Component } from 'react';
      import { AppRegistry, FlatList, StyleSheet, Text, View, Button } from 'react-native';
      import ReactNativeComponentTree from 'react-native';
  
      export default class Parent extends Component {
  
        constructor(props) {
          super(props);    
  
          this.state = {  
  
                  quotes: ["a","bnaskdkahhahskkdk","c","d","e","a","b","c","d"],
                      size: [true, true, true, true, true, true, true, true, true],
                      color: [false, false, false, false, false, false, false, false, false],
                      progress: "me"
  
          };
  
          this.change = this.change.bind(this);
          this.reset = this.reset.bind(this);
  
        }
  
        change(number) {
  
        this.setState({color: [true, true, true, true, true, true, true, true, true],              progress: number});
  
        }
  
        reset() {
  
          this.setState({color: [false, false, false, false, false, false, false, false, false],
                         progress: "me"
          });
  
        }
  
        render() {
          return (
            &lt;View style={styles.container}&gt;
      &lt;Child change={this.change} reset={this.reset} quotes={this.state.quotes} 
             size={this.state.size} color={this.state.color} 
             progress={this.state.progress} /&gt;
            &lt;/View&gt;
          );
        }
      }
  
      class Child extends Component {
  
          constructor(props) {
  
          super(props);    
  
          this.handlePress = this.handlePress.bind(this);
          this.handleReset = this.handleReset.bind(this);
        }
  
          /*handlePress(e) {
            let number = e.currentTarget.id;
              this.props.change(number);
          }*/
  
          handlePress(event) {
  
      let number =  ReactNativeComponentTree.getInstanceFromNode(event.currentTarget)._currentElement.id;
  
      this.props.change(number);
  
      }  
  
          handleReset() {
            this.props.reset();
          }
  
        render() {
  
          let ar = [];
  
          for (let i=0; i&lt;this.props.quotes.length; i++) {
            let b = {key: `${i}`, id: i, 
                classSize: this.props.size[i] ? (i%2===0 ? styles.size : styles.oddsize) : "", 
                classColor: this.props.color[i] ? (i%2===0 ? styles.color : styles.oddcolor) : ""}
            ar.push(b);      
  
          }
  
          return (
          &lt;View style={styles.container}&gt;
            &lt;Button onPress={this.handleReset} title="Reset" /&gt;
              &lt;FlatList
                data={
                  ar
                }
  
      renderItem={({item}) =&gt; &lt;Text onPress={this.handlePress} 
      style={[item.classSize, item.classColor]}&gt; {item.id+1} 
      {this.props.quotes[item.id]} &lt;/Text&gt; }
  
              /&gt; 
  
          &lt;Text style={styles.size}&gt;{this.props.progress}&lt;/Text&gt;
  
          &lt;/View&gt;
          );
        }
      }
  
  
      const styles = StyleSheet.create({
        container: {
         flex: 1,
         flexDirection: "column",
         //justifyContent: "center",
         alignItems: "center",
         paddingTop: 22,
         //backgroundColor: "purple" 
        },
        size: {
          flex: 1,
          padding: 10,
          fontSize: 18,
          backgroundColor: "grey",
          margin: 1,
          height: 44,
          color: 'gold',
          borderColor: "white",
          borderWidth: "1",
          textAlign: "center"
        },
        oddsize: {
          flex: 1,
          padding: 10,
          fontSize: 18,
          backgroundColor: "white",
          margin: 1,
          height: 44,
          color: 'gold',
          borderColor: "white",
          borderWidth: "1",
          textAlign: "center"
        },
        color: {
          flex: 1,
          padding: 10,
          backgroundColor: 'grey',
          //borderRadius: "25%",
          margin: 1,
          fontSize: 18,
          height: 44,
          color: 'pink',
          borderColor: "red",
          borderWidth: "1"
        },
      oddcolor: {
          flex: 1,
          padding: 10,
          backgroundColor: 'white',
          //borderRadius: "25%",
          margin: 1,
          fontSize: 18,
          height: 44,
          color: 'pink',
          borderColor: "red",
          borderWidth: "1"
        }
      })
  
      // skip this line if using Create React Native App
      AppRegistry.registerComponent('AwesomeProject', () =&gt; Parent);
  </code></pre>