React Native – Popup Dialog

In this tutorial we are going to learn How we can use popup dialogue in our React Native Application and for that I am going to use react-native-popup-dialog.

First we have install dependency for the popup dialog.

npm install react-native-popup-dialog --save

Example

Basic Usage
import Dialog, { DialogContent } from 'react-native-popup-dialog';
import { Button } from 'react-native'
 
<View style={styles.container}>
  <Button
    title="Show Dialog"
    onPress={() => {
      this.setState({ visible: true });
    }}
  />
  <Dialog
    visible={this.state.visible}
    onTouchOutside={() => {
      this.setState({ visible: false });
    }}
  >
    <DialogContent>
      {...}
    </DialogContent>
  </Dialog>
</View>
Usage – Animation
import Dialog, { SlideAnimation, DialogContent } from 'react-native-popup-dialog';
 
<View style={styles.container}>
  <Dialog
    visible={this.state.visible}
    dialogAnimation={new SlideAnimation({
      slideFrom: 'bottom',
    })}
  >
    <DialogContent>
      {...}
    </DialogContent>
  </Dialog>
</View>
Usage – Dialog Dialog Title
import Dialog, { DialogTitle, DialogContent } from 'react-native-popup-dialog';
 
<View style={styles.container}>
  <Dialog
    visible={this.state.visible}
    dialogTitle={<DialogTitle title="Dialog Title" />}
  >
    <DialogContent>
      {...}
    </DialogContent>
  </Dialog>
</View>
Usage – Dialog Action
import Dialog, { DialogFooter, DialogButton, DialogContent } from 'react-native-popup-dialog';
 
<View style={styles.container}>
  <Dialog
    visible={this.state.visible}
    footer={
      <DialogFooter>
        <DialogButton
          text="CANCEL"
          onPress={() => {}}
        />
        <DialogButton
          text="OK"
          onPress={() => {}}
        />
      </DialogFooter>
    }
  >
    <DialogContent>
      {...}
    </DialogContent>
  </Dialog>
</View>
Props
Dialog
PropTypeDefaultNote
visiblebooleanfalse
roundedbooleantrue
useNativeDriverbooleantrue
childrenany
dialogTitle?React ElementYou can pass a DialogTitle component or pass a View for customizing titlebar
width?NumberYour device widthThe Width of Dialog, you can use fixed width or use percentage. For example 0.5 it means 50%
height?Number300The Height of Dialog, you can use fixed height or use percentage. For example 0.5 it means 50%
dialogAnimation?FadeAnimationanimation for dialog
dialogStyle?any
containerStyle?anynullFor example: { zIndex: 10, elevation: 10 }
animationDuration?Number200
overlayPointerEvents?StringAvailable option: autonone
overlayBackgroundColor?String#000
overlayOpacity?Number0.5
hasOverlay?Booleantrue
onShow?FunctionYou can pass shown function as a callback function, will call the function when dialog shown
onDismiss?FunctionYou can pass onDismiss function as a callback function, will call the function when dialog dismissed
onTouchOutside?Function() => {}
onHardwareBackPress?Function() => trueHandle hardware button presses
footer?React Elementnullfor example: <View><Button text="DISMISS" align="center" onPress={() => {}}/></View>
DialogTitle
PropTypeDefaultNote
titleString
style?anynull
textStyle?anynull
align?StringcenterAvailable option: leftcenterright
hasTitleBar?Booltrue
DialogContent
PropTypeDefaultNote
childrenany
style?anynull
DialogFooter
PropTypeDefaultNote
childrenDialogButton
bordered?Booleantrue
style?anynull
DialogButton
PropTypeDefaultNote
textString
onPressFunction
align?StringcenterAvailable option: leftcenterright
style?anynull
textStyle?anynull
activeOpacity?Number0.6
disabled?Booleanfalse
bordered?Booleanfalse
Overlay
PropTypeDefaultNote
visibleBoolean
opacityNumber0.5
onPress?Function
backgroundColor?string#000
animationDuration?Number200
pointerEvents?StringnullAvailable option: autonone
useNativeDriver?Booleantrue

