Persistent sheets are pre-mounted bottom sheets that remain in memory even when closed. Unlike standard portal sheets, they do not remount when opened, which provides two main benefits:
- Instant Open: No mount delay when triggering the sheet.
- State Preservation: Internal component state (like form inputs, scroll positions, or local
useState values) is preserved between open/close cycles.
When to use them:
- Frequently accessed UI (e.g., Scanners, Cameras, Quick Actions).
- Complex workflows (e.g., Multi-step wizards, Media players).
- Any scenario where mount delay is noticeable.
import {
BottomSheetPersistent,
useBottomSheetControl,
} from 'react-native-bottom-sheet-stack';
function App() {
return (
<BottomSheetManagerProvider id="main">
<BottomSheetScaleView>
<HomeScreen />
</BottomSheetScaleView>
<BottomSheetHost />
{/* Persistent sheet - always mounted */}
<BottomSheetPersistent id="scanner">
<ScannerSheet />
</BottomSheetPersistent>
</BottomSheetManagerProvider>
);
}
function HomeScreen() {
const scanner = useBottomSheetControl('scanner');
return (
<Button
title="Open Scanner"
onPress={() => scanner.open({ scaleBackground: true })}
/>
);
}
