@myalbum/sheet-modal v3.1.2

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

import React, { useCallback, useRef } from 'react';
import { SheetModal, SheetModalMethods, ScrollView } from '@myalbum/sheet-modal';

export default function App() {
  const sheetModalRef = useRef<SheetModalMethods>(null);

  const openSheetModal = useCallback(() => {
    sheetModalRef.current?.snapToIndex(0);
  }, []);

  return (
    <View>
      <Button
        title="Open sheet modal"
        onPress={openSheetModal}
      />
      <SheetModal
        ref={sheetModalRef}
        snapPoints={[200, "100%"]}
      >
        <ScrollView>
          <Text>Sheet modal content</Text>
        </ScrollView>
      </SheetModal>
    </View>
  );
}

• 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

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

$ 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.

ReanimatedCommitMarker::ReanimatedCommitMarker() {
 react_native_assert(reanimatedCommitFlag_ != true);
 reanimatedCommitFlag_ = true;
}

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