maxs15 / react-native-modalbox Goto Github PK

I'm facing an issue after I install this plugin, and then when I requiring it like this,

var Modal = require('react-native-modalbox');

It pops out the error message that "requiring unknown module "react-native-modalbox"

For a particular modal I am working with, I would like to be able to have the modal fade in from the center instead of coming up from bottom. What do you guys think?

on iPhone 6s ,react-native-modalbox can't response Touch event,
even the third example(Position centered + backdrop + disable ) doesn't work.

I have check the index.js, I found that it is the Animated.View affect this.But I am not similar to the Animated.

related issue closed #10

I'm not sure if it's supposed to or not. It seemed from the comments on some commits that it should, but it doesn't work on Android.

Touching outside of the modal ie., touching on overlay should not close the modal ?

Link to index.ios.js in the readme is bad

Hello, first, Great Work with this component!,

A simple Picker is not showing inside Modal.

<Picker.Item label="0" value="0" />
<Picker.Item label="1" value="1" />

Instead of closing the modal absolutely, is it possible to put the modal to have a default absolute positioned bottom value?

For eg:

Here the more options may slide up the modal a little more to reveal more options between the button the the text.

Wondering if modalbox is the right option for something complex like this.

Unfortunately isOpen={true} does not work as expected i.e. does not open directly and instead one has to click another time on the trigger element.

/Users/App/node_modules/react-native-modalbox/node_modules/react-native-overlay/RNOverlay.m
/Users/App/node_modules/react-native-modalbox/node_modules/react-native-overlay/RNOverlay.m:21:44: Cannot find protocol declaration for 'RCTViewNodeProtocol'
/Users/App/node_modules/react-native-modalbox/node_modules/react-native-overlay/RNOverlay.m:23:37: Cannot find protocol declaration for 'RCTViewNodeProtocol'
/Users/App/node_modules/react-native-modalbox/node_modules/react-native-overlay/RNOverlay.m:88:47: Cannot find protocol declaration for 'RCTViewNodeProtocol'
/Users/App/node_modules/react-native-modalbox/node_modules/react-native-overlay/RNOverlay.m:25:12: Property 'reactTag' not found on object of type '__strong id'
/Users/App/node_modules/react-native-modalbox/node_modules/react-native-overlay/RNOverlay.m:26:11: Cannot find protocol declaration for 'RCTViewNodeProtocol'
/Users/App/node_modules/react-native-modalbox/node_modules/react-native-overlay/RNOverlay.m:26:48: Property 'reactSubviews' not found on object of type '__strong id'

My rootView is scrollView, and open modal, if i scroll outer of modal, the modal will scroll....

Maybe I am doing something wrong, but for some reason ScrollView is not working inside of a modal, and I can't adjust the height. For example when a form input is touched and I'd like to adjust the View height in relation to the keyboard.

I have an app that has a Modal but it is possible to pull another Modal up on top of this. This used to work but now seems to not do anything?

I can't use it like shown in video - how to setup backdrop?

I have a problem where even after I have rendered other , modal and all the events on it remain active in the background. Is there any way to overcome this?

first,npm
then?????????

The screen-shots look excellent! I'm having a little trouble getting this off the ground, however. When using with RN 0.8.0, I am getting this exception whenever implementing the Modal:

Invariant Violation: Expected a component class, got undefined.

I set scrollview inside smart modalbox, and when I scroll from top to bottom, modal auto close, I ensure that swipeToClose={false}, how could I fix it.

thanks for your time.

Hello,
Great work on the modal (Y).
Im testing this on android. Here is a gif that explains everything.
Im using react-native 0.14

Modals show underneath the status bar.

It shows the modalBox but it is bellow the ListView component

http://screencast.com/t/ppUrAeyv

There is any way to fix that?
Sorry if it's a silly question, I'm new with RN

I'm trying to use this component https://github.com/jeanregisser/react-native-slider in modal, but it doesn't work.

I'm using react-native 0.19.0.

Hi, cool project. what if the height of children is dynamic. how to display them in the center with backdrop?

facebook/react-native#3594

I am also having this issue since moving to react-native 0.13.2

Hi @maxs15, found your plugin to work just perfectly & very smoothly so I'm currently using it in my project.

