react-native-acoustic-connect-beta 17.0.2 → 18.0.8

package/Examples/SampleUI/src/styles/themes/v3/DarkTheme.tsx

@@ -0,0 +1,66 @@
+import color from 'color';
+
+import { MD3LightTheme } from './LightTheme';
+import { MD3Colors, tokens } from './tokens';
+import type { MD3Theme } from '../../../types';
+
+const { palette, opacity } = tokens.md.ref;
+
+export const MD3DarkTheme: MD3Theme = {
+  ...MD3LightTheme,
+  dark: true,
+  mode: 'adaptive',
+  version: 3,
+  isV3: true,
+  colors: {
+    primary: palette.primary80,
+    primaryContainer: palette.primary30,
+    secondary: palette.secondary80,
+    secondaryContainer: palette.secondary30,
+    tertiary: palette.tertiary80,
+    tertiaryContainer: palette.tertiary30,
+    surface: palette.neutral10,
+    surfaceVariant: palette.neutralVariant30,
+    surfaceDisabled: color(palette.neutral90)
+      .alpha(opacity.level2)
+      .rgb()
+      .string(),
+    background: palette.neutral10,
+    error: palette.error80,
+    errorContainer: palette.error30,
+    onPrimary: palette.primary20,
+    onPrimaryContainer: palette.primary90,
+    onSecondary: palette.secondary20,
+    onSecondaryContainer: palette.secondary90,
+    onTertiary: palette.tertiary20,
+    onTertiaryContainer: palette.tertiary90,
+    onSurface: palette.neutral90,
+    onSurfaceVariant: palette.neutralVariant80,
+    onSurfaceDisabled: color(palette.neutral90)
+      .alpha(opacity.level4)
+      .rgb()
+      .string(),
+    onError: palette.error20,
+    onErrorContainer: palette.error80,
+    onBackground: palette.neutral90,
+    outline: palette.neutralVariant60,
+    outlineVariant: palette.neutralVariant30,
+    inverseSurface: palette.neutral90,
+    inverseOnSurface: palette.neutral20,
+    inversePrimary: palette.primary40,
+    shadow: palette.neutral0,
+    scrim: palette.neutral0,
+    backdrop: color(MD3Colors.neutralVariant20).alpha(0.4).rgb().string(),
+    elevation: {
+      level0: 'transparent',
+      // Note: Color values with transparency cause RN to transfer shadows to children nodes
+      // instead of View component in Surface. Providing solid background fixes the issue.
+      // Opaque color values generated with `palette.primary80` used as background
+      level1: 'rgb(37, 35, 42)', // palette.primary80, alpha 0.05
+      level2: 'rgb(44, 40, 49)', // palette.primary80, alpha 0.08
+      level3: 'rgb(49, 44, 56)', // palette.primary80, alpha 0.11
+      level4: 'rgb(51, 46, 58)', // palette.primary80, alpha 0.12
+      level5: 'rgb(52, 49, 63)', // palette.primary80, alpha 0.14
+    },
+  },
+};

package/Examples/SampleUI/src/styles/themes/v3/LightTheme.tsx

