react-native-animated-modal

A highly customizable React Native modal component supporting animations, swipe gestures, and backdrop interactions. Designed for mobile applications to enhance modal interactions with smooth animations and user-friendly gestures. For full API documentation and examples, see the online docs.

Requirements

This package relies on specific versions of its peer dependencies to function correctly. Make sure your project meets the following requirements.

• "react": ">=18.2.0",
• "react-native": ">=0.78.0",
• "react-native-gesture-handler": ">=2.26.0",
• "react-native-reanimated": ">=3.19.0"

Example

A simple example of the component's usage is provided below. You can customize it according to your needs. For more complete examples and real-world use cases, see the example folder.

import React, {useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {Modal} from 'react-native-animated-modal';

const Example = () => {
  const [visible, setVisible] = useState(false);
  return (
    <Modal
      visible={visible}
      onHide={() => setVisible(false)}
      onBackPress={() => setVisible(false)}
      onBackdropPress={() => setVisible(false)}
      onSwipeComplete={() => setVisible(false)}
      backdrop={{enabled: true, backgroundColor: 'black', opacity: 0.6}}
      animation={{type: 'slide', direction: {start: 'up', end: 'down'}}}
      swipe={{enabled: true, directions: ['up', 'down', 'left', 'right']}}>
      <View style={styles.content}>
        <Text>Example Modal</Text>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  content: {
    width: 300,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
    borderRadius: 15,
    gap: 10,
  },
});
Copy

Props

The following table lists all props available for the Modal component. They allow you to customize the modal's appearance, behavior, and gesture interactions.

AnimationNs.Config

SwipeNs.Config

BackdropNs.Config