jacklam718 / react-native-modals Goto Github PK

There should be a prop like "onlyRenderWhenShown" so that the component would render children before showing and disable rendering after animation of exit is done.

I think someone may want to use rectangle dialog content without any borderRadius or with different borderRadius. However, by using existing codes, we cannot easily set up borderRadius value without modifying codes.

I think that we can add a property for borderRadius and control the borderRadius of dialog content.

I also suggest that documentation about the way passing props of PopupDialog be more made up for developers to use this library more easily.

If you think it's a good idea, I am going to make PR for this issue. :)

Starting the app in one orientation, then later changing to a different orientation doesn't change the popup dialog. For example, starting in landscape then rotating to portrait, then opening the popup. The pop up will be off centered as if it is still landscape.

I can only say for sure this happens on iOS emulator, I have not tested on device or android.

Hey @jacklam718 :)
Good work!
I'm having troubles running the example app.
First thing I've noticed in the package.json is that you're requiring the file from your (very) own personal pc, thus I've got errors all over...
Will try to solve it and PR

Back button on Android go back instead of closing the dialog.

any solution for that?

nice plugin

let actions = [ act1, act2, act3];
<PopupDialog height={100} width={0.7} ref={ref => this.dialog = ref} actions={actions} />

as the title says, can I change the actions before show???

I'm attempting to re-use my code for the popup dialog as a navigation menu throughout my app. The button appears properly when used in other pages, but the popup does not show.

Code for popup dialog:

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import PopupDialog, { DialogTitle } from 'react-native-popup-dialog';

class MenuPopup extends Component {
    render(){
        return(
            <View>
                <Button title="Navigation" onPress={() => this.popUpDialog.show()} />
                <PopupDialog
                    dialogTitle={<DialogTitle title="Navigation" />}
                    ref={ (popupDialog) => this.popUpDialog = popupDialog } 
                >
                    <View>
                        <Text>This is my menu</Text>
                    </View>
                </PopupDialog>
            </View>
        )
    }
}

module.exports = MenuPopup;

Use in another page:

import MenuPopup from './MenuPopup';

render(){
    return (      
        <Image source={require('./images/pixelsky.jpg')} style={styles.backgroundImage}>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderRow.bind(this)}
          />
          <MenuPopup />          
        </Image>      
    );
}

The button's onPress function fires properly; if I change it to log something to console, I see the message. But it seems the .show() method is not displaying the popup properly. Am I misunderstand the use of this package perhaps?

Hello,

It seems that the pop-up can't be shown when it is inside another component. Looks like a z-index problem like in CSS.

I'm using react-native-calendars , and inside the <Agenda> component I am rendering multiple items.
Here is a portion of my code where the <PopupDialog> component is present.

 renderItem(item) {
    return (
      <View style={[styles.item]}>
        <Grid>
          <Col size={65}>
            <Text style={[styles.hour]}>{item.hour}</Text>
            <Text style={[styles.name]}>{item.name}</Text>
            <Text style={[styles.prestation]}>{item.prestation}</Text>
          </Col>
          <Col size={35} style={{paddingTop : 10}}>
            <Button rounded info style={StyleSheet.flatten(styles.badge)}
            onPress={() => {this.popupDialog.show();}}>
              <Icon active name='search'/>
              <Text Détails</Text>
            </Button>
          </Col>
        </Grid>
        <PopupDialog
          ref={(popupDialog) => { this.popupDialog = popupDialog; }}
        >
          <View>
            <Text>Hello</Text>
          </View>
        </PopupDialog>
      </View>
    );
  }

Hey, just relized nothing was presented inside the modal (rather than title)
fixed it in f9efe07 and is PRed in #2

Hey, thank's for this, I'm trying to use the popup in my project for android, I'm getting this error when I press the button

Cannot read property 'openDialog' of undefined

The code is exactly as the example you have here https://github.com/jacklam718/react-native-popup-dialog/blob/master/popupDialogExample/PopupDialogExample.js

"react": "15.3.2",
"react-native": "0.33.0",
"react-native-popup-dialog": "0.0.6",

Any reason why is saying that?

Hello! First of all - thanks for this library.

I have an difficulty with dialog position on the ScrollView. My ScrollView has a few forms with close button and I want to show "Are you sure? YES/NO" dialog when user clicks on close button.
But I don't know how I can center dialog window at the middle of a device screen. Does someone have some experience with it?