@@ -0,0 +1,69 @@
+import color from 'color';
+
+import { MD3Colors, tokens } from './tokens';
+import type { MD3Theme } from '../../../types';
+import configureFonts from '../../fonts';
+
+const { palette, opacity } = tokens.md.ref;
+
+export const MD3LightTheme: MD3Theme = {
+  dark: false,
+  roundness: 4,
+  version: 3,
+  isV3: true,
+  colors: {
+    primary: palette.primary40,
+    primaryContainer: palette.primary90,
+    secondary: palette.secondary40,
+    secondaryContainer: palette.secondary90,
+    tertiary: palette.tertiary40,
+    tertiaryContainer: palette.tertiary90,
+    surface: palette.neutral99,
+    surfaceVariant: palette.neutralVariant90,
+    surfaceDisabled: color(palette.neutral10)
+      .alpha(opacity.level2)
+      .rgb()
+      .string(),
+    background: palette.neutral99,
+    error: palette.error40,
+    errorContainer: palette.error90,
+    onPrimary: palette.primary100,
+    onPrimaryContainer: palette.primary10,
+    onSecondary: palette.secondary100,
+    onSecondaryContainer: palette.secondary10,
+    onTertiary: palette.tertiary100,
+    onTertiaryContainer: palette.tertiary10,
+    onSurface: palette.neutral10,
+    onSurfaceVariant: palette.neutralVariant30,
+    onSurfaceDisabled: color(palette.neutral10)
+      .alpha(opacity.level4)
+      .rgb()
+      .string(),
+    onError: palette.error100,
+    onErrorContainer: palette.error10,
+    onBackground: palette.neutral10,
+    outline: palette.neutralVariant50,
+    outlineVariant: palette.neutralVariant80,
+    inverseSurface: palette.neutral20,
+    inverseOnSurface: palette.neutral95,
+    inversePrimary: palette.primary80,
+    shadow: palette.neutral0,
+    scrim: palette.neutral0,
+    backdrop: color(MD3Colors.neutralVariant20).alpha(0.4).rgb().string(),
+    elevation: {
+      level0: 'transparent',
+      // Note: Color values with transparency cause RN to transfer shadows to children nodes
+      // instead of View component in Surface. Providing solid background fixes the issue.
+      // Opaque color values generated with `palette.primary99` used as background
+      level1: 'rgb(247, 243, 249)', // palette.primary40, alpha 0.05
+      level2: 'rgb(243, 237, 246)', // palette.primary40, alpha 0.08
+      level3: 'rgb(238, 232, 244)', // palette.primary40, alpha 0.11
+      level4: 'rgb(236, 230, 243)', // palette.primary40, alpha 0.12
+      level5: 'rgb(233, 227, 241)', // palette.primary40, alpha 0.14
+    },
+  },
+  fonts: configureFonts(),
+  animation: {
+    scale: 1.0,
+  },
+};

package/Examples/SampleUI/src/styles/themes/v3/tokens.tsx

