useRef object returning undefined in React/React-Native

Question

I'm getting undefined when I try to access the ref object. I'm mapping an array of images and attempting to access individual ones through useRef.

First, I initialized the useRef as following:

const gridImages = useRef([React.createRef(), React.createRef()])

And then mapping of the images:

<View style={styles.grid}>
    {images.map((src, index) => {
        const style = index === activeIndex ? activeIndexStyle : undefined
        return (
            <TouchableWithoutFeedback key={index} onPress={() => handleOpenImage(index)}>
                <Animated.Image 
                    source={{ uri: src }}
                    style={[ styles.gridImage, style ]}
                    ref={gridImages.current[index]}
                />
            </TouchableWithoutFeedback>
        )
    })}
</View>

When I invoke the following method, I get an error saying

undefined is not an object (evaluating 'gridImages.current[index].getNode')

When I console.log the object gridImages.current shows the methods with no problem, but as soon as I include the index, I get the undefined error.

const handleOpenImage = index => {
    console.log(gridImages.current[index])
    gridImages.current[index].getNode().measure((x, y, width, height, pageX, pageY) => {
        position.setValue({
            x: pageX,
            y: pageY,
        })

        size.setValue({
            x: width,
            y: height,
        })
        setActiveImage(images[index])
        setActiveIndex(index)
    })
}

score 1 · Accepted Answer · answered Sep 15 '19 at 01:58

I believe the issue is that you need to have another .current after the index.

For example: gridImages.current[index].current since you're using both useRef and React.createRef

Here is a simplified code sample with only the critical pieces (please excuse the conversion to ReactDOM instead of React Native but the principles should still be identical):

function Comp(props) {
  const { images } = props;
  const gridImages = React.useRef(images.map(_ => React.createRef()));

  const handleClick = index => {
    console.log(gridImages.current[index].current);
  };

  return (
    <div>
      {images.map((src, index) => (
        <img
          onClick={() => handleClick(index)}
          src={src}
          key={index}
          ref={gridImages.current[index]}
        />
      ))}
    </div>
  );
}

function App() {
  return (
    <Comp
      images={[
        "https://placekitten.com/100/100",
        "https://placekitten.com/101/101",
        "https://placekitten.com/102/102"
      ]}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Note, I also updated the useRef portion to be dynamic based on the number of images since that seems to be dynamic in a way suggested in this answer: https://stackoverflow.com/a/55996413/2690790

you're correct! Could you explain `images.map(_ => React.createRef())` a little futher? I'm new to useRef and if I understand correctly, we're mapping over the images and creating references as the initial value for gridImages? — Kevvv, Sep 15 '19 at 02:03
@Kevvv yea exactly. If you know you will always have exactly two images, the code you provided will work fine! This will handle 0 to `n` images now (assuming that's dynamic). Note: that if the number of images _changes_ this will only work for the initial value for `useRef`. Based on this question: https://stackoverflow.com/q/55995760/2690790 — skovy, Sep 15 '19 at 02:05
if an image is assigned a reference through `images.map(_ => React.createRef())`, what exactly is happening when `ref={gridImages.current[index]}` happens within either `div` or `img`? — Kevvv, Sep 15 '19 at 02:11
The images aren't assigned with `images.map(_ => React.createRef())`, a reference is being instantiated (created) created for each image so we have exactly the number of references as we have images. Then at `ref={gridImages.current[index]}`, React, internally is roughly doing `ref={gridImages.current[index]}.current = thisImageReference` so later on we have access to it via `gridImages.current[index]}.current` — skovy, Sep 15 '19 at 02:25

useRef object returning undefined in React/React-Native

1 Answers1