0.1.7 • Published 8 years ago

react-native-modalview v0.1.7

Weekly downloads
4
License
MIT
Repository
github
Last release
8 years ago

react-native-modalview

npm version styled with prettier

An advanced and composable Modal component for react-native

Features

  • Very modular through composable components
  • all features are easy to toggle on/off via props
  • Smooth open/close animations
  • Extendable with own animations/easings/...
  • Customizable backdrop opacity, color, duration and easing
  • Event listeners for the modal states onOpen, onOpened, onClose, onClosed

Demo

coming soon

Setup

This library is available on npm, install it with: npm install --save react-native-modalview or yarn add react-native-modalview.

Usage

Use all of the features or toggle features on and off via props;

import React, { Component } from 'react'
import { Text, TouchableOpacity, View } from 'react-native'
import Modal from 'react-native-modalview'

export default class ModalDemo extends Component {
  state = {
    showModal: false
  }

  _showModal = () => this.setState({ showModal: true })

  _hideModal = () => this.setState({ showModal: false })

  render () {
    const { showModal } = this.state;
    return (
      <View style={{ flex: 1 }}>
        <TouchableOpacity onPress={this._showModal}>
          <Text>Show Modal</Text>
        </TouchableOpacity>
        <Modal 
          open={showModal}
          backdrop={true}
          swipeToDismiss={true}
          onClosed={this._hideModal}
        >
          <View style={{ backgroundColor: '#fff' }}>
            <Text>Hello!</Text>
          </View>
        </Modal>
      </View>
    )
  }

}

If you don't need all the functionality like backdrop or swipeToDismiss you can also import the base components and compose the Modal without this functionality or extend it with your own.

import { ModalBase, withBackdrop} from 'react-native-modalview'
import { compose } from 'ramda';

const Modal = compose(
  withBackdrop, 
)(ModalBase);

Props

ModalBase

NameTypeDefaultDescription
openboolfalseopen/close the modal
disabledboolfalsedisable open/closing of the modal
childrennodeREQUIREDThe modal content
styleanynullStyle applied to the modal
positionVerticalstring'center'vertical position of the modal. possible values: 'start', 'center', 'end'
positionHorizontalstring'center'horizontal position of the modal. possible values: 'start', 'center', 'end'
animationstring'slideBottom'convenience prop to set the animation type for open/close.
animationDurationnumber300convenience prop to set the animation duration for open/close/backdrop
animationEasingstring'easeOut'convenience prop to set the animation easing for open/close/backdrop
animationInstringanimationanimation type for opening the modal
animationInDurationstringanimationDurationanimation duration for opening the modal
animationInEasingstring, funcanimationEasinganimation easing for opening the modal
animationOutstringanimationanimation type for closing the modal
animationOutDurationstringanimationDurationanimation duration for closing the modal
animationOutEasingstring, funcanimationEasinganimation easing for closing the modal
animationUseNativeDriverboolfalseuse useNativeDriver for animations
overlayboolfalsewrap view in react-native Modal to present content above everything else
testIDstringnullUsed to locate this view in end-to-end tests.

withBackdrop

NameTypeDefaultDescription
backdropboolfalseshow/hide backdrop
backdropClickToCloseboolfalseclose modal by clicking on backdrop
backdropColorstring#00000099change backdrop color
backdropAnimationDurationstringanimationDurationanimation duration for opening and closing the backdrop
backdropAnimationEasingstring, funcanimationEasinganimation easing for opening and closing the backdrop

withSwipeToDismiss

NameTypeDefaultDescription
swipeToDismissboolfalseenable/disable swipe-to-dismiss functionality
swipeThresholdnumber50threshold to reach in pixels to close the modal
swipeAreanumbernullwidth/height in pixels of the swipeable area. By default the whole modal is swipeable.

Events

NameTypeDefaultDescription
onLayoutfuncnullinvoked on mount and layout changes
onContentLayoutfuncnullinvoked when content layout changes
onClosefuncnullinvoked when the modal starts closing
onClosedfuncnullinvoked when the modal is closed completely
onOpenfuncnullinvoked when the modal starts opening
onOpenedfuncnullinvoked when the modal is opened completely

Animations

  • fade
  • slideBottom
  • slideTop
  • slideRight
  • slideLeft
  • scaleBackground
  • scaleForeground
  • custom animation func

Easings

  • linear
  • easeIn
  • easeOut
  • easeInOut
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • custom easing func

TODO

  • usage examples
  • unit-tests
  • demo gifs
0.1.7

8 years ago

0.1.6

8 years ago

0.1.5

8 years ago

0.1.4

8 years ago

0.1.3

8 years ago

0.1.2

8 years ago

0.1.1

8 years ago

0.1.0

8 years ago