Right now you can either enable or disable the swipe to dismiss feature. My problem is, my modal contains a scrollview, with much more content (ie. comments) than the modal hold.

I'm left with two solutions : Either I enable the swipe to dismiss, but then I'm unable to scroll inside my scrollView OR I disable the swipe to dismiss - which lead to a perfectly scrollable scrollview - but no ability to dismiss with a simple swipe down.

While looking for modals alternative, I found this : https://github.com/fomahaut/React-Native-Swipeable-Modal#readme

This modal is way less performant than this one but - as you can see - has a "swipeableAreaStyle" which allow the user to customize the are to be swiped.

What do you think?

Cheers

I'm not completely sure why the overlay is forced to the size of the entire screen, could this behaviour be modified so that the size is relative to the modals parent?

I am using iOS 9.1 beta and on that the touchable buttons doesn't work.

Hey I think this may be a feature request or a simple question...

How would I disable Navigator.SceneConfigs.HorizontalSwipeJump when the modal is present?

Is there a reason swipe to close only has the direction down implemented?

If content inside Modal changes state, modal box is closed and then cannot be re-opened. I've modified example so you could see this problem by clicking first modal and then "change text" button inside that modal.

'use strict';

var React   = require('react-native');
var Button  = require('react-native-button');
var Modal   = require('react-native-modalbox');

var {
  AppRegistry,
  StyleSheet,
    ScrollView,
  Text,
  View,
} = React;

var styles = StyleSheet.create({

  wrapper: {
    paddingTop: 50,
    flex: 1
  },

  modal: {
    justifyContent: 'center',
    alignItems: 'center'
  },

  modal1: {
    flex: 1
  },

  modal2: {
    height: 230,
    backgroundColor: "#3B5998"
  },

  modal3: {
    height: 300,
    width: 300
  },

  modal4: {
    height: 300
  },

  btn: {
    margin: 10,
    backgroundColor: "#3B5998",
    color: "white",
    padding: 10
  },

  btnModal: {
    position: "absolute",
    top: 0,
    right: 0,
    width: 50,
    height: 50,
    backgroundColor: "transparent"
  },

  text: {
    color: "black",
    fontSize: 22
  }

});

var Example = React.createClass({
  getInitialState(){
    return {text:"Initial text"};
  },

  openModal1: function(id) {
    this.refs.modal1.open();
  },

  closeModal1: function(id) {
    this.refs.modal1.close();
  },

  openModal2: function(id) {
    this.refs.modal2.open();
  },

  openModal3: function(id) {
    this.refs.modal3.open();
  },

  openModal4: function(id) {
    this.refs.modal4.open();
  },

  openModal5: function(id) {
    this.refs.modal5.open();
  },

  closeModal5: function(id) {
    this.refs.modal5.close();
  },

  onClose: function() {
    console.log('Modal just closed');
  },

  onOpen: function() {
    console.log('Modal just openned');
  },

  changeText: function() {
    this.setState({text:"Hello world!"});
  },

  onClosingState: function(state) {
    console.log('the open/close of the swipeToClose just changed');
  },

  render: function() {

    var BContent = <Button onPress={this.closeModal5} style={[styles.btn, styles.btnModal]}>X</Button>;

    return (
      <View style={styles.wrapper}>
        <Text>{this.state.text}</Text>
        <Button onPress={this.openModal1} style={styles.btn}>Basic modal</Button>
        <Button onPress={this.openModal2} style={styles.btn}>Position top</Button>
        <Button onPress={this.openModal3} style={styles.btn}>Position centered + backdrop</Button>
        <Button onPress={this.openModal4} style={styles.btn}>Position bottom + backdrop</Button>
        <Button onPress={this.openModal5} style={styles.btn}>Backdrop + backdropContent</Button>

        <Modal style={[styles.modal, styles.modal1]} ref={"modal1"} onClosed={this.onClose} onOpened={this.onOpen} onClosingState={this.onClosingState}>
          <Text style={styles.text}>Basic modal</Text>
          <Button onPress={this.changeText} style={styles.btn}>Change text</Button>
          <Button onPress={this.closeModal1} style={styles.btn}>Close modal</Button>
        </Modal>

        <Modal style={[styles.modal, styles.modal2]} backdrop={false}  position={"top"} ref={"modal2"}>
          <Text style={[styles.text, {color: "white"}]}>Modal on top</Text>
        </Modal>

        <Modal style={[styles.modal, styles.modal3]} position={"center"} ref={"modal3"}>
          <Text style={styles.text}>Modal centered</Text>
        </Modal>

        <Modal style={[styles.modal, styles.modal4]} position={"bottom"} ref={"modal4"}>
          <Button onPress={this.openModal1} style={styles.btn}>Basic modal</Button>
          <Text style={styles.text}>Modal on bottom with backdrop</Text>
        </Modal>

        <Modal style={[styles.modal, styles.modal4]} position={"center"} backdropContent={BContent} ref={"modal5"}>
          <Text style={styles.text}>Modal with backdrop content</Text>
        </Modal>
      </View>
    );
  }
});

