@applicaster/zapp-react-native-utils/reactHooks/useMeasurement.ts

Applicaster Zapp React Native utilities package

import * as React from "react";
import { MeasurementPortalContext } from "@applicaster/zapp-react-native-ui-components/Components/MeasurmentsPortal";
import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";

type MeasuredHeight = number | undefined;

export const useMeasurement = ({ renderComponent }): MeasuredHeight => {
  const [height, setHeight] = React.useState<MeasuredHeight>(undefined);

  const { measureComponent } = React.useContext(MeasurementPortalContext);

  React.useEffect(() => {
    (async () => {
      const props = {
        onLoadFinished: noop,
      };

      const result = await measureComponent(renderComponent, props); // HEAVY OPERATION

      setHeight(result.height);
    })();
  }, []);

  return height;
};