All Projects → sahlhoff → react-native-popup

sahlhoff / react-native-popup

Licence: other
React Native Animated Popup Modal

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-native-popup

Nativepopup
Clone of Apple iOS App's feedback popup, and easily customizable.
Stars: ✭ 247 (+1200%)
Mutual labels:  alert, modal, popup
Pmalertcontroller
PMAlertController is a great and customizable alert that can substitute UIAlertController
Stars: ✭ 2,397 (+12515.79%)
Mutual labels:  alert, modal, popup
Popupdialog
A simple, customizable popup dialog for iOS written in Swift. Replaces UIAlertController alert style.
Stars: ✭ 3,709 (+19421.05%)
Mutual labels:  alert, modal, popup
React Native Alert Pro
The Pro Version of React Native Alert (Android & iOS)
Stars: ✭ 69 (+263.16%)
Mutual labels:  alert, modal, popup
Customalertviewdialogue
Custom AlertView Dialogue is the world's most advanced alert view library. Custom AlertView Dialogue includes simple message popups, confirmation alerts, selector popups, action sheet bottom menus, and input/feedback contact forms.
Stars: ✭ 100 (+426.32%)
Mutual labels:  alert, modal, popup
react-redux-modal-flex
[DEPRECATED] Make easy a modal/popup with Redux
Stars: ✭ 14 (-26.32%)
Mutual labels:  alert, modal, popup
Sweetalert
A beautiful replacement for JavaScript's "alert"
Stars: ✭ 21,871 (+115010.53%)
Mutual labels:  alert, modal, popup
Jalert
jQuery alert/modal/lightbox plugin
Stars: ✭ 73 (+284.21%)
Mutual labels:  alert, modal, popup
Jbox
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.
Stars: ✭ 1,251 (+6484.21%)
Mutual labels:  alert, modal, popup
React Popup
React popup component
Stars: ✭ 198 (+942.11%)
Mutual labels:  alert, modal, popup
eins-modal
Simple to use modal / alert / dialog / popup. Created with pure JS. No javascript knowledge required! Works on every browser and device! IE9
Stars: ✭ 30 (+57.89%)
Mutual labels:  alert, modal, popup
Spstorkcontroller
Now playing controller from Apple Music, Mail & Podcasts Apple's apps.
Stars: ✭ 2,494 (+13026.32%)
Mutual labels:  alert, popup
Jspanel4
A JavaScript library to create highly configurable floating panels, modals, tooltips, hints/notifiers/alerts or contextmenus for use in backend solutions and other web applications.
Stars: ✭ 217 (+1042.11%)
Mutual labels:  alert, modal
Presentr
iOS let's you modally present any view controller, but if you want the presented view controller to not cover the whole screen or modify anything about its presentation or transition you have to use the Custom View Controller Presentation API's.
Stars: ✭ 2,816 (+14721.05%)
Mutual labels:  alert, modal
Wc Messagebox
基于 Vue 2.0 开发的 Alert, Toast, Confirm 插件, UI仿照 iOS 原生
Stars: ✭ 203 (+968.42%)
Mutual labels:  alert, modal
react-st-modal
Simple and flexible modal dialog component for React JS
Stars: ✭ 41 (+115.79%)
Mutual labels:  alert, modal
SHPopup
A lightweight library for popup view
Stars: ✭ 36 (+89.47%)
Mutual labels:  alert, popup
jpopup
Simple lightweight (<2kB) javascript popup modal plugin
Stars: ✭ 27 (+42.11%)
Mutual labels:  modal, popup
LSDialogViewController
Custom Dialog for iOS written in Swift
Stars: ✭ 74 (+289.47%)
Mutual labels:  modal, popup
react-layer-stack
Layering system for React. Useful for popover/modals/tooltip/dnd application
Stars: ✭ 158 (+731.58%)
Mutual labels:  modal, popup

React Native Animated Popup

React Native Popup

Installation

  npm install rn-popup --save

Usage

  const Popup = require('rn-popup');

  ...  

  render() {
    return (
      <View style={styles.container}>
        <Button onPress={() => this._openPopUp()} buttonType='primary'>Show</Button>
        <Popup isVisible={this.state.isVisible} duration={800} entry={'bottom'} exit={'top'}>
          <Text style={styles.welcome}>Its a Popup!</Text>
          <Text style={styles.instructions}>You can add text</Text>
          <Image style={styles.image} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />
          <Text style={styles.instructions}>And images too!</Text>
          <Button textStyle={{textAlign: 'center'}} onPress={() => this._closePopUp()} buttonType='primary'>Close</Button>
        </Popup>
      </View>
    );
  }

  _openPopUp() {
    this.setState({
      isVisible: true
    });
  }

  _closePopUp() {
    this.setState({
      isVisible: false
    });
  }

  

Props

  • isVisible (bool) - Value to show/hide popup.
  • duration (number) - Duration in milliseconds for animation. Defaults to 800.
  • entry (string) - Entry position for showing popup. This can be 'top' or 'bottom' defaults to 'top'.
  • exit (string) - Exit position for hiding popup. This can be 'top' or 'bottom' defaults to 'bottom'.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].