Package Exports
- rn-popup-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 (rn-popup-modal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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 |