Skip to main content

ManuallyRequestSheet.RequestButton

Primary action button component that handles authorization requests with Material Design contained styling and theme integration.

Quick Example​

import { DataSync } from "@ovok/native";
import { BottomSheetModal } from "@gorhom/bottom-sheet";
import { HKQuantityTypeIdentifier } from "@kingstinct/react-native-healthkit";
import React from "react";
import { Text } from "react-native-paper";

const RequestButtonExample = () => {
  const manuallyRequestSheetRef = React.useRef<BottomSheetModal | null>(null);
  const shouldOpenManuallyRequestSheet = React.useRef(true);

  const onRefManuallyRequestSheet = React.useCallback(
    (ref: BottomSheetModal | null) => {
      // This is a workaround to ensure the sheet is expanded when the ref is set (after the component is mounted)
      // if you need to open sheet on button press, you can use the `shouldOpenManuallyRequestSheet` ref and remove the `if` check

      manuallyRequestSheetRef.current = ref;

      if (shouldOpenManuallyRequestSheet.current) {
        ref?.present();
        shouldOpenManuallyRequestSheet.current = false;
      }
    },
    [],
  );

  const renderManualRequestUI = React.useCallback(
    (requestAccess: () => void) => {
      return (
        <DataSync.ManuallyRequestSheet ref={onRefManuallyRequestSheet}>
          <DataSync.ManuallyRequestSheet.Container>
            <DataSync.ManuallyRequestSheet.RequestButton
              onPress={requestAccess}
            >
              Request
            </DataSync.ManuallyRequestSheet.RequestButton>
          </DataSync.ManuallyRequestSheet.Container>
        </DataSync.ManuallyRequestSheet>
      );
    },
    [onRefManuallyRequestSheet],
  );

  return (
    // This component is wrapped in the AppleHealthAuthorizationProvider
    // to handle the authorization process
    <DataSync.AppleHealthAuthorizationProvider
      readIdentifiers={[HKQuantityTypeIdentifier.bodyMass]}
      renderManualRequestUI={renderManualRequestUI}
      skipRequest={false}
    >
      {/* You have to be authorized to sync the health data */}
      <Text>Hello</Text>
    </DataSync.AppleHealthAuthorizationProvider>
  );
};

export default RequestButtonExample;

Props​

PropTypeRequiredDefaultDescription
childrenReact.ReactNode✓-Button text content
modeButtonMode-containedButton style mode
onPress() => void--Button press handler
loadingboolean-falseShow loading state
disabledboolean-falseDisable button
testIDstring--Test identifier

Inherits all ButtonProps from react-native-paper

Component Behavior​

The RequestButton component provides:

  1. Primary Action: Uses Material Design contained mode by default for prominence
  2. Loading State: Built-in loading indicator during async operations
  3. Disabled State: Automatic styling when button is disabled
  4. Theme Integration: Uses theme primary color for contained styling
  5. Press Handling: Supports async operations with proper feedback

Styling​

Theme Colors Used​

  • theme.colors.primary - Button background (contained mode)
  • theme.colors.onPrimary - Button text color (contained mode)
  • theme.colors.primary - Text color (outlined/text modes)