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

Package detail

@develondigital/react-native-lightning-modal

readme