ManuallyRequestSheet.Container

Content container component that provides proper padding, spacing, and safe area handling for the bottom sheet modal content.

Quick Example

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

const ContainerExample = () => {
  const sheetRef = React.useRef<BottomSheetModal | null>(null);

  return (
    <>
      <Button
        onPress={() => {
          sheetRef.current?.present();
        }}
      >
        Open Sheet
      </Button>
      {/* It's important to wrap container with DataSync.ManuallyRequestSheet */}
      <DataSync.ManuallyRequestSheet ref={(ref) => (sheetRef.current = ref)}>
        <DataSync.ManuallyRequestSheet.Container>
          <Text>Hello</Text>
        </DataSync.ManuallyRequestSheet.Container>
      </DataSync.ManuallyRequestSheet>
    </>
  );
};

export default ContainerExample;

Props

Prop	Type	Required	Default	Description
children	React.ReactNode	✓	-	Child components to render
style	ViewStyle	-	-	Additional styling (merged with default)

Inherits all BottomSheetViewProps from @gorhom/bottom-sheet

Component Behavior

The Container component provides:

1. Consistent Padding: Standard padding around all content
2. Safe Area Handling: Proper bottom safe area insets
3. Flex Layout: Vertical flex layout with proper spacing
4. Gap Management: Consistent spacing between child elements
5. Scroll Support: Built-in scroll capabilities when content overflows

Styling

Theme Values Used

• theme.spacing(3) - Container padding (horizontal and top)
• theme.spacing(5) - Gap between child components
• bottom + theme.spacing(3) - Safe area bottom padding