@jacklam718 I would need to change the background color and text color for the titlebar. Also, if i need to reduce the top-margin in Dialog.js(line 151)

The status bar and the layer of the popupDialog are the same, but the overlay does not cover the status bar for multiple attempts. How can I hide it?

I'm using the NativeBase for the UI and trying to implement the missing parts like popups.

I got it working like the example, but encounted an issue when trying to add a submit button.

<Container>
    <Content>
          <List dataArray={this.state.items}
            renderRow={(item) =>
              <ListItem key={item.key} onPress={() => {
                  this.popupDialog.openDialog();
                }}>
                  <Text>{item.title}</Text>
              </ListItem>
            }
          />

          <PopupDialog
            ref={(popupDialog) => { this.popupDialog = popupDialog; }}
            dialogTitle={<DialogTitle title="Be Awesome!" />}
            actions={[<DialogButton text="Submit" align="center" onPress={this.closeDialog} key="ImSpecial"/>]}
            dialogAnimation = { new SlideAnimation({ slideFrom: 'bottom' }) }
          >
            <View>
              <Text>React Community is Awesome</Text>
            </View>
          </PopupDialog>

        </Content>
</Container>

Pressing the Submit button doesn't close the dialog... What am I missing?

I use the library version is ^0.6.22, When I set dismissOnTouchOutside = false, haveOverlay = true, it does not work properly. Why is this?

Hey guys,

I'd like to know how I can make the popup close when the user clicks a button.

Thanks,

Version: 0.7.22
RN: 0.42.3
Android 23

import PopupDialog, {DialogTitle, DialogButton, ScaleAnimation} from 'react-native-popup-dialog'
export class MyDialog extends Component {
dialog:PopupDialog;
    constructor(props) {
        super(props);
        this.show = this.show.bind(this);
        this.dismiss = this.dismiss.bind(this);
    }

    show(onShowed: ?Function): void {
        this.setState({loading: false, failure: false});
        this.dialog.show(onShowed);
    }

    dismiss(onDismissed: ?Function): void {
        this.dialog.dismiss(onDismissed);
    }
   ...
render(){

  return (
            <PopupDialog
                width={230}
                height={180}
                ref={(s)=>{this.dialog=s}} />)}

This issue happened when the tabbariOS is used, in this case we use TabNavigator as example, in the switching to another page and switch back to the page where the MyDialog is located. The dialog.show does not pop. I also tried with bare PopupDialog and it doesnt work.

Dialog disappears when I make a change in state (in which causes to re-render the page), only the gray modal background stays.

How can I have this dialog open up automatically when a component is loaded. I tried so many different combinations in my render:

1. {() => this.popupDialog.show()} this just doesn't do anything in my app
2. {this.popupDialog.show()} this gives me a warning: undefined is not an object this.popupDialog.show
3. {this.popupDialog.show}

none of these work, but if I make a touchableOpacity and do:
onPress={() => {
this.popupDialog.show();
}}

the dialog pops up. So how can I start it up when my screen is loaded?

If the dialog open when pressing on back Android the dialog should be closed instead of returning back from the page, how to achieve this?

I tried it with flatlist calling it with render item but didnt worked. Though outside flatlist , it works but I want it to be unique for each row .

I want to reduce the speed of the popup dialog.I used the like..

<PopupDialog
ref={"cartClosePopup"}
dialogStyle={{height: 300, width: 300, backgroundColor: 'rgba(0, 0, 0, .0)',}}
dialogAnimation={slideAnimation}
closeOnTouchOutside={false}
overlayBackgroundColor={'#000000'}
overlayOpacity={0.8}
animationDuration={1600}

        >

But it is not taking the speed i have given.

It looks like it hasn't been wired up to use the closeOnTouchOutside prop

Could you please check: function from onShowed is not being called. I tried onDismiss and it is ok. here is my code:

<PopupDialog
              ref={(popupDialog) => { this.popupDialog = popupDialog; }}
              dialogAnimation = { new SlideAnimation({ slideFrom: 'bottom' }) }
              onShowed = {()=>{Alert.alert("asd","asd")
              console.log("hello")}}
              >
              <View style={{flexDirection: 'column'}}>
                <Text style={styles.popupTitle}>{this.state.popupTitle}</Text>
              </View>
</PopupDialog>

Finally it is confirmed that the dialog pop will freeze the whole screen when the code is used. I tried to take out this part and it becomes normal. I have also done the code refreshing and recompiling. const scanscale = new ScaleAnimation(); is not working.

RN 0.42
"react-native-popup-dialog": "^0.7.22",

The app freeze on iOS 10.2 when dialog pop module is used. here is the code:

import PopupDialog, {DialogTitle, DialogButton, ScaleAnimation} from 'react-native-popup-dialog';
const scanscale = new ScaleAnimation();

