@gechiui/compose/build-module/hooks/use-resize-observer/index.native.js

GeChiUI higher-order components (HOCs).

import { createElement } from "@gechiui/element";

/**
 * External dependencies
 */
import { View, StyleSheet } from 'react-native';
/**
 * GeChiUI dependencies
 */

import { useState, useCallback } from '@gechiui/element';
/**
 * Hook which allows to listen the resize event of any target element when it changes sizes.
 *
 * @return {[JSX.Element, { width: number, height: number } | null]} An array of {Element} `resizeListener` and {?Object} `sizes` with properties `width` and `height`
 *
 * @example
 *
 * ```js
 * const App = () => {
 * 	const [ resizeListener, sizes ] = useResizeObserver();
 *
 * 	return (
 * 		<View>
 * 			{ resizeListener }
 * 			Your content here
 * 		</View>
 * 	);
 * };
 * ```
 *
 */

const useResizeObserver = () => {
  const [measurements, setMeasurements] = useState(null);
  const onLayout = useCallback(_ref => {
    let {
      nativeEvent
    } = _ref;
    const {
      width,
      height
    } = nativeEvent.layout;
    setMeasurements(prevState => {
      if (!prevState || prevState.width !== width || prevState.height !== height) {
        return {
          width: Math.floor(width),
          height: Math.floor(height)
        };
      }

      return prevState;
    });
  }, []);
  const observer = createElement(View, {
    style: StyleSheet.absoluteFill,
    onLayout: onLayout
  });
  return [observer, measurements];
};

export default useResizeObserver;
//# sourceMappingURL=index.native.js.map