httnn / react-native-simple-modal Goto Github PK

currently, you can change the inner element background, but not the overlay

I execute example code, modal is open in centre

Here's my code, I wanna fire second modal upon clicking the modal 2.

import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

import Modal from 'react-native-simple-modal';

export default class App extends React.Component {

state = {open: false};

render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>

  <TouchableOpacity onPress={() => this.setState({open: true})}>
    <Text>Open modal 1 </Text>
  </TouchableOpacity>


  <TouchableOpacity onPress={() => this.setState({open: true})}>
    <Text>Open modal 2 </Text>
  </TouchableOpacity>


  <Modal
    offset={this.state.offset}
    open={this.state.open}
    modalDidOpen={() => console.log('modal did open')}
    modalDidClose={() => this.setState({open: false})}
    style={{alignItems: 'center'}}>

    <View>
      <Text style={{fontSize: 20, marginBottom: 10}}>Hello world!</Text>
      <TouchableOpacity
      style={{margin: 5}}
      onPress={() => this.setState({offset: -100})}>
        <Text>Move modal up</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={{margin: 5}}
        onPress={() => this.setState({offset: 0})}>
        <Text>Reset modal position</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={{margin: 5}}
        onPress={() => this.setState({open: false})}>
        <Text>Close modal</Text>
      </TouchableOpacity>
    </View>

  </Modal>


</View>
);

}

}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

I'm will fix it and submit a PR right away

I have been using this component for months on ios. Today I tried it on android and it will not open a modal. It works on iOS still but not on android

I create a project in EXPO. I run with iOS simulator. App is working. And when I run below command, i got this error:
npm install react-native-simple-modal --save

unable to resolve module expo from project/main.js
module does not exist in the module map or in these directories