 <PopupDialog
                    width={200}
                    height={350}
                    dialogAnimation={scanscale}
                    ref={(instance) => {this.dialogControl=instance}}
                    closeOnTouchOutside={false}
                    dismissOnTouchOutside={false}
                ></PopupDialog>

expected behavior:
pop up the box as normal.

Use BackHandler instead: https://github.com/jacklam718/react-native-popup-dialog/blob/master/src/components/Dialog.js

Hello!
Thank you for your library. But, when I use the dialog in a page with Navigation, the dialog can not overlay the Navigation. Can you help me how to overlay the Navigation

I see this package doesn't have any features, which will allow the popup to disapperar after, for instance, 3 sec. If there is, then please point me. Thanks in advance

I really want to implement popup dialog view like this in your README file.

But I couldn't figure out how to make the dialog view.
I already see your example code but there are insufficient information for my purpose.
I also tried using marginLeft and marginRight properties in dialogContentView styling. This trying didn't work.

How can I do the design work for view of dialog content?

Apparently the popup is hidden behind react-native-elements' {card} container. Tried using elevation and some other methods but can't get it working yet. Any idea?

I have some problem with ScrollView into PopupDialog.
This is my code:

<View style={styles.container}>
        <Button
          text="Show Dialog"
          onPress={() => {
            this.popupDialog.show();
          }}
        />
        <PopupDialog
          ref={(popupDialog) => { this.popupDialog = popupDialog; }}
          dialogAnimation = { new SlideAnimation({ slideFrom: 'bottom' }) }
          dialogTitle={<DialogTitle title="DialogTitle "/>}
          width={300}
          actions={[
            <Text>
              <ScrollView>
                <DialogButton
                  text="ACCEPT"
                  onPress={() => {}}
                  key="button-1"
                />,
                <DialogButton
                  text="ACCEPT"
                  onPress={() => {}}
                  key="button-2"
                />,
                <DialogButton
                  text="ACCEPT"
                  onPress={() => {}}
                  key="button-3"
                />,
                <DialogButton
                  text="ACCEPT"
                  onPress={() => {}}
                  key="button-4"
                />,
                <DialogButton
                  text="ACCEPT"
                  onPress={() => {}}
                  key="button-5"
                />,
              </ScrollView>
            </Text>
          ]}
        />
      </View>

Because I have many buttons into my dialog, I want to scroll down to see all buttons that I have into dialog. How I can do that? I try with ScrollView but it's not working.

I want to change contentView background color, but not cover a new view set background color

follow code not work

<PopupDialog
            style={{backgroundColor: 'transparent'}}
            ref={(popupDialog) => { this.popupDialog = popupDialog;}}
            width={Dimensions.get('window').width}
            height={Dimensions.get('window').height}
            haveTitleBar={false}
            dialogAnimation = { new SlideAnimation({ slideFrom: 'bottom' }) }
            onClosed={()=>{Actions.pop()}}
            >
              {this._popupView()}
            </PopupDialog>

The contentView still white background color

where is the call back function resides for pop dialog dismiss when i click anywhere on the screen.please help us

@jacklam718 Is it possible to add a close button 'x' on the title bar?

I have a dialog with a TextInput, when the input is focused, the keyboard opens and covers it. Is it possible to resize the dialog when the keyboard opens?

https://github.com/Andr3wHur5t/react-native-keyboard-spacer did not work (resized the main view, not the modal).

Thanks!

"react-native-popup-dialog": "^0.9.29",
"react-native": "^0.45.1",
"react": "^16.0.0-alpha.13",

Error happens during npm start

I use
{"react": "16.0.0-alpha.12",
"react-native": "0.45.1",
"react-native-popup-dialog": "^0.9.33"}

Unknown plugin "flow-react-proptypes" error occoured!

How can i fix this?

Hi,
we are trying to change the pop dialog position from center to top.. but it is not working.
please help us

Main button i used to open dialog shown on popup dialog.
This is my script:
`/**

• Sample React Native App
• https://github.com/facebook/react-native
• @flow
  */

import React, { Component } from 'react';
import PopupDialog from 'react-native-popup-dialog';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button,
Alert,
TextInput,
ToastAndroid,
Modal,
TouchableHighlight
} from 'react-native';
export default class latihan extends Component {
_handlePress = () => {
Alert.alert(this.state.username);
}
state = {modalVisible: false, }
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
render() {
return (


Good morning, Chika!


To get started, edit index.android.js


Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu

<TextInput
onChangeText={(text) => this.setState({username: text})}
style={{height: 40, width: 200, borderColor: 'gray', borderWidth: 1}} />
<Button
onPress={() => ToastAndroid.show('Nama Saya adalah ' + this.state.username, ToastAndroid.LONG)}
title="" />
<Button
text="Show Dialog"
onPress={() => {
this.popupDialog.show();
}}
title="xxxxxxxxxxxxx"
/>
<Modal
animationType={"slide"}
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => ToastAndroid.show('Modal ditutup ', ToastAndroid.LONG)}
>
<View style={{marginTop: 22}}>

Hello World!
<TouchableHighlight
onPress={() => {
this.setModalVisible(!this.state.modalVisible)
}}>
Hide Modal




<PopupDialog
style={styles.popup}
ref={(popupDialog) => {
this.popupDialog = popupDialog;
}}
>

Hello



);
}
}

        const styles = StyleSheet.create({
            container: {
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor: '#F5FCFF',
            },
            welcome: {
                fontSize: 20,
                textAlign: 'center',
                margin: 10,
            },
            instructions: {
                textAlign: 'center',
                color: '#333333',
                marginBottom: 5,
            },
            popup: {
                zIndex: 999999999
            },
        });
        AppRegistry.registerComponent('latihan', () => latihan);

`

In my dialog content, there are buttons to change states. (onPress handlers of the buttons are going to change the state)
When I click the button and change the state, my popup dialog view would be gone!
When I don't use Animation, it works fine.

while I upgrade 0.5.20 -> 0.7.22
it shows the error below at runtime:
node_modules/react-native-popup-dialog/src/components/Dialog.js: Unexpected token, expected , (16:14)
seems the problem is at
import { type DialogType} from ...

run on:
react 15.4.2
react-native 0.41.2

any suggestion??

The popup will display, and the inputtext will be inside of the popup. However, when I got to type anything in the popup, the popup will disappear. If I click outside to dismiss it, and then click my button again, whatever I typed into the inputtext is there...

How can I have it so the popup doesnt disappear when you type in a inputtext

Hello,
First I want to tell you thank you for your nice library.
Are you have another source for example page? Because this page: https://github.com/jacklam718/react-native-popup-dialog/blob/master/popupDialogExample/PopupDialogExample.js
not working.
Thank you again!

How to open the dialog in specific location on the screen

The version 0.7.26 give this error when running react-native start:

UnableToResolveError: Unable to resolve module prop-types from [home]/node_modules/react-native-popup-dialog/dist/Type.js: Module does not exist in the module map or in these directories: [home]/node_modules

Rollbacking to version 0.7.22 by running npm install --save [email protected] solves the issue, but forces us to use the outdated version.

Hello, thanks for the great project.

Just upgraded to the new version and I am getting an error while transforming the files. Not sure what may have changed but I was upgrading from the previous version (0.9.32). For the record I was updating to 0.9.33.

I got this error...

Bundling `index.ios.js`  98.0% (869/878), failed.
error: bundling failed: "TransformError: /Users/user/Documents/code/project/mobile/
node_modules/react-native-popup-dialog/dist/PopupDialog.js: Unknown plugin 
\"flow-react-proptypes\" specified in \"/Users/user/Documents/code/project/
mobile/node_modules/react-native-popup-dialog/.babelrc.env.development\" at 0, 
attempted to resolve relative to \"/Users/user/Documents/code/project/mobile/
node_modules/react-native-popup-dialog\""

I'm not sure what the issue is but I could tackle it if you want (if you can reproduce it.) All I did was run yarn add [email protected] and it didn't work.

If used with https://github.com/aksonov/react-native-router-flux the overlay layer of the dialog is hidden by the navbar. Is there any way to draw it on top of the navbar?

Thanks

Rotating device(iPad) from portrait to landscape, the overlayer does not auto layout.

I havent figured out why yet, but after adding this component and looking to display it in render() , it takes like 10 seconds or so before it surfaces. If you have encountered this before appreciate if u can let me know why. ill keep looking at this in the mean time when i get a chance.