How do I access children components of a reference in React Native Web?

Question

I have some references in a React Native Web application - these references work on React Native, but not RNW.

For example, I have this code:

this.highlight.current._children[i].setNativeProps({ style: { backgroundColor: "black" } });
this.highlight.current._children[i]._children[0]._children[0].setNativeProps({ style: { color: "white" } })
this.highlight.current._children[i]._children[1]._children[0].setNativeProps({ style: { color: "white" } })

Which is based on this:

this.highlight = React.createRef();

Which is passed into a child component as a prop and used as such:

<View ref={this.props.highlight}>

It has several children (who have nested children as well).

However, on the web, there is no ._children at all.

How do I access children?

It's possible to do DOM manipulation directly if Platform.OS === 'web':

let dom = ReactDOM.findDOMNode(this.highlight.current);
... DOM manipulations

But this feels messy and code-duplicating if not absolutely necessary. I'd much rather apply my modifications to the reference directly via the React Native API.

EDIT: More code - here's my structure and a few relevant functions to the problem. I cut out irrelevant parts to try to make the code I posted smaller

class DetailBody extends Component {
  constructor() {
    super();
}

  render() {

    return (
      <ScrollView >
        <Text>{this.props.article.intro}</Text>
        <View ref={this.props.highlight}>
          {this.props.article.json.results.map((content, index) => (
            <View key={index} style={{}}>
              {content.pinyin ? (
                <Fragment>
                  <View>
                    <Text>
                      {content.pinyin}
                    </Text>
                  </View>
                  <View>
                    <Text>
                      {content.simplified}
                    </Text>
                  </View>
                </Fragment>
              ) : (
                  <Fragment>
                    <View>
                      <Text>
                      </Text>
                    </View>
                    <View>
                      <Text>
                        {content.characters}
                      </Text>
                    </View>
                  </Fragment>
                )
              }

            </View>
          ))}
        </View>
      </ScrollView>
    )
  }
}

class Detail extends Component {
  constructor() {
    super();
    this.state = {
      currentVal: 0,
    };
    this.traverseCharacters = this.traverseCharacters.bind(this)
    this.highlight = React.createRef();
  }

  async traverseCharacters(i) {

    this.highlight.current._children[i].setNativeProps({ style: { backgroundColor: "black" } });
    this.highlight.current._children[i]._children[0]._children[0].setNativeProps({ style: { color: "white" } })
    this.highlight.current._children[i]._children[1]._children[0].setNativeProps({ style: { color: "white" } })
    if (i > 0) {
      this.clearCharacters(i)
    }
  }

  render() {

    return (
        <DetailBody {...this.props} article={this.state.article} highlight={this.highlight} />
    );
  }
}

What do you mean by *on the web*? Can you please provide your full code? — GalAbra, Apr 17 '20 at 16:43
I mean, the code is working in React Native for iOS and Android, but it does not work for React Native Web. I will provide more code. — Steven Matthews, Apr 17 '20 at 16:44
@GalAbra Ok, edited and added most of my code structure. I left out irrelevant parts, but you should be able to get a pretty idea of what I am trying to do from what I posted — Steven Matthews, Apr 17 '20 at 16:50
I am not getting any children in ref. can you provide expo demo of your problem — Muhammad Numan, May 12 '20 at 21:55
@MuhammadNuman I mean, that's literally the problem. There AREN'T any children properties in React Native Web. Regular React Native works fine — Steven Matthews, May 13 '20 at 20:24
Here is a snack with my basic setup. You will likely not be able to find "children" in the web version. https://snack.expo.io/zGwxvjGpN — Steven Matthews, May 13 '20 at 20:31

Quentin Grisel · Accepted Answer · 2020-05-10T22:38:24.127

[Edit]: Since this 'someone's work' is for class component, here is one of my answer using dynamic refs with a functional component : Dynamic refs with functional component. It uses a useRef() hooks to store your dynamic refs, and so they're accessible wherever you want, with a specific id.

After trying things for a moment now, I cannot find a clean way of doing what you want to do. However, there is solutions for this, as you said with the ReactDOM. Another thing that came in my mind would be to set your refs in your child and then pass it to the parent.

Here is someone doing 'dynamic' ref in a .map using the key attribute, maybe it can be of use to you : Someone's work

Now, using direct manipulation isn't a good practice, so using this isntead of ReactDOM.findDOMNode... I don't really know which is one is worse but both are messy i guess.

score 1 · Answer 2 · answered May 14 '20 at 12:10

setNativeProps isn't available on the children element. You either need to provide a refs to the intended child elements yourself before calling setNativeProps on them

For a ref solution you could make use of ref callbacks like below and add a ref to each and every element that you wish to update dynamically

class DetailBody extends Component {

  setRef = (i, j, ref) => {
    if(this.highlight[i]) {
      this.highlight[i][j] = ref;
    } else {
      this.highlight[i] = {[j]: ref};
    }
  }
  render() {

    return (
      <ScrollView >
        <Text>{this.props.article.intro}</Text>
        <View>
          {this.props.article.json.results.map((content, index) => (
            <View key={index} style={{}} ref= {(ref) => this.setRef(index, 'root', ref)}>
              {content.pinyin ? (
                <Fragment>
                  <View ref= {(ref) => this.setRef(index, 0, ref)}>
                    <Text>
                      {content.pinyin}
                    </Text>
                  </View>
                  <View ref= {(ref) => this.setRef(index, 1, ref)}>
                    <Text>
                      {content.simplified}
                    </Text>
                  </View>
                </Fragment>
              ) : (
                  <Fragment>
                    <View ref= {(ref) => this.setRef(index, 0, ref)}>
                      <Text>
                      </Text>
                    </View>
                    <View ref= {(ref) => this.setRef(index, 1, ref)}>
                      <Text>
                        {content.characters}
                      </Text>
                    </View>
                  </Fragment>
                )
              }

            </View>
          ))}
        </View>
      </ScrollView>
    )
  }
}

class Detail extends Component {
  constructor() {
    super();
    this.state = {
      currentVal: 0,
    };
    this.traverseCharacters = this.traverseCharacters.bind(this)
    this.highlight = {};
  }

  async traverseCharacters(i) {

    this.highlight[i].root.setNativeProps({ style: { backgroundColor: "black" } });
    this.highlight[i][0].setNativeProps({ style: { color: "white" } })
    this.highlight[i][1].setNativeProps({ style: { color: "white" } })
  }

  render() {

    return (
        <DetailBody {...this.props} article={this.state.article} highlight={this.highlight} />
    );
  }
}

Let me know if this still doesn't work for you. I have tested this logic without an extra nested mapping — Shubham Khatri, May 14 '20 at 12:11

How do I access children components of a reference in React Native Web?

2 Answers2