Fully Customizeable Bottom Sheet Component – Magic Sheet

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