How can I get real elment by node id? react-native

Question

<TouchableHighlight onPress={this._onPress.bind(this)}>
  <Text style={{color: 'white'}}>CLOSE</Text>
</TouchableHighlight>

_onPress(e) {
  console.log(e.nativeEvent.target);
}

As above, the target is just a number called node id, but I want to get the real element. How can I do that?

Answer 1

In case somebody stumbles on that question, ReactNativeComponentTree was removed from version 0.56 or so.

However, I found a much cleaner way to detect a tap on a certain (sub-)element:

import React from 'React';
import {
  Text,
  TouchableOpacity,
  View,

  findNodeHandle
} from 'react-native';

class TestClass extends React.Component {
  onTap = (evt) => {
    // Retrieve the handle of the second <Text> node
    let elementHandle = findNodeHandle(this.refs["element"]);

    // Check if the tapped element's node-id equals the retrieved one 
    if (evt.nativeEvent.target == elementHandle) {
      // Do something when element was clicked
      console.log("Second <Text> node was tapped")
    }
  }

  render() {
    return (
      <TouchableOpacity onPress={this.onTap}>
        <View>
          <Text>Hi there!</Text>
          <Text ref="element">Only detect this element</Text>
        </View>
      </TouchableOpacity>
    );
  }
};

Basically, we are just using a reference (ref) to access the node-id of an element using findNodeHandle.

We then compare that node-id with the nativeEvent.target node-id in order to check if a sub-element was tapped.

In the above example, only the second <Text> node produces an output.

Answer 2

The code to do it changed recently when React / React Native common code was moved around, but what I would suggest is to check out Inspector code and available methods on the ReactNativeComponentTree

More specifically, the following code should do the trick for you:

var ReactNativeComponentTree = require('react/lib/ReactNativeComponentTree');
ReactNativeComponentTree.getInstanceFromNode(nativeTag);

Answer 3

This is how I ended up resolving similar situation for myself. It doesn't follow the same approach by any means but did it the trick!

onItemPressed(item) {
  this.props.navigateForward(item.sceneId);
  this.props.closeDrawer();
}

render() {
  var listItems = [];

  for (var i=0; i < this.props.navigation.scenes.length; i++) {
    var item = this.props.navigation.scenes[i];

    listItems.push(<ListItem
      onPress={this.onItemPressed.bind(this, item)}
      key={i}
      title={item.title}
      leftIcon={{name: item.icon}}
      underlayColor={colors.lightPrimary}
      containerStyle={styles.menuItemStyle}
      titleStyle={styles.menuItemTitle}
    />);
  }


  return (
    <View style={styles.container}>
      <List containerStyle={styles.listContainer}>
        {listItems}
      </List>
    </View>
  )
};

Answer 4

In react native v.0.51 you need this statement:

import ReactNativeComponentTree from 'react-native/Libraries/Renderer/shims/ReactNativeComponentTree';
ReactNativeComponentTree.getInstanceFromNode(e.target);

and ._currentElement.props changed to .memoizedProps

Answer 5

In react native v.0.42 you need this statement:

import ReactNativeComponentTree from 'react-native/Libraries/Renderer/src/renderers/native/ReactNativeComponentTree';
ReactNativeComponentTree.getInstanceFromNode(e.target)._currentElement;