rn-popup-modal

Display visual popup modal

Features

• Support in React Native for both Android and iOS
• Possible to wrap more than one child component
• Easy to use
• Some customizations

Demo

Installation

• Using Npm

npm install rn-popup-modal --save

• Using Yarn

yarn add rn-popup-modal

Example

import RNPopupModal from 'rn-popup-modal';

<RNPopupModal ref={ref => (this._modal = ref)} title='The Pyrenees'>
  <Image
    source={{
      uri:
        'https://www.smartertravel.com/uploads/2012/03/stm4f4fa817459b420120301.jpg'
    }}
    style={styles.image}
    resizeMode='cover'
  />
  <Text style={styles.title}>
    Best Hidden Destination for Mountain Lovers: The Pyrenees
  </Text>

  <Text style={{ fontSize: 16 }}>
    “The Pyrenees in southern France and northern Spain [are] everything people
    crave about the Alps with a fraction of the people. [They have so much to
    offer, including] incredible high-country national parks in Gavarnie,
    Ordesa, and Aiguestortes; hearty regional cuisine; the running of the bulls
    in Pamplona—and even duty-free shopping in tiny Andorra.”
  </Text>
</RNPopupModal>

// Call the method to show the popup modal
_modal.show();

Usage

Available props

| Name | Type | Default | Description | | ------------------------------- | ------ | --------------- | ------------------------------------------------------------------ | | title | string | | String as title displayed on top header of the modal | | titleStyle | style | | Style of the title Text component | | blockBackgroundColor | color | rgba(0,0,0,0.5) | Background color of the blocking component behind the popup window | | backgroundColor | color | #ffffff | Background color of the popup modal window | | windowContainerStyle | style | | Container style for the popup modal window | | headerLineStyle | style | | Style of divider line between header and body | | headerContainerStyle | style | | Container style for the header | | scrollViewStyle | style | | Scroll view style | | scrollViewContentContainerStyle | style | | Content container style for the scroll view | | transitionDuration | number | 200 | Transition duration to animate the popup modal | | transitionFromScale | number | 1.1 | Start scale for transiting the popup modal |

also inherit Modal Props

Available instance method

| Name | Description | | ---- | -------------------- | | show | Show the popup modal |

License

• MIT