@@ -0,0 +1,230 @@
+import { Platform } from 'react-native';
+
+import type { Font } from '../../../types';
+
+const ref = {
+  palette: {
+    primary100: 'rgba(255, 255, 255, 1)',
+    primary99: 'rgba(255, 251, 254, 1)',
+    primary95: 'rgba(246, 237, 255, 1)',
+    primary90: 'rgba(234, 221, 255, 1)',
+    primary80: 'rgba(208, 188, 255, 1)',
+    primary70: 'rgba(182, 157, 248, 1)',
+    primary60: 'rgba(154, 130, 219, 1)',
+    primary50: 'rgba(127, 103, 190, 1)',
+    primary40: 'rgba(103, 80, 164, 1)',
+    primary30: 'rgba(79, 55, 139, 1)',
+    primary20: 'rgba(56, 30, 114, 1)',
+    primary10: 'rgba(33, 0, 93, 1)',
+    primary0: 'rgba(0, 0, 0, 1)',
+    secondary100: 'rgba(255, 255, 255, 1)',
+    secondary99: 'rgba(255, 251, 254, 1)',
+    secondary95: 'rgba(246, 237, 255, 1)',
+    secondary90: 'rgba(232, 222, 248, 1)',
+    secondary80: 'rgba(204, 194, 220, 1)',
+    secondary70: 'rgba(176, 167, 192, 1)',
+    secondary60: 'rgba(149, 141, 165, 1)',
+    secondary50: 'rgba(122, 114, 137, 1)',
+    secondary40: 'rgba(98, 91, 113, 1)',
+    secondary30: 'rgba(74, 68, 88, 1)',
+    secondary20: 'rgba(51, 45, 65, 1)',
+    secondary10: 'rgba(29, 25, 43, 1)',
+    secondary0: 'rgba(0, 0, 0, 1)',
+    tertiary100: 'rgba(255, 255, 255, 1)',
+    tertiary99: 'rgba(255, 251, 250, 1)',
+    tertiary95: 'rgba(255, 236, 241, 1)',
+    tertiary90: 'rgba(255, 216, 228, 1)',
+    tertiary80: 'rgba(239, 184, 200, 1)',
+    tertiary70: 'rgba(210, 157, 172, 1)',
+    tertiary60: 'rgba(181, 131, 146, 1)',
+    tertiary50: 'rgba(152, 105, 119, 1)',
+    tertiary40: 'rgba(125, 82, 96, 1)',
+    tertiary30: 'rgba(99, 59, 72, 1)',
+    tertiary20: 'rgba(73, 37, 50, 1)',
+    tertiary10: 'rgba(49, 17, 29, 1)',
+    tertiary0: 'rgba(0, 0, 0, 1)',
+    neutral100: 'rgba(255, 255, 255, 1)',
+    neutral99: 'rgba(255, 251, 254, 1)',
+    neutral95: 'rgba(244, 239, 244, 1)',
+    neutral90: 'rgba(230, 225, 229, 1)',
+    neutral80: 'rgba(201, 197, 202, 1)',
+    neutral70: 'rgba(174, 170, 174, 1)',
+    neutral60: 'rgba(147, 144, 148, 1)',
+    neutral50: 'rgba(120, 117, 121, 1)',
+    neutral40: 'rgba(96, 93, 98, 1)',
+    neutral30: 'rgba(72, 70, 73, 1)',
+    neutral20: 'rgba(49, 48, 51, 1)',
+    neutral10: 'rgba(28, 27, 31, 1)',
+    neutral0: 'rgba(0, 0, 0, 1)',
+    neutralVariant100: 'rgba(255, 255, 255, 1)',
+    neutralVariant99: 'rgba(255, 251, 254, 1)',
+    neutralVariant95: 'rgba(245, 238, 250, 1)',
+    neutralVariant90: 'rgba(231, 224, 236, 1)',
+    neutralVariant80: 'rgba(202, 196, 208, 1)',
+    neutralVariant70: 'rgba(174, 169, 180, 1)',
+    neutralVariant60: 'rgba(147, 143, 153, 1)',
+    neutralVariant50: 'rgba(121, 116, 126, 1)',
+    neutralVariant40: 'rgba(96, 93, 102, 1)',
+    neutralVariant30: 'rgba(73, 69, 79, 1)',
+    neutralVariant20: 'rgba(50, 47, 55, 1)',
+    neutralVariant10: 'rgba(29, 26, 34, 1)',
+    neutralVariant0: 'rgba(0, 0, 0, 1)',
+    error100: 'rgba(255, 255, 255, 1)',
+    error99: 'rgba(255, 251, 249, 1)',
+    error95: 'rgba(252, 238, 238, 1)',
+    error90: 'rgba(249, 222, 220, 1)',
+    error80: 'rgba(242, 184, 181, 1)',
+    error70: 'rgba(236, 146, 142, 1)',
+    error60: 'rgba(228, 105, 98, 1)',
+    error50: 'rgba(220, 54, 46, 1)',
+    error40: 'rgba(179, 38, 30, 1)',
+    error30: 'rgba(140, 29, 24, 1)',
+    error20: 'rgba(96, 20, 16, 1)',
+    error10: 'rgba(65, 14, 11, 1)',
+    error0: 'rgba(0, 0, 0, 1)',
+  },
+
+  typeface: {
+    brandRegular: Platform.select({
+      web: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+      ios: 'System',
+      default: 'sans-serif',
+    }),
+    weightRegular: '400' as Font['fontWeight'],
+
+    plainMedium: Platform.select({
+      web: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+      ios: 'System',
+      default: 'sans-serif-medium',
+    }),
+    weightMedium: '500' as Font['fontWeight'],
+  },
+
+  opacity: {
+    level1: 0.08,
+    level2: 0.12,
+    level3: 0.16,
+    level4: 0.38,
+  },
+};
+
+const regularType = {
+  fontFamily: ref.typeface.brandRegular,
+  letterSpacing: 0,
+  fontWeight: ref.typeface.weightRegular,
+};
+
+const mediumType = {
+  fontFamily: ref.typeface.plainMedium,
+  letterSpacing: 0.15,
+  fontWeight: ref.typeface.weightMedium,
+};
+
+export const typescale = {
+  displayLarge: {
+    ...regularType,
+    lineHeight: 64,
+    fontSize: 57,
+  },
+  displayMedium: {
+    ...regularType,
+    lineHeight: 52,
+    fontSize: 45,
+  },
+  displaySmall: {
+    ...regularType,
+    lineHeight: 44,
+    fontSize: 36,
+  },
+
+  headlineLarge: {
+    ...regularType,
+    lineHeight: 40,
+    fontSize: 32,
+  },
+  headlineMedium: {
+    ...regularType,
+    lineHeight: 36,
+    fontSize: 28,
+  },
+  headlineSmall: {
+    ...regularType,
+    lineHeight: 32,
+    fontSize: 24,
+  },
+
+  titleLarge: {
+    ...regularType,
+    lineHeight: 28,
+    fontSize: 22,
+  },
+  titleMedium: {
+    ...mediumType,
+    lineHeight: 24,
+    fontSize: 16,
+  },
+  titleSmall: {
+    ...mediumType,
+    letterSpacing: 0.1,
+    lineHeight: 20,
+    fontSize: 14,
+  },
+
+  labelLarge: {
+    ...mediumType,
+    letterSpacing: 0.1,
+    lineHeight: 20,
+    fontSize: 14,
+  },
+  labelMedium: {
+    ...mediumType,
+    letterSpacing: 0.5,
+    lineHeight: 16,
+    fontSize: 12,
+  },
+  labelSmall: {
+    ...mediumType,
+    letterSpacing: 0.5,
+    lineHeight: 16,
+    fontSize: 11,
+  },
+
+  bodyLarge: {
+    ...mediumType,
+    fontWeight: ref.typeface.weightRegular,
+    fontFamily: ref.typeface.brandRegular,
+    lineHeight: 24,
+    fontSize: 16,
+  },
+  bodyMedium: {
+    ...mediumType,
+    fontWeight: ref.typeface.weightRegular,
+    fontFamily: ref.typeface.brandRegular,
+    letterSpacing: 0.25,
+    lineHeight: 20,
+    fontSize: 14,
+  },
+  bodySmall: {
+    ...mediumType,
+    fontWeight: ref.typeface.weightRegular,
+    fontFamily: ref.typeface.brandRegular,
+    letterSpacing: 0.4,
+    lineHeight: 16,
+    fontSize: 12,
+  },
+
+  default: {
+    ...regularType,
+  },
+};
+
+export const tokens = {
+  md: {
+    ref,
+    sys: {
+      typescale,
+    },
+  },
+};
+
+export const MD3Colors = ref.palette;