I checked that almost all my node_modules in project file are gone after run npm install command. I think that`s why I got that error. After that I tried with other modules to install with npm, and result is same.

eg

constructor() {
   super();
   this.state = {
      open.true
    };
 }

Please replace these lines:

import React from 'react-native';
const {
   View,
   Component,
   StyleSheet,
   TouchableOpacity,
   Animated,
   PropTypes,
   Platform,
   BackAndroid
} = React;

to

import React, { Component,PropTypes } from 'react';
import {
   View,
   StyleSheet,
   TouchableOpacity,
   Animated,
   Platform,
   BackAndroid
} from 'react-native;

Here are RN notes: https://github.com/facebook/react-native/releases/tag/v0.25.1

Thanks! :)

the library is growing in complexity and tests are becoming increasingly relevant.

When Modal dialog is unmounted, event listener for Android hardware back button press (hardwareBackPress) is still there. This leads to problems in multi-page applications and/or when using other listeners for that event.

So i decided to remove event listener on each componentWillUnmount.

See RN #20

Hi,

I was trying to use the Modal on my project, but I keep getting this error:

These are my dependencies:

  "dependencies": {
    "base-64": "^0.1.0",
    "native-base": "2.1.0",
    "react": "15.4.2",
    "react-native": "0.42.0",
    "react-native-action-button": "^2.7.2",
    "react-native-calendars": "^1.5.8",
    "react-native-device-info": "^0.10.1",
    "react-native-html-render": "^1.0.5",
    "react-native-htmlview": "^0.12.0",
    "react-native-http-cache": "^0.2.0",
    "react-native-keychain": "^1.2.0",
    "react-native-material-textfield": "^0.10.0",
    "react-native-router-flux": "3.38.0",
    "react-native-simple-modal": "^7.0.0",
    "react-native-simple-radio-button": "^2.6.0",
    "react-native-spinkit": "^1.1.1",
    "react-native-swipe-gestures": "^1.0.2",
    "react-native-vector-icons": "~4.0.0",
    "react-redux": "^5.0.3",
    "redux": "^3.6.0",
    "redux-logger": "^2.8.2",
    "redux-promise": "^0.5.3",
    "reselect": "^3.0.1"
  },

I am importing modal like this:
import Modal from 'react-native-simple-modal';

And using as the example instructed.

Can someone help me with this?

I'm running into an issue on Android.

1. Open Modal
2. Press hardware back button
3. The modal is now closed
4. Tap to open the modal again
5. Modal is not visible. I'm able to see the render and console log the bool I'm using to show the modal (which is true).

Any ideas why this is happening?

https://stackoverflow.com/questions/47939888/modal-not-open-in-react-native-android

When I run my code before eject, the modal works perfectly, after eject in ios it works fine but for android the modal opens and the buttons on the page are raised with the modal instead of being overlayed. Not sure why this is happening.
Here is the code
openmodal(){
this.setState({open: true})
};

render() {

return (
<View >
  <Text >QR Code</Text>
  <Button
  block
  style={styles.button}
  onPress={() => this.openmodal()}>
        <Text>Open Modal</Text>
  </Button>
  <Button
  block
  style={styles.button}
  onPress={() => Actions.next()}>
        <Text>Next Page</Text>
  </Button>


  <Modal
    open={this.state.open}
    style={{alignItems: 'center'}}>
    <View style={styles.popup}>
      <Text style={styles.popuptext}>The Modal is open </Text>
      <Button
      block
      style={styles.button}
        onPress={() => this.setState({open: false})}>
        <Text>Back To main Page</Text>
      </Button>

    </View>
  </Modal>


</View>

Hi , I was trying to show the Modal's blur view above the navigation bar I have, but it doesn't work with a navigation bar appearing. How to achieve this?

Can you please help.

Thanks.

Hi,
The component has only modalDidOpen and modalDidClose events. Was there any reason to not have modalWillOpen and modalWillClose events? These are useful in some cases.

Also, what about adding events when the scale in animation has completed? This could be useful in cases where we need to calculate the layout/positions of elements within the Modal. We cannot use the modalDidOpen event for this purpose since it's called when the fade in is completed, not the scale.

Is there a way to remove modal readjustment when the keyboard is opened? I have a TextInput in the modal and when the keyboard is opened the whole model readjusts itself based on the current smaller view on top of the keyboard.

Hi, I have tried

animationDuration={0}
animationTension={0}

When trying to use Model. But we I have tried, view is getting displayed as animation way in fade way. As per [https://facebook.github.io/react-native/docs/modal.html], animationType is deprecated. Are we having any other way to display view without animation.

Just after using the import:
import Modal from 'react-native-simple-modal';

(React Native 0.26.1)

There is need to use BackHandler instead

The model always opens at the center of the screen. However moveUp function is working well. How to show the model at the top of the screen initially?

constructor(props) {
        super(props);
        this.state = {
            open: false,
            offset: -200,
        };
    }
moveUp = () => this.setState({offset: -200})
 openModal = () => this.setState({open: true})

    closeModal = () => this.setState({open: false})
    render() {
        return (
            <View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'center'}}>
                <TouchableOpacity onPress={this.openModal}>
                    <Text>Open modal</Text>
                </TouchableOpacity>
                <Modal
                    offset={this.state.offset}
                    open={this.state.open}
                    modalDidOpen={this.modalDidOpen}
                    modalDidClose={this.modalDidClose}>
                    <View style={{alignItems: 'center'}}>
                        <Text style={{fontSize: 20, marginBottom: 10}}>Hello world!</Text>
                        <TouchableOpacity
                            onPress={this.moveUp}>
                            <Text>Move modal up</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                            onPress={this.resetPosition}>
                            <Text>Reset modal position</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                            onPress={this.closeModal}>
                            <Text>Close modal</Text>
                        </TouchableOpacity>
                    </View>
                </Modal>
            </View>
        )
    };

Hello,
Last implementation of disableOnBackPress is buggy. Sorry, I mislead you. If we add event to backHandler and set disableOnBackPress true, then even if modal is opened or not, back button is not working anymore until modal will be unmounted. So, disableOnBackPress control must be run when only modal is open like my first implementation. Can you check it again?

Thanks in advance.

after installing this npm navigation not working in app,can anyone suggest me the solution

hi,

I am using this component and when the modal opens I want the background to be blur
How can I do this. ?

While using: react-native-simple-modal

My Code: to just say ok and close
<Modal
open={this.state.showErrorDialog}
closeOnTouchOutside={false}
style={{ alignItems: "center" }}
modalStyle={{
borderRadius: 10,
backgroundColor: "#F5F5F5"
}}>

<View style={{ padding: 10 }}>
{alertTitle}

<View style={{ paddingLeft: 10, paddingRight: 10, paddingBottom: 10 }}>
{alertBody}


<View style={{ flex: 1 }} />
<PaperButton
onPress={() => { this._closeErrorDialog() }}
mode="contained"
color={colors.pri}
style={[styles.alertBtn]}>
<Text style={{
fontFamily: 'Nunito-Bold',
color: colors.white,
justifyContent: 'center', alignItems: 'center'
}}>
okay

Getting Error
backend.js:12688 Animated: useNativeDriver was not specified. This is a required option and must be explicitly set to true or false

Please Guide me for the same

As of React Native 0.30.0, the zIndex style prop is supported. The library should take advantage of this. Setting it to something high by default (e.g. 10000) on the container style should work, then if need-be the developer can override this in the containerStyle. I would submit a PR to add this, but I don't have time at the moment.

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-simple-modal/index.js b/node_modules/react-native-simple-modal/index.js
index 3ae8a95..44a3b1a 100644
--- a/node_modules/react-native-simple-modal/index.js
+++ b/node_modules/react-native-simple-modal/index.js
@@ -5,12 +5,13 @@ import {
   View,
   ViewPropTypes,
   StyleSheet, 
-  TouchableOpacity,
   Animated,
   Platform,
   BackHandler
 } from 'react-native';
 
+import {TouchableOpacity} from 'react-native-gesture-handler'
+
 class Modal extends Component {
   static propTypes = {
     open: PropTypes.bool,
@@ -146,7 +147,7 @@ class Modal extends Component {
         {...this.props.containerProps}
       >
         <TouchableOpacity
-          style={styles.absolute}
+          style={styles.touchableOpacity}
           disabled={!this.props.closeOnTouchOutside}
           onPress={this.close}
           activeOpacity={0.75}
@@ -214,6 +215,9 @@ const styles = StyleSheet.create({
     left: 0,
     height: 0,
     width: 0
+  },
+  touchableOpacity:{
+	height: 1500,
   }
 });
 

This issue body was partially generated by patch-package.