@miot-plugin/react-native-modals v0.19.9

React Native Modals

React Native Modals Library for iOS & Android.

How to thank me ?

Just click on ⭐️ button 😘

Try it with Exponent

BREAKING CHANGE

A lot of backward incompatible changes in v0.19.3. Please, Read the Docs before upgrading to v0.19.3

Installation

npm install --save react-native-modals
# OR
yarn add react-native-modals

Exposed Modules

• Modal
• BottomModal
• Backdrop
• ModalButton
• ModalContent
• ModalTitle
• ModalFooter
• Animation
• FadeAnimation
• ScaleAnimation
• SlideAnimation
• DragEvent,
• SwipeDirection,
• ModalProps
• ModalFooterProps
• ModalButtonProps
• ModalTitleProps
• ModalContentProps
• BackdropProps

Examples

Example

Basic Usage

import Modal, { ModalContent } from 'react-native-modals';
import { Button } from 'react-native'

<View style={styles.container}>
  <Button
    title="Show Modal"
    onPress={() => {
      this.setState({ visible: true });
    }}
  />
  <Modal
    visible={this.state.visible}
    onTouchOutside={() => {
      this.setState({ visible: false });
    }}
  >
    <ModalContent>
      {...}
    </ModalContent>
  </Modal>
</View>

Usage - Animation

import Modal, { SlideAnimation, ModalContent } from 'react-native-modals';

<View style={styles.container}>
  <Modal
    visible={this.state.visible}
    modalAnimation={new SlideAnimation({
      slideFrom: 'bottom',
    })}
  >
    <ModalContent>
      {...}
    </ModalContent>
  </Modal>
</View>

Usage - Swipe

import Modal, { ModalContent } from 'react-native-modals';
import { Button } from 'react-native'

<View style={styles.container}>
  <Modal
    visible={this.state.visible}
    swipeDirection={['up', 'down']} // can be string or an array
    swipeThreshold={200} // default 100
    onSwipeOut={(event) => {
      this.setState({ visible: false });
    }}
  >
    <ModalContent>
      {...}
    </ModalContent>
  </Modal>
</View>

Usage - Modal Title

import Modal, { ModalTitle, ModalContent } from 'react-native-modals';

<View style={styles.container}>
  <Modal
    visible={this.state.visible}
    modalTitle={<ModalTitle title="Modal Title" />}
  >
    <ModalContent>
      {...}
    </ModalContent>
  </Modal>
</View>

Usage - Modal Action

import Modal, { ModalFooter, ModalButton, ModalContent } from 'react-native-modals';

<View style={styles.container}>
  <Modal
    visible={this.state.visible}
    footer={
      <ModalFooter>
        <ModalButton
          text="CANCEL"
          onPress={() => {}}
        />
        <ModalButton
          text="OK"
          onPress={() => {}}
        />
      </ModalFooter>
    }
  >
    <ModalContent>
      {...}
    </ModalContent>
  </Modal>
</View>

Props

Modal

ModalTitle

ModalContent

ModalFooter

ModalButton

Backdrop

Animation

Params for (*)Animation

FadeAnimation

Preview:

Example:

new FadeAnimation({
  initialValue: 0, // optional
  animationDuration: 150, // optional
  useNativeDriver: true, // optional
})

ScaleAnimation

Preview:

Example:

new ScaleAnimation({
  initialValue: 0, // optional
  useNativeDriver: true, // optional
})

SlideAnimation

Preview:

Example:

new SlideAnimation({
  initialValue: 0, // optional
  slideFrom: 'bottom', // optional
  useNativeDriver: true, // optional
})

Create your custom animation

Example:

import { Animated } from 'react-native';
import { Animation } from 'react-native-modals';

class CustomAnimation extends Animation {
  in(onFinished) {
    Animated.spring(this.animate, {
      toValue: 1,
      useNativeDriver: this.useNativeDriver,
    }).start(onFinished);
  }

  out(onFinished) {
    Animated.spring(this.animate, {
      toValue: 0,
      useNativeDriver: this.useNativeDriver,
    }).start(onFinished);
  }

  getAnimations() {
    return {
      transform: [{
        translateY: this.animate.interpolate({
          inputRange: [0, 1],
          outputRange: [800, 1],
        }),
      }],
    };
  }
}

Development

yarn

yarn run build

yarn test