package/Examples/SampleUI/src/utils/BackHandler/BackHandler.native.tsx

@@ -0,0 +1,3 @@
+import { BackHandler } from 'react-native';
+
+export { BackHandler };

package/Examples/SampleUI/src/utils/BackHandler/BackHandler.tsx

@@ -0,0 +1,11 @@
+function emptyFunction() {}
+
+export const BackHandler = {
+  exitApp: emptyFunction,
+  addEventListener(): { remove: () => void } {
+    return {
+      remove: emptyFunction,
+    };
+  },
+  removeEventListener: emptyFunction,
+};

package/Examples/SampleUI/src/utils/addEventListener.tsx

@@ -0,0 +1,56 @@
+import type {
+  NativeEventSubscription,
+  EmitterSubscription,
+} from 'react-native';
+
+export function addEventListener<
+  T extends {
+    addEventListener: (
+      ...args: any
+    ) => NativeEventSubscription | EmitterSubscription;
+  } & { removeEventListener?: (...args: any) => void } & {
+    remove?: (...args: any) => void;
+  }
+>(Module: T, ...rest: Parameters<typeof Module.addEventListener>) {
+  const [eventName, handler] = rest;
+
+  let removed = false;
+
+  const subscription = Module.addEventListener(eventName, handler) ?? {
+    remove: () => {
+      if (removed) {
+        return;
+      }
+
+      Module.removeEventListener?.(eventName, handler);
+      Module.remove?.(eventName, handler);
+      removed = true;
+    },
+  };
+
+  return subscription;
+}
+
+export function addListener<
+  T extends {
+    addListener: (...args: any) => EmitterSubscription;
+    removeEventListener: (...args: any) => void;
+  }
+>(Module: T, ...rest: Parameters<typeof Module.addListener>) {
+  const [eventName, handler] = rest;
+
+  let removed = false;
+
+  const subscription = Module.addListener(eventName, handler) ?? {
+    remove: () => {
+      if (removed) {
+        return;
+      }
+
+      Module.removeEventListener(eventName, handler);
+      removed = true;
+    },
+  };
+
+  return subscription;
+}

