@develondigital/react-native-lightning-modal

A fast bottom modal that works with React Native Reanimated 2!

Prerequisites

This module needs

React Native Reanimated 2 &

React Native Gesture Handler to work

🚀 Installation

First make sure that you have installed all the prerequisites.

Using npm

npm i @develondigital/react-native-lightning-modal

Using Yarn

yarn add @develondigital/react-native-lightning-modal

⚙️ Usage

Using the useBottomModal hook 🪝

This hook declares the ref for you

import React from 'react';

import { View } from 'react-native';

import { useBottomModal, BottomModal } from '@develondigital/react-native-lightning-modal';

export default function App() {
  const { dismiss, show, modalProps } = useBottomModal();

  return (
    <View>
      <BottomModal height={500} {...modalProps}>
        {/* Your Content */}
      </BottomModal>
    </View>
  );
}

Bottom modal component needs to be below other elements.

You can then use

show();

to show the modal

Using a ref 📝

import React from 'react';

import { View } from 'react-native';

import { BottomModal, BottomModalRef } from '@develondigital/react-native-lightning-modal';

export default function App() {
  const bottomModalRef = React.useRef < BottomModalRef > null;

  return (
    <View>
      <BottomModal height={500} ref={bottomModalRef}>
        {/* Your Content */}
      </BottomModal>
    </View>
  );
}

You can than use

bottomModalRef.show();

to show the modal

DOCUMENTATION

PROPS

| Prop Name | Description | Type | Required | Defaults to | | ----------------- | ------------------------------------------------------------------------------------- | :-------------------------: | :------: | -------------------------------------: | | height | Height of modal's presented state. This is required for animation to behave correctly | number | ✅ | ❌ | | backdropColor | Basically the color of a fullscreen view displayed below modaL | string | ❌ | undefined | | style | Style of modal's container | ViewStyle | ❌ | undefined | | animation | Animation type to use, can get spring and timing, defaults to timing animation | 'spring' | 'timing' | ❌ | 'timing' | | timingConfig | Timing animation's config if animation prop is set to 'timing' | Animated.WithTimingConfig | ❌ | {duration: 300, easing: Easing.quad} | | springConfig | Spring animation's config if animation prop is set to 'spring' | Animated.WithSpringConfig | ❌ | undefined | | backdropStyle | Style of the backdrop component | ViewStyle | ❌ | undefined |

➕ Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

📰 License

MIT