useLayout.ts 530 B

1234567891011121314151617181920
  1. import { useState, useCallback } from 'react';
  2. import { LayoutChangeEvent } from 'react-native';
  3. type Size = {
  4. width: number;
  5. height: number;
  6. };
  7. type UseLayoutReturnType = [Size, (event: LayoutChangeEvent) => void];
  8. export const useLayout = (): UseLayoutReturnType => {
  9. const [size, setSize] = useState({ width: 0, height: 0 });
  10. const onLayout = useCallback((event: LayoutChangeEvent) => {
  11. const { width, height } = event.nativeEvent.layout;
  12. setSize({ width, height });
  13. }, []);
  14. return [size, onLayout];
  15. };