React Native - Traverse through all elements

57 views Asked by At

I need to examine all the elements within the following layout of React Native app:

const App: () => Node = () => {
  return (
    <Debugger>
      <SafeAreaView style={styles.body}>
          <ScrollView>            
            <BreadcrumbItem></BreadcrumbItem>
            <TextInput
              value={v}
              onChangeText={(v) => setV(v)}
            />
... code omitted  

The BreadcrumbItem represents the following structure

function BreadcrumbItem() {
  return (
    <View>
         <Button title="Press me" onPress={this.onPress} style={styles.btn}/>
    </View>
  );
}

I have access to the children that are under the Debugger element. However, I cannot dive into the BreadcrumbItem to access the View and Button elements because the props.children of the BreadcrumbItem is "undefined". Here is a short implementation of the Debugger component:

const Debugger = ({ children }) => { 
   const traverseReactTree = (node) => {
    if (React.isValidElement(node)) {
      // // Here is where the issue arises: the `props.children` property of BreadcrumbItem` is undefined.
      if (node.props.children) {
        // code omitted
        const updatedChildren = traverseReactTree(child);
        return updatedChildren
      }
      return node;
    }
  const updatedChildren = traverseReactTree(children);
  return updatedChildren;
}

Of course, I can wrap the content of BreadcrumbItem with Debugger, but this does not meet my requirements.

Any advice would be appreciated.

0

There are 0 answers