JSPM

react-native-swipeable-modal

2.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6
  • Score
    100M100P100Q36564F
  • License MIT

Display modals which can be swiped in any direction

Package Exports

  • react-native-swipeable-modal

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-swipeable-modal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme


npm version npm downloads

React Native Swipeable Modal

react-native-swipeable-modal is a JavaScript library for react-native allowing you to display modals which can be swiped away in any direction

It uses the great react-native-gesture-handler to handle the pan events. This module needs to be installed within your application for react-native-swipeable-modal to work. For details please check React Native Gesture Handler.

Installation

React Native Swipeable Modal is available as react-native-swipeable-modal package on npm

With npm

$ npm install react-native-swipeable-modal --save

If using yarn

$ yarn add react-native-swipeable-modal

Examples

react-native-swipeable-modal exports a SwipeableModal component which displays its children in a fullscreen mode and can then be swiped away.
You can use SwipeableModal in any direction:

Use as a simple modal

import React, {Component} from 'react';
import {Text, View, Button} from 'react-native';
import { SwipeableModal } from 'react-native-swipeable-modal';

class Container extends Component {
  state = {
    showModal: false,
  };

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

  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#FFFFFF'
        }}>
          <Button title="Show Modal" onPress={() => this.setState({ showModal: true })} />
        </View>
        {this.state.showModal && <SwipeableModal
          closeModal={this.closeModal}
          style={{
            backgroundColor: '#888888',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Button title="Close" raised onPress={this.closeModal} />
        </SwipeableModal>}
      </View>
    );
  }
}

Or with React Native Navigation v2 showModal

registerScreen.js

import { Navigation } from 'react-native-navigation';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
import { ContainerScreen } from './ContainerScreen';
import { ModalScreen } from './ModalScreen';

Navigation.registerComponent(`navigation.Container`, () => ContainerScreen);
Navigation.registerComponent(`navigation.Modal`, () => gestureHandlerRootHOC(ModalScreen));

ContainerScreen.js

import React, {Component} from 'react';
import {Text, View, Button} from 'react-native';
import { Navigation } from 'react-native-navigation';

class ContainerScreen extends Component {
  showModal = () => {
    Navigation.showModal({
    component: {
        name: 'navigation.Modal',
        options: {
          modalPresentationStyle: Platform.OS === 'ios' ? 'overFullScreen' : 'overCurrentContext' // 'overfullScreen' on IOS allows us to see the back content while swiping the modal
        }
      }
    });
  };

  render() {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Button title="Show Modal" onPress={this.showModal} />
        </View>
    );
  }
}

ModalScreen.js

import React, {Component} from 'react';
import { Text, Button } from 'react-native';
import { Navigation } from 'react-native-navigation';
import { SwipeableModal } from 'react-native-swipeable-modal';

export class ModalScreen extends Component {
  closeModal = () => {
    Navigation.dismissModal(this.props.componentId)
      .catch(() => 1));
  };

  render() {
    return (
      <SwipeableModal
        closeModal={this.closeModal}
        style={{
          backgroundColor: '#999999',
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <Button title="Close" onPress={this.closeModal} />
      </SwipeableModal>
    );
  }
}

API

Parameter Type Required Default Description
direction string ✘ "bottom" One of "bottom", "top", "left", "right"
closeModal Function ✓ - The function to call when the modal has been swiped away beyond it's limit
style Object ✘ - A style to overload the default style of the modal container. Note that you cannot overload the translate properties
panClose number ✘ 0.6 A number between 0 and 1 used to select the breakpoint at which closeModal will be called
minOffset number ✘ 20 See react-native-gesture-handler minOffset
maxOffset number ✘ 80 See react-native-gesture-handler maxOffset