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

const slideAnimation = new SlideAnimation({ slideFrom: 'bottom' });
const scaleAnimation = new ScaleAnimation();
const fadeAnimation = new FadeAnimation({ animationDuration: 150 });

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  dialogContentView: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  navigationBar: {
    borderBottomColor: '#b5b5b5',
    borderBottomWidth: 0.5,
    backgroundColor: '#ffffff',
  },
  navigationTitle: {
    padding: 10,
  },
  navigationButton: {
    padding: 10,
  },
  navigationLeftButton: {
    paddingLeft: 20,
    paddingRight: 40,
  },
  navigator: {
    flex: 1,
    // backgroundColor: '#000000',
  },
});

export default class App extends Component {
  state = {
    dialogShow: false,
  };

  showScaleAnimationDialog = () => {
    this.scaleAnimationDialog.show();
  }

  showSlideAnimationDialog = () => {
    this.slideAnimationDialog.show();
  }

  showFadeAnimationDialog = () => {
    this.fadeAnimationDialog.show();
  }

  renderScene = () => (
    <View style={styles.container}>
      <Button
        title="Show Dialog - Default Animation"
        onPress={this.showFadeAnimationDialog}
      />

      <Button
        title="Show Dialog - Scale Animation"
        onPress={this.showScaleAnimationDialog}
      />

      <Button
        title="Show Dialog - Slide Animation"
        onPress={this.showSlideAnimationDialog}
      />
    </View>
    )

  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={styles.container}>
          <Button
            title="Show Dialog - Default Animation"
            onPress={this.showFadeAnimationDialog}
          />

          <Button
            title="Show Dialog - Scale Animation"
            onPress={this.showScaleAnimationDialog}
          />

          <Button
            title="Show Dialog - Slide Animation"
            onPress={this.showSlideAnimationDialog}
          />
        </View>

        <PopupDialog
          ref={(popupDialog) => {
            this.scaleAnimationDialog = popupDialog;
          }}
          dialogAnimation={scaleAnimation}
          dialogTitle={<DialogTitle title="Popup Dialog - Scale Animation" />}
          actions={[
            <DialogButton
              text="DISMISS"
              onPress={() => {
                this.scaleAnimationDialog.dismiss();
              }}
              key="button-1"
            />,
          ]}
        >
          <View style={styles.dialogContentView}>
            <Button
              title="Show Dialog - Default Animation"
              onPress={this.showFadeAnimationDialog}
            />
          </View>
        </PopupDialog>

        <PopupDialog
          dialogTitle={<DialogTitle title="Popup Dialog - Slide Animation" />}
          ref={(popupDialog) => {
            this.slideAnimationDialog = popupDialog;
          }}
          dialogAnimation={slideAnimation}
        >
          <View style={styles.dialogContentView}>
            <Text>Slide Animation</Text>
          </View>
        </PopupDialog>

        <PopupDialog
          ref={(fadeAnimationDialog) => {
            this.fadeAnimationDialog = fadeAnimationDialog;
          }}
          dialogTitle={<DialogTitle title="Popup Dialog - Default Animation" />}
        >
          <View style={styles.dialogContentView}>
            <Text>Default Animation</Text>
          </View>
        </PopupDialog>
      </View>
    );
  }
}

@@ -70,16 +70,8 @@
 heet
-, Button
  %7D f
@@ -1317,441 +1317,8 @@
  %7D%0A%0A
-  renderScene = () =%3E (%0A    %3CView style=%7Bstyles.container%7D%3E%0A      %3CButton%0A        title=%22Show Dialog - Default Animation%22%0A        onPress=%7Bthis.showFadeAnimationDialog%7D%0A      /%3E%0A%0A      %3CButton%0A        title=%22Show Dialog - Scale Animation%22%0A        onPress=%7Bthis.showScaleAnimationDialog%7D%0A      /%3E%0A%0A      %3CButton%0A        title=%22Show Dialog - Slide Animation%22%0A        onPress=%7Bthis.showSlideAnimationDialog%7D%0A      /%3E%0A    %3C/View%3E%0A    )%0A%0A
   re
@@ -1415,32 +1415,38 @@
 er%7D%3E%0A          %3C
+Dialog
 Button%0A         
@@ -1441,36 +1441,35 @@
 on%0A            t
-itle
+ext
 =%22Show Dialog - 
@@ -1555,32 +1555,38 @@
  /%3E%0A%0A          %3C
+Dialog
 Button%0A         
@@ -1581,36 +1581,35 @@
 on%0A            t
-itle
+ext
 =%22Show Dialog - 
@@ -1694,32 +1694,38 @@
  /%3E%0A%0A          %3C
+Dialog
 Button%0A         
@@ -1720,36 +1720,35 @@
 on%0A            t
-itle
+ext
 =%22Show Dialog - 
@@ -2397,16 +2397,22 @@
        %3C
+Dialog
 Button%0A 
@@ -2425,20 +2425,19 @@
        t
-itle
+ext
 =%22Show D

Update example app