BottomSheet

BottomSheet is a modal panel that slides up from the bottom of the screen. Useful for actions, forms, or additional content without navigating away.

Preview

Light Dark OLED

Global

Sheet content goes here

---

Sizes

Light Dark OLED

Global

sm (25%)

md (50%)

lg (75%)

full (90%)

Size	Height	Usage
sm	25%	Quick actions, confirmations
md	50%	Default, forms, lists
lg	75%	Extended content
full	90%	Full-screen replacement

<BottomSheet visible={isOpen} onClose={close} size="sm">
  <QuickActions />
</BottomSheet>

<BottomSheet visible={isOpen} onClose={close} size="md">
  <SettingsForm />
</BottomSheet>

<BottomSheet visible={isOpen} onClose={close} size="lg">
  <DetailedContent />
</BottomSheet>

---

With Drag Handle

The drag handle provides a visual indicator that the sheet can be dismissed.

Light Dark OLED

Global

Drag to dismiss

// With handle (default)
<BottomSheet visible={isOpen} onClose={close}>
  <Content />
</BottomSheet>

// Without handle
<BottomSheet visible={isOpen} onClose={close} showHandle={false}>
  <Content />
</BottomSheet>

---

Backdrop Behavior

Control whether tapping the backdrop closes the sheet.

// Close on backdrop tap (default)
<BottomSheet visible={isOpen} onClose={close} closeOnBackdrop>
  <Content />
</BottomSheet>

// Prevent backdrop close (for required actions)
<BottomSheet visible={isOpen} onClose={close} closeOnBackdrop={false}>
  <RequiredForm />
</BottomSheet>

---

API Reference

Props

Prop	Type	Default	Description
visible	boolean	Required	Whether the sheet is visible
onClose	() => void	Required	Called when sheet should close
children	ReactNode	Required	Sheet content
size	'sm' | 'md' | 'lg' | 'full'	'md'	Height preset
height	number	-	Custom height (overrides size)
showHandle	boolean	true	Show drag handle
closeOnBackdrop	boolean	true	Close on backdrop tap
style	ViewStyle	-	Custom styles
accessibilityLabel	string	'Bottom sheet'	A11y label

---

Complete Example

import { BottomSheet, Button, Input } from '@synchronicity/react-native';
import { View, Text } from 'react-native';
import { useState } from 'react';

function ReadingNotesSheet() {
  const [isOpen, setIsOpen] = useState(false);
  const [notes, setNotes] = useState('');

  return (
    <>
      <Button onPress={() => setIsOpen(true)}>
        Add Notes
      </Button>

      <BottomSheet
        visible={isOpen}
        onClose={() => setIsOpen(false)}
        size="md"
        accessibilityLabel="Add reading notes"
      >
        <View style={styles.content}>
          <Text style={styles.title}>Reading Notes</Text>

          <Input
            value={notes}
            onChangeText={setNotes}
            placeholder="Enter your notes..."
            multiline
            numberOfLines={4}
            accessibilityLabel="Notes input"
          />

          <View style={styles.actions}>
            <Button
              kind="secondary"
              onPress={() => setIsOpen(false)}
            >
              Cancel
            </Button>
            <Button
              kind="primary"
              onPress={() => {
                saveNotes(notes);
                setIsOpen(false);
              }}
            >
              Save
            </Button>
          </View>
        </View>
      </BottomSheet>
    </>
  );
}