App.js Code

import React, { Component } from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';
import Dialog, {
  DialogTitle,
  DialogContent,
  DialogFooter,
  DialogButton,
  SlideAnimation,
  ScaleAnimation,
} from 'react-native-popup-dialog';

export default class App extends Component {
  state = {
    defaultAnimationDialog: false,
    scaleAnimationDialog: false,
    slideAnimationDialog: false,
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={styles.container}>
          <Button
            title="Default Animation Dialog"
            onPress={() => {
              this.setState({
                defaultAnimationDialog: true,
              });
            }}
          />

          <Button
            title="Scale Animation Dialog"
            onPress={() => {
              this.setState({
                scaleAnimationDialog: true,
              });
            }}
          />

          <Button
            title="Slide Animation Dialog"
            onPress={() => {
              this.setState({
                slideAnimationDialog: true,
              });
            }}
          />
        </View>

        <Dialog
          onDismiss={() => {
            this.setState({ defaultAnimationDialog: false });
          }}
          width={0.9}
          visible={this.state.defaultAnimationDialog}
          rounded
          actionsBordered
          dialogTitle={
            <DialogTitle
              title="Default Animation Dialog Simple"
              style={{
                backgroundColor: '#F7F7F8',
              }}
              hasTitleBar={false}
              align="left"
            />
          }
          footer={
            <DialogFooter>
              <DialogButton
                text="CANCEL"
                bordered
                onPress={() => {
                  this.setState({ defaultAnimationDialog: false });
                }}
                key="button-1"
              />
              <DialogButton
                text="OK"
                bordered
                onPress={() => {
                  this.setState({ defaultAnimationDialog: false });
                }}
                key="button-2"
              />
            </DialogFooter>
          }>
          <DialogContent
            style={{
              backgroundColor: '#F7F7F8',
            }}>
            <Text>Here is an example of default animation dialog</Text>
          </DialogContent>
        </Dialog>

        <Dialog
          onTouchOutside={() => {
            this.setState({ scaleAnimationDialog: false });
          }}
          width={0.9}
          visible={this.state.scaleAnimationDialog}
          dialogAnimation={new ScaleAnimation()}
          onHardwareBackPress={() => {
            console.log('onHardwareBackPress');
            this.setState({ scaleAnimationDialog: false });
            return true;
          }}
          dialogTitle={
            <DialogTitle
              title="Scale Animation Dialog Sample"
              hasTitleBar={false}
            />
          }
          actions={[
            <DialogButton
              text="DISMISS"
              onPress={() => {
                this.setState({ scaleAnimationDialog: false });
              }}
              key="button-1"
            />,
          ]}>
          <DialogContent>
            <View>
              <Text>
                Here is an example of scale animation dialog. Close using back
                button press
              </Text>
              <Button
                title="Close"
                onPress={() => {
                  this.setState({ scaleAnimationDialog: false });
                }}
                key="button-1"
              />
            </View>
          </DialogContent>
        </Dialog>

        <Dialog
          onDismiss={() => {
            this.setState({ slideAnimationDialog: false });
          }}
          onTouchOutside={() => {
            this.setState({ slideAnimationDialog: false });
          }}
          visible={this.state.slideAnimationDialog}
          dialogTitle={<DialogTitle title="Slide Animation Dialog Sample" />}
          dialogAnimation={new SlideAnimation({ slideFrom: 'bottom' })}>
          <DialogContent>
            <Text>
              Here is an example of slide animation dialog. Please click outside
              to close the the dialog.
            </Text>
          </DialogContent>
        </Dialog>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
0 0 votes
Article Rating

Learn React Native App available on play store Download Now.
Do you want to hire us for your Project Work? Then Contact US.
Spread the love
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x