Skip to main content

ManuallyRequestSheet

Use this compound component to present a custom screen before the app calls the authorization provider's requestAccess callback. It wraps @gorhom/bottom-sheet's BottomSheetModal; your app owns when the modal opens, how the user dismisses it, and what happens after Skip.

The authorization provider must receive both renderManualRequestUI and skipRequest={false} for this manual flow. The callback supplies requestAccess to your screen. See the HealthKit and Health Connect guide.

import * as React from "react";
import { BottomSheetModal } from "@gorhom/bottom-sheet";
import { DataSync } from "@ovok/native/data-sync";

function RequestHealthAccess({
  requestAccess,
  onSkip,
}: {
  requestAccess: () => void;
  onSkip: () => void;
}) {
  const sheetRef = React.useRef<BottomSheetModal>(null);

  React.useEffect(() => {
    sheetRef.current?.present();
  }, []);

  return (
    <DataSync.ManuallyRequestSheet ref={sheetRef}>
      <DataSync.ManuallyRequestSheet.Container>
        <DataSync.ManuallyRequestSheet.Title>
          Connect health data
        </DataSync.ManuallyRequestSheet.Title>
        <DataSync.ManuallyRequestSheet.Description>
          Choose whether to share your weight with this app.
        </DataSync.ManuallyRequestSheet.Description>
        <DataSync.ManuallyRequestSheet.RequestButton onPress={requestAccess}>
          Continue
        </DataSync.ManuallyRequestSheet.RequestButton>
        <DataSync.ManuallyRequestSheet.SkipButton
          onPress={onSkip}
        >
          Not now
        </DataSync.ManuallyRequestSheet.SkipButton>
      </DataSync.ManuallyRequestSheet.Container>
    </DataSync.ManuallyRequestSheet>
  );
}

Setup​

Mount BottomSheetModalProvider from @gorhom/bottom-sheet above this component. In the manual request callback, present the sheet after its ref is set. After a permission request completes, update or close the app's UI based on the provider status. The sheet does not dismiss itself when either button is pressed.

Members​

ManuallyRequestSheet accepts BottomSheetModalProps and forwards its ref to the underlying BottomSheetModal. Dynamic sizing defaults to enabled and pan-down-to-close defaults to disabled; pass the corresponding bottom-sheet props to change those defaults. The sheet background uses the active theme background color, merged with the supplied backgroundStyle.