github.com/bzurkow/swipeable-modal-react-native

About

This package delivers a lightweight "pop up" modal that can be swiped right or left. Each direction can receive it's own function to do whatever you would like it to!

Screenshot Screenshot

Usage

Install

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

Basic Set Up

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

export default class Something extends Component {
  render() {
	return (
	  <View>
	    <PopUp>
	      {/*
	      	Put whatever you want to display in the modal here!
	      */}
	    </PopUp>
	  </View>
	)
  }
}

Under the default settings, a button will be rendered like such:

Screenshot

This can be disabled by props.

Props

• showButton
• buttonText
• buttonColor
• buttonContainerStyle
• buttonTextStyle
• modalTransparent
• modalOpen
• animatedViewStyle
• modalOpenAnimation
• onSwipeRight
• onSwipeLeft

1. showButton

• Default: true
• Type: boolean
• Use: Determines whether or not a button will render to open the modal

2. buttonText

• Default Click Me!
• Type: string
• Use: Sets the text to display in the button

3. buttonColor

• Default #1BA9DF
• Type: string of hexcode or rgb value
• Use: Sets the background color of the button. NOTE: this will be reset if backgroundColor is set in buttonContainerStyle.

4. buttonContainerStyle

• Default: {backgroundColor: '#1BA9DF', borderRadius: 10}
• Type: object
• Use: Sets the style properties of the button's <TouchableHighlight> container

5. buttonTextStyle

• Default: {padding: 20, color: '#fff'}
• Type: object
• Use: Sets the style properties of the button's <Text> element

6. modalTransparent

• Default: true
• Type: boolean
• Use: If true, displays rendered content behind modal content. If false, blocks non-modal content

7. modalOpen

• Default: false
• Type: boolean
• Use: To trigger the modal's visibility. If you choose not render the button you have the option to initialize the compenent as true or open it as a side effect once. If the button is visible, you can reopen the modal as many times as you please.

8. animatedViewStyle

• Default:

	{
		backgroundColor: '#fff',
		borderRadius: 10,
		height: height-85,
		width: width-50,
		marginTop: 60,
		marginBottom: 25,
		marginLeft: 25,
		marginRight: 25,
	}

• Type: object
• Use: An animated view is used to display content. This sets that container's style property.

9. modalOpenAnimation

• Default: 'slide'
• Type: Enum: none, slide, fade
• Use: Sets the animation type of the modal content when it opens.

10. onSwipeLeft

• Default: undefined
• Type: function
• Use: Sets a function to be called when a user swipes left on the modal. You do not need to reset or close the modal on a swipe, that is done automatically.

11. onSwipeRight

• Default: undefined
• Type: function
• Use: Sets a function to be called when a user swipes right on the modal. You do not need to reset or close the modal on a swipe, that is done automatically.