AppRegistry.registerComponent('Example', () => Example);

when I select datetime in DatePickerIOS, modal auto close immediately like image below.

how should I fix it?

thanks for your time.

awesome component! only thing that I missed was controlling the speed of the animation.

I'm experiencing a few errors on RN 0.13 (I came from v0.9 so cannot see when these were introduced)

Opening modals with content in still close immediately similar to #6. Also Sometime get 'Cannot Read Property 'stop' of undefined index.js:178.

Should this work on RN 0.13.0-rc? or am I getting ahead of myself?

When the modal is displayed for the first time between app load, the modal doesn't slide up. The background fade works fine, but not the slide in. Once the modal is closed, the animations then work fine, until the app is reloaded.

I tried to hack around this, by toggling on load, but i gave up and wrote an issue instead 👍

Using React Native 0.19.0

Within react-native 0.16.0, the modal box does not work at all. While trying to open the Modal in the project with official sample code, error messages will given as below:

ScrollView not working with listview inside modal even after specifying the swipeArea .
<Modal style={[styles.modal3]} position={"center"} ref={"modal3"} swipeToClose=
{this.state.swipeToClose} swipeArea={50}>

{this._renderTransactionList()}//RENDERING LISTVIEW

I'm trying to use this Modal, I have this configuration:

<View>
   <Modal
          isOpen={shareVisible}
          position={'center'}
          style={[styles.modal, styles.modal1]}>
          <View style={[styles.modalContainer, modalBackgroundStyle]}>
            <View style={[styles.innerContainer, innerContainerTransparentStyle]}>
              <TouchableHighlight
                onPress={() => this.setState({shareVisible: false})}>
                <Text>
                  Close
                </Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>
        <WebView
          style={styles.webView}
          source={{uri: pdf.url}} />
</View>

The problem is that the WebView is on top of this Modal

Hey @maxs15. Hope you're well.
Little bug I just found: changing the device from portrait to landscape will leave the modal stuck in the orientation that it was when the modal was instantiated.

On click of one modal must open another modal; the first model must be closed while closing, it should not move down it should be invisible..

Is there any way to move a modal without closing it? Changing the position does not seem to work. My use case is quite simple: I want to react to keyboard events by moving the modal, when the keyboard is opened, the module should move upwards by the height of the keyboard, and when the keyboard closes, the modal should move back to its original position.

It seems the height of the modal box is not correct when the modal box is instantiated inside an item of a TabBarIOS. See here at the bottom:
http://tinypic.com/view.php?pic=6eoznk&s=8#.VcLlEvmqpHw

Nice work on the modal! I'm on Android (emulator) and I was going to use the modal for buttons (like delete). TouchableHighlight's onPress does not work inside the modal it seems.

The title explains it .

Thanks

I'm working on a project that re-uses the same modal component with different behaviors (depending on content) for swipeToClose. However, swipeToClose (once set) does not play nicely with changes to this property.

From a quick dig through the code, it looks like the panResponder is created (or not) when the modal mounts and it's not setup to respond based on componentWillReceiveProps. But, it also looks like the pan responder that is created (in the case where swipeToClose={true}) is not destroyed when equal to false.

Hi, great plugin. I tried to use it in my project but I get duplicate linker errors. This appears to be because I'm using react-native-modal by @brentvatne also. Is this a fork? I'm guessing the two can't be run alongside each other then?

Hi,
I was thinking of enhancing open method to accept param:node . So we can have only one modal and pass things to render it while opening. If It makes sense ? I can send a PR.

thanks :)