https://github.com/rodsarhan/react-native-magic-sheet
:sparkles: A bottom sheet library that can be called imperatively from anywhere!
https://github.com/rodsarhan/react-native-magic-sheet
Last synced: about 1 year ago
JSON representation
:sparkles: A bottom sheet library that can be called imperatively from anywhere!
- Host: GitHub
- URL: https://github.com/rodsarhan/react-native-magic-sheet
- Owner: RodSarhan
- License: mit
- Created: 2022-08-30T15:47:53.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-14T09:40:42.000Z (over 2 years ago)
- Last Synced: 2025-03-28T10:01:44.532Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-magic-sheet
- Size: 45.4 MB
- Stars: 25
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
_A Bottom Sheet library that can be called imperatively from anywhere!_
## React Native Magic Sheet :sparkles:
Inspired by [react-native-magic-modal](https://github.com/GSTJ/react-native-magic-modal/) This library aims to solve the need to declaretively add 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 customizeable 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/bottom-sheet](https://gorhom.github.io/react-native-bottom-sheet/modal/) and accepts the same props and children.
Therefore the setup proccess of [@gorhom/bottom-sheet](https://gorhom.github.io/react-native-bottom-sheet/modal/) should be followed in order for this to work
(ex: installing gesture handler, reanimated2, and @gorhom/bottom-sheet v4)
## 📸 Examples
| IOS | Android |
| ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| 
| 
|
## 🛠 Installation
```sh
yarn add react-native-magic-sheet
```
## ⚙️ Usage
First, insert a `MagicSheetPortal` in the top of the application and make sure the app is wrapped with GestureHandlerRootView & BottomSheetModalProvider.
You can add the default props and styles of type BottomSheetProps (optional as you can override the props when calling the sheet later).
```js
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 (
// <-- On the top of the app component hierarchy
// The rest of the app goes here
);
}
```
Then, you are free to use the `magicSheet` as shown from anywhere you want.
```js
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { magicSheet } from 'react-native-magic-sheet';
const PickerSheet = (someProps) => (
{
magicSheet.hide({userName: "Rod", id:1})
}}> // This will hide the sheet, resolve the promise with the passed object
Return user
);
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(() => );
console.log(result)
// will show {userName: "Rod", id:1}, or undefined if sheet is dismissed
};
export const Screen = () => {
return (
Show sheet
);
};
```
Alternatively, if we don't care about waiting the resolved value of the promise we can just trigger some action instead.
```js
import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import {magicSheet} from 'react-native-magic-sheet';
const PickerSheet = (props) => (
{
magicSheet.hide();
props.onSelect({userName: "Rod", id:1})
}}>
Return user
);
export const Screen = () => {
const [user, setUser] = useState();
const handlePickUser = useCallback(
() => {
magicSheet.show(
() => {setUser(value)}}/>
)
}
,[])
return (
Show sheet
);
};
```
magicSheet.show( ) can take another optional argument of type BottomSheetProps if we need to override the default props and style of the bottom sheet container
Example:
```js
magicSheet.show(
() => ,
{backgroundStyle: styles.bottomSheetContainer}
)
```
## 😬 Notes
### Inner components
It's recommended to use the components provided by [@gorhom/bottom-sheet](https://gorhom.github.io/react-native-bottom-sheet/modal/) inside of the bottom sheet as those components are made to adapt to the bottom sheet behavior, especially scrollables and text inputs.
## 👨🏫 Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## ⚖️ License
[MIT](LICENSE)