package/Examples/SampleUI/src/utils/forwardRef.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type {
+  ForwardRefRenderFunction,
+  PropsWithoutRef,
+  RefAttributes,
+  ForwardRefExoticComponent,
+} from 'react';
+
+export type ForwardRefComponent<T, P = {}> = ForwardRefExoticComponent<
+  PropsWithoutRef<P> & RefAttributes<T>
+>;
+
+/**
+ * TypeScript generated a large union of props from `ViewProps` in
+ * `d.ts` files when using `React.forwardRef`. To prevent this
+ * `ForwardRefComponent` was created and exported. Use this
+ * `forwardRef` instead of `React.forwardRef` so you don't have to
+ * import `ForwardRefComponent`.
+ * More info: https://github.com/callstack/react-native-paper/pull/3603
+ */
+export const forwardRef: <T, P = {}>(
+  render: ForwardRefRenderFunction<T, P>
+) => ForwardRefComponent<T, P> = React.forwardRef;

package/Examples/SampleUI/src/utils/getContrastingColor.tsx

@@ -0,0 +1,15 @@
+import type { ColorValue } from 'react-native';
+
+import color from 'color';
+
+export default function getContrastingColor(
+  input: ColorValue,
+  light: string,
+  dark: string
+): string {
+  if (typeof input === 'string') {
+    return color(input).isLight() ? dark : light;
+  }
+
+  return light;
+}

package/Examples/SampleUI/src/utils/hasTouchHandler.tsx

@@ -0,0 +1,23 @@
+import type { GestureResponderEvent } from 'react-native';
+
+const touchableEvents = [
+  'onPress',
+  'onLongPress',
+  'onPressIn',
+  'onPressOut',
+] as const;
+
+type TouchableEventObject = Partial<
+  Record<
+    (typeof touchableEvents)[number],
+    (event: GestureResponderEvent) => void
+  >
+>;
+
+export default function hasTouchHandler(
+  touchableEventObject: TouchableEventObject
+) {
+  return touchableEvents.some((event) => {
+    return Boolean(touchableEventObject[event]);
+  });
+}

package/Examples/SampleUI/src/utils/roundLayoutSize.ts

@@ -0,0 +1,2 @@
+export const roundLayoutSize = (size: number): number =>
+  Math.round(size * 1000) / 1000;

package/Examples/SampleUI/src/utils/splitStyles.ts

@@ -0,0 +1,60 @@
+import type { ViewStyle } from 'react-native';
+
+type FiltersArray = readonly ((style: keyof ViewStyle) => boolean)[];
+
+type MappedTuple<Tuple extends FiltersArray> = {
+  [Index in keyof Tuple]: ViewStyle;
+} & { length: Tuple['length'] };
+
+type Style = ViewStyle[keyof ViewStyle];
+type Entry = [keyof ViewStyle, Style];
+
+/**
+ * Utility function to extract styles in separate objects
+ *
+ * @param styles The style object you want to filter
+ * @param filters The filters by which you want to split the styles
+ * @returns An array of filtered style objects:
+ * - The first style object contains the properties that didn't match any filter
+ * - After that there will be a style object for each filter you passed in the same order as the matching filters
+ * - A style property will exist in a single style object, the first filter it matched
+ */
+export function splitStyles<Tuple extends FiltersArray>(
+  styles: ViewStyle,
+  ...filters: Tuple
+) {
+  if (process.env.NODE_ENV !== 'production' && filters.length === 0) {
+    console.error('No filters were passed when calling splitStyles');
+  }
+
+  // `Object.entries` will be used to iterate over the styles and `Object.fromEntries` will be called before returning
+  // Entries which match the given filters will be temporarily stored in `newStyles`
+  const newStyles = filters.map(() => [] as Entry[]);
+
+  // Entries which match no filter
+  const rest: Entry[] = [];
+
+  // Iterate every style property
+  outer: for (const item of Object.entries(styles) as Entry[]) {
+    // Check each filter
+    for (let i = 0; i < filters.length; i++) {
+      // Check if filter matches
+      if (filters[i](item[0])) {
+        newStyles[i].push(item); // Push to temporary filtered entries array
+        continue outer; // Skip to checking next style property
+      }
+    }
+
+    // Adds to rest styles if not filtered
+    rest.push(item);
+  }
+
+  // Put unmatched styles in the beginning
+  newStyles.unshift(rest);
+
+  // Convert arrays of entries into objects
+  return newStyles.map((styles) => Object.fromEntries(styles)) as unknown as [
+    ViewStyle,
+    ...MappedTuple<Tuple>
+  ];
+}

