useLayout hook for React Native

useLayout.js

import { useState, useCallback } from 'react';

export function useLayout() {
  const [size, setSize] = useState(null);
  const [position, setPosition] = useState(null);

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

  return [size, position, onLayout];
}

/* Usage

import React from 'react'
import { View } from 'react-native'
import { useLayout } from './hooks/useLayout';

function MyComponent() {
  const [size, position, onLayout] = useLayout();
  return <View onLayout={onLayout} />
}

*/