React Native Bottom Sheet

A React Native library for creating truly native sheet components with smooth animations and native feel across iOS and Android platforms.

Features

- 🎨 Native sheet presentation with platform-specific animations
- 📜 Smart ScrollView integration with automatic content sizing
- 🔧 Customizable appearance (corner radius, backdrop opacity, background color)
- 📱 Support for full-screen and partial height sheets on android
- 🎯 TypeScript support
- 🔄 Works seamlessly with @sigmela/router
- 📚 Can be used standalone with react-native-screens

Installation

``bash
yarn add @sigmela/native-sheet
`

$3

`bash
cd ios && pod install
`

$3

The Android setup is automatically handled by React Native's autolinking.

Usage with react-native-screens (Standalone)

You can use the library standalone with react-native-screens:

`tsx
import React, { useState, useRef } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { ScreenStack, ScreenStackItem } from 'react-native-screens';
import { NativeSheetView, Commands } from '@sigmela/native-sheet';

const SheetContent = ({ onDismiss }) => {
return (

Sheet Title

Close Sheet


);
};

const HomeScreen = ({ onOpenSheet }) => {
return (


Open Sheet


);
};

export default function App() {
const [showSheet, setShowSheet] = useState(false);
const sheetRef = useRef(null);

const openSheet = () => setShowSheet(true);

const dismissSheet = () => {
if (sheetRef.current) {
Commands.dismiss(sheetRef.current);
}
};

const onSheetDismissed = () => {
setShowSheet(false);
};

return (

screenId="home"
style={StyleSheet.absoluteFill}
headerConfig={{ title: 'Home' }}
>



{showSheet && (
screenId="sheet"
stackPresentation="transparentModal"
headerConfig={{ hidden: true }}
style={StyleSheet.absoluteFill}
contentStyle={styles.transparentContent}
stackAnimation="none"
onDismissed={onSheetDismissed}
>
ref={sheetRef}
style={styles.flex}
onDismissed={onSheetDismissed}
cornerRadius={18}
containerBackgroundColor="#ffffff"
backdropOpacity={0.5}
>



)}

);
}

const styles = StyleSheet.create({
flex: {
flex: 1,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f5f5f5',
},
sheetContent: {
padding: 20,
alignItems: 'center',
},
title: {
fontSize: 20,
fontWeight: 'bold',
marginBottom: 20,
},
button: {
backgroundColor: '#007AFF',
paddingHorizontal: 20,
paddingVertical: 12,
borderRadius: 8,
},
buttonText: {
color: 'white',
fontSize: 16,
fontWeight: '600',
},
transparentContent: {
backgroundColor: 'transparent',
},
});
`

API Reference

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| backdropOpacity | number | 0.4 | Opacity of the backdrop behind the sheet |
| cornerRadius | number | 0 | Corner radius for the sheet container |
| fullscreenTopInset | number | 0 | Top inset when sheet is in fullscreen mode |
| containerBackgroundColor | ColorValue | undefined | Background color of the sheet container |
| onAppeared | () => void | undefined | Callback fired when sheet appears |
| onDismissed | () => void | undefined | Callback fired when sheet is dismissed |

$3

#### Commands.dismiss(ref)

Programmatically dismiss the sheet.

- ref: Reference to the NativeSheetView component

`tsx
const sheetRef = useRef(null);

const dismissSheet = () => {
if (sheetRef.current) {
Commands.dismiss(sheetRef.current);
}
};
`

Examples

The repository includes a complete example app demonstrating both usage patterns:

`bash


Clone the repository

git clone https://github.com/sigmela/native-sheet.git
cd native-sheet

Install dependencies

yarn install

Run the example (iOS)

yarn example ios

Run the example (Android)

yarn example android
``

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT © sigmela