useComponentSize.ts

import { useState, useCallback } from 'react'

import { LayoutChangeEvent } from 'react-native'

interface Measurement {
  width: number
  height: number
}

type OnLayoutCallback = (event: LayoutChangeEvent) => void

/**
 * Returns a `{ width: number, height: number }` or `undefined` and an `onLayout`.
 *
 * Use the second item as the `onLayout` prop on the view you want to measure.
 */
export default function useComponentSize() {
  const [size, setSize] = useState<Measurement>()

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

  return [size, onLayout] as const
}