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

GeChiUI higher-order components (HOCs).

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@gechiui/element");

var _reactNative = require("react-native");

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * 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] = (0, _element.useState)(null);
  const onLayout = (0, _element.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 = (0, _element.createElement)(_reactNative.View, {
    style: _reactNative.StyleSheet.absoluteFill,
    onLayout: onLayout
  });
  return [observer, measurements];
};

var _default = useResizeObserver;
exports.default = _default;
//# sourceMappingURL=index.native.js.map