How to read requisites using React Native touchable current currentTarget?

Question

I have the following React Native code that runs the press () method when a user deletes an image. I want to get the itemIndex prop from an event object. I set a breakpoint in the press method and added some expressions to Watch. From the Watch, I determined that the goal (event) from the event is an image that is correct. The itemIndex option is also available. The element processed by currentTarget, Watch sees it as "RCTView", and I expected TouchableOpacity, so maybe there is a view under TouchableOpacity? Current position ItemIndex prop undefined, why? How can I get props from currentTarget?

I want to do this in such a way as to avoid creating add methods for each displayed item.

FYI ref={(c) => this._input = c}will not work because it starts in a loop. onPress={(e) => this.press(e, i)}creates a new function that I am trying to avoid.

Clock

• target._currentElement.props.itemIndex: 2
• target._currentElement.type.displayName: "RCTImageView"
• currentTarget._currentElement.props.itemIndex: undefined

• currentTarget._currentElement.type.displayName: "RCTView"

  press: function(event){
      var currentTarget = ReactNativeComponentTree.getInstanceFromNode(event.currentTarget);
      var target = ReactNativeComponentTree.getInstanceFromNode(event.target);
      var currentTargetIndex = currentTarget._currentElement.props.itemIndex;
      var targetIndex = target._currentElement.props.itemIndex;
      var url = this.state.data.items[currentTargetIndex].url;
      Linking.openURL(url).catch(err => console.error('An error occurred', err));
  },
  
  render: function() {
  return (
      <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.galleryView}>
          {
              this.state.data.items.map((data, i) =>
                  <TouchableOpacity itemIndex={i} key={i} activeOpacity={0.5} onPress={this.press} >
                      <Image itemIndex={i} key={i} source={{uri:data.previewImageUri}} style={styles.galleryImage} />
                  </TouchableOpacity>
              )
          }
      </ScrollView>
  );
  }
  

Answer 1

Recently, I ran into this problem, I found two different ways that you could approach this. An easier way to do this: onPresspass the index to the press function, this is the second way to do this:

press: function(event, index){
  var url = this.state.data.items[index].url;
  Linking.openURL(url).catch(err => console.error('An error occurred', err));
},

render: function() {
  return (
    <ScrollView
      horizontal={true}
      showsHorizontalScrollIndicator={false}
      style={styles.galleryView}
    >
    {
      this.state.data.items.map((data, i) =>
        <Images data={data} key={i} index={i} press={this.press} />
      )
    }
    </ScrollView>
    );
}

const Images = (props) => {
  const imageClicked = (e) => {
    props.press(e, props.index);
  }
  return (
    <TouchableOpacity activeOpacity={0.5} onPress={imageClicked} >
      <Image source={{uri:props.data.previewImageUri}} style={styles.galleryImage} />
    </TouchableOpacity>
  )
}

Answer 2

.

class Hello extends React.Component{
  state = { names: this.props.names.map((name, i) => {
      return Object.assign({
        onClick: this._onClick.bind(this, i, this.props),
      }, name)
    }),
  };

  _onClick(ind, _props, e) {
    alert('props:' + JSON.stringify(_props));
  }

  render() {
    const { names } = this.state;
    return (
      <div>
        { names.map((name, i) => (
            <div key={i}>Name: <input value={ name.first } onClick={ name.onClick } /></div>
          ))}
      </div>
  )}
}

ReactDOM.render(
  <Hello names={[{first:'aaa'},{first:'bbb'},{first:'ccc'}]}/>,
  document.getElementById('container')
);

JS Fiddle