A React Native component that declaratively adds bottom sheets to our screens by providing an imperative API that can be called from anywhere in the app (even outside of components) to show a fully customizable bottom sheet with the ability to wait for it to resolve and get a response back.
This library relies on the modal component of Gorhom’s /bottom-sheet and accepts the same props and children.
How to use it:
1. Install and import.
# Yarn $ yarn add react-native-magic-sheet # NPM $ npm i react-native-magic-sheet
2. Basic usage.
import {GestureHandlerRootView} from 'react-native-gesture-handler'; import {BottomSheetModalProvider} from '@gorhom/bottom-sheet'; import {MagicSheetPortal} from 'react-native-magic-sheet'; export default function App() { return ( <OtherProviders> <GestureHandlerRootView style={{flex: 1}}> <BottomSheetModalProvider> <MagicSheetPortal {...defaultProps}/> // <-- On the top of the app component hierarchy <AppComponents /> // The rest of the app goes here </BottomSheetModalProvider> </GestureHandlerRootView> </OtherProviders> ); }
import React from 'react'; import { View, Text, TouchableOpacity } from 'react-native'; import { magicSheet } from 'react-native-magic-sheet'; const PickerSheet = (someProps) => ( <View> <TouchableOpacity onPress={() => { magicSheet.hide({userName: "Rod", id:1}) }}> // This will hide the sheet, resolve the promise with the passed object <Text>Return user</Text> </TouchableOpacity> </View> ); const handlePickUser = async () => { // We can call it with or without props, depending on the requirements. const result = await magicSheet.show(PickerSheet); //OR (with props) const result = await magicSheet.show(() => <PickerSheet {...someProps}/>); console.log(result) // will show {userName: "Rod", id:1}, or undefined if sheet is dismissed }; export const Screen = () => { return ( <View> <TouchableOpacity onPress={handlePickUser}> <Text>Show sheet</Text> </TouchableOpacity> </View> ); };
Preview:
Download Details:
Author: RodSarhan
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/RodSarhan/react-native-magic-sheet
License: MIT