SheetModal

An interactive sheet modal, fully customizable, performance focused

• Supports modal and detached view
• Smooth animations and snapping
• Configurable snap points
• Nested SheetModalProviders that automatically inherit props
• Runs on Expo & React Native
• Compatible with iOS, Android & web
• Written in TypeScript

Index

• Installation
• Usage
• Props
• Methods
• Examples
• Known issues
• License
• Contributing

Installation

Install with yarn

$ yarn add @myalbum/sheet-modal

Install with Expo

$ expo install @myalbum/sheet-modal

Dependencies

This library depends on React Native Reanimated & React Native Gesture Handler

Install with yarn

$ yarn add react-native-reanimated react-native-gesture-handler

Install with expo

$ npx expo install react-native-reanimated react-native-gesture-handler

[!IMPORTANT] React Native Gesture Handler needs extra installation steps, please follow their guide

React Native Reanimated needs extra installation steps, please follow their guide

Usage

Below a simple usage example

1import React, { useCallback, useRef } from 'react';
2import { SheetModal, SheetModalMethods, ScrollView } from '@myalbum/sheet-modal';
3
4export default function App() {
5  const sheetModalRef = useRef<SheetModalMethods>(null);
6
7  const openSheetModal = useCallback(() => {
8    sheetModalRef.current?.snapToIndex(0);
9  }, []);
10
11  return (
12    <View>
13      <Button
14        title="Open sheet modal"
15        onPress={openSheetModal}
16      />
17      <SheetModal
18        ref={sheetModalRef}
19        snapPoints={[200, "100%"]}
20      >
21        <ScrollView>
22          <Text>Sheet modal content</Text>
23        </ScrollView>
24      </SheetModal>
25    </View>
26  );
27}

• Responsive
  Auto switch between detached/attached based on screensize
• Advanced usage
  useSheetModal hook and get access to internal methods/state

Props

The props below can be used in any SheetModalProvider or SheetModal. The props will inherit from nested SheetModalProvider to SheetModal

Props for custom styling

{
  iconColor: string
  backgroundColor: string
}

Props for custom components

Methods

The methods below can be used in the SheetModal component

Examples

See the examples directory for a full example of how to use the library.

Running the examples

First bootstrap the examples by installing the dependencies

1$ yarn bootstrap

[!IMPORTANT] For the bare example you need prepare the Pod project before running the example, this can be done by running: $ cd examples/bare && yarn prepare-ios

After that you can run the examples:

• $ yarn expo to start the expo example
• $ yarn bare to start the bare react-native example

Known issues

This package is compatible with React Native, but due to a bug in react-native-reanimated it can cause some issues when newarch/bridgeless is enabled.

1ReanimatedCommitMarker::ReanimatedCommitMarker() {
2 react_native_assert(reanimatedCommitFlag_ != true);
3 reanimatedCommitFlag_ = true;
4}

License

This project is licensed under the MIT License - see the LICENSE file for details

Contributing

See CONTRIBUTING.md for more information on how to contribute to this project.

Build with ❤️

• React Native Reanimated
• React Native Gesture Handler
• focus-trap-react