React Native onLayout with React Hooks

Question

I want to measure the size of a React Native View every time it renders, and save it to state. If element layout didn't change the effect should not run.

It's easy to do with a class based component, where onLayout can be used. But what do I do in a functional component where I use React Hooks?

I've read about useLayoutEffect. If that's the way to go, do you have an example of how to use it?

I made this custom hook called useDimensions. This is how far I've got:

const useDimensions = () => {
  const ref = useRef(null);
  const [dimensions, setDimensions] = useState({});
  useLayoutEffect(
    () => {
      setDimensions(/* Get size of element here? How? */);
    },
    [ref.current],
  );
  return [ref, dimensions];
};

And I use the hook and add the ref to the view that I want to measure the dimensions of.

const [ref, dimensions] = useDimensions();

return (
  <View ref={ref}>
    ...
  </View>
);

I've tried to debug ref.current but didn't find anything useful there. I've also tried measure() inside the effect hook:

ref.current.measure((size) => {
  setDimensions(size); // size is always 0
});

Answer 1

If you could like a more self-contained version of this here is a custom hook version for React Native:

const useComponentSize = () => {
  const [size, setSize] = useState(null);

  const onLayout = useCallback(event => {
    const { width, height } = event.nativeEvent.layout;
    setSize({ width, height });
  }, []);

  return [size, onLayout];
};

const Component = () => {
  const [size, onLayout] = useComponentSize();
  return <View onLayout={onLayout} />;
};