React Native overlay library · Expo & CLI
Sheets, alerts and toasts that stack right.
Bottom sheets, confirm modals, alerts, toasts and a raw Layer primitive. Built on Reanimated and Gesture Handler, with safe areas handled for you.
Playground
Tap anything. Drag the sheet. Press Esc for back.
Five pieces. One import.
Four ready overlays for the common cases, plus the primitive they are built on when you need something of your own.
BottomSheet
Fits its content, drags to full screen, drags down to dismiss.
Props → COMPONENTConfirmModal
Confirm or cancel. Can require typing an exact word first.
Props → COMPONENTAlert
Four semantic types with icons. Center card or bottom sheet.
Props → HOOK + PROVIDERuseToast
Shows above everything, even an open sheet. Top, center or bottom.
Config → PRIMITIVELayer
Modal, backdrop, slide animation and back button. You bring the UI.
Props →The boring parts, done.
The stuff you usually patch per screen is built in.
Safe areas, automatic
Notch, Dynamic Island and home indicator insets are read from the device. Override with topInset or bottomInset if you need to.
Drag events you can use
onDrag gives you direction and a 0 to 1 fraction. onDragEnd tells you where it settled.
Android back button
Every overlay closes on back press. No BackHandler wiring per screen.
Animations on the UI thread
Reanimated drives open, close and drag, so the JS thread being busy doesn't make sheets stutter.
Theme with one prop
Color props for quick changes. Full ViewStyle and TextStyle overrides when you want exact control.
Keyboard aware
Overlays only dismiss the keyboard if it's actually open. No flash open then close glitch.
Ten lines to a sheet.
Control it with a boolean. Close it from anywhere.
import { useState } from 'react';
import { Text, Pressable } from 'react-native';
import { BottomSheet } from '@whoisrijan/react-native-layer';
export default function App() {
const [visible, setVisible] = useState(false);
return (
<>
<Pressable onPress={() => setVisible(true)}>
<Text>Open Sheet</Text>
</Pressable>
<BottomSheet visible={visible} onClose={() => setVisible(false)}>
<Text>Hello from the bottom sheet!</Text>
</BottomSheet>
</>
);
}Peer dependencies
react-native-gesture-handlerdrag gesturesreact-native-reanimatedanimationsreact-native-workletsUI thread workletsreact-native-safe-area-contextinsetsreact-native-svgalert icons
On Expo, install them with npx expo install so versions match your SDK.
Questions people ask.
Bottom sheets, toasts and confirm dialogs in React Native and Expo, answered.
How do I add a bottom sheet in React Native?
Install @whoisrijan/react-native-layer with its peer dependencies, then render <BottomSheet visible={visible} onClose={() => setVisible(false)}>. The sheet sizes to its content, drags up to full screen and drags down to dismiss.
Does react-native-layer work with Expo?
Yes. It works in Expo and bare React Native CLI projects. On Expo, install the peer dependencies with npx expo install so their versions match your SDK, and skip the Babel plugin step because babel-preset-expo adds it for you.
How do I show a toast above a bottom sheet or modal in React Native?
Wrap your app in ToastProvider and call showToast from the useToast hook. Toasts render above everything, including an open BottomSheet, Alert, ConfirmModal or Layer, on both iOS and Android.
How do I make a confirm dialog that asks the user to type DELETE?
Use ConfirmModal with showInput and validationText="DELETE". The confirm button stays disabled until the user types the exact text, and onConfirm receives the typed value.
Does the bottom sheet handle the notch, Dynamic Island and home indicator?
Yes. Safe-area insets are read from the device through react-native-safe-area-context, so the sheet stays clear of the notch, Dynamic Island and home indicator. You can override them with topInset and bottomInset.
Which libraries does react-native-layer depend on?
react-native-gesture-handler, react-native-reanimated, react-native-worklets, react-native-safe-area-context and react-native-svg. Animations run on the UI thread through Reanimated.