package/Examples/SampleUI/src/utils/useAnimatedValue.tsx

@@ -0,0 +1,9 @@
+import { Animated } from 'react-native';
+
+import useLazyRef from './useLazyRef';
+
+export default function useAnimatedValue(initialValue: number) {
+  const { current } = useLazyRef(() => new Animated.Value(initialValue));
+
+  return current;
+}

package/Examples/SampleUI/src/utils/useAnimatedValueArray.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Animated } from 'react-native';
+
+export default function useAnimatedValueArray(initialValues: number[]) {
+  const refs = React.useRef<Animated.Value[]>([]);
+
+  refs.current.length = initialValues.length;
+  initialValues.forEach((initialValue, i) => {
+    refs.current[i] = refs.current[i] ?? new Animated.Value(initialValue);
+  });
+
+  return refs.current;
+}

package/Examples/SampleUI/src/utils/useIsKeyboardShown.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Keyboard, NativeEventSubscription, Platform } from 'react-native';
+
+type Props = {
+  onShow: () => void;
+  onHide: () => void;
+};
+export default function useIsKeyboardShown({ onShow, onHide }: Props) {
+  React.useEffect(() => {
+    let willShowSubscription: NativeEventSubscription | undefined;
+    let willHideSubscription: NativeEventSubscription | undefined;
+    let didShowSubscription: NativeEventSubscription | undefined;
+    let didHideSubscription: NativeEventSubscription | undefined;
+
+    if (Platform.OS === 'ios') {
+      willShowSubscription = Keyboard.addListener('keyboardWillShow', onShow);
+      willHideSubscription = Keyboard.addListener('keyboardWillHide', onHide);
+    } else {
+      didShowSubscription = Keyboard.addListener('keyboardDidShow', onShow);
+      didHideSubscription = Keyboard.addListener('keyboardDidHide', onHide);
+    }
+
+    return () => {
+      if (Platform.OS === 'ios') {
+        if (willShowSubscription?.remove) {
+          willShowSubscription.remove();
+        } else {
+          // @ts-expect-error: We keep deprecated listener remove method for backwards compat with old RN versions
+          Keyboard.removeListener('keyboardWillShow', onShow);
+        }
+
+        if (willHideSubscription?.remove) {
+          willHideSubscription.remove();
+        } else {
+          // @ts-expect-error: We keep deprecated listener remove method for backwards compat with old RN versions
+          Keyboard.removeListener('keyboardWillHide', onHide);
+        }
+      } else {
+        if (didShowSubscription?.remove) {
+          didShowSubscription.remove();
+        } else {
+          // @ts-expect-error: We keep deprecated listener remove method for backwards compat with old RN versions
+          Keyboard.removeListener('keyboardDidShow', onShow);
+        }
+
+        if (didHideSubscription?.remove) {
+          didHideSubscription.remove();
+        } else {
+          // @ts-expect-error: We keep deprecated listener remove method for backwards compat with old RN versions
+          Keyboard.removeListener('keyboardDidHide', onHide);
+        }
+      }
+    };
+  }, [onHide, onShow]);
+}

package/Examples/SampleUI/src/utils/useLayout.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+
+export default function useLayout() {
+  const [layout, setLayout] = React.useState<{
+    height: number;
+    width: number;
+    measured: boolean;
+  }>({ height: 0, width: 0, measured: false });
+
+  const onLayout = React.useCallback(
+    (e: LayoutChangeEvent) => {
+      const { height, width } = e.nativeEvent.layout;
+
+      if (height === layout.height && width === layout.width) {
+        return;
+      }
+
+      setLayout({
+        height,
+        width,
+        measured: true,
+      });
+    },
+    [layout.height, layout.width]
+  );
+
+  return [layout, onLayout] as const;
+}

package/Examples/SampleUI/src/utils/useLazyRef.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export default function useLazyRef<T>(callback: () => T) {
+  const lazyRef = React.useRef<T | undefined>();
+
+  if (lazyRef.current === undefined) {
+    lazyRef.current = callback();
+  }
+
+  return lazyRef as React.MutableRefObject<T>;
+}