@develondigital/react-native-lightning-modal v2.1.0

@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

➕ Contributing

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

📰 License

MIT