How can I get real elment by node id? react-native
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);
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>
)
};
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.