jacklam718 / React Native Dialog Component

React Native Dialog Component

React Native Dialog Component for iOS & Android.

Pull request are welcomed. Please follow Airbnb JS Style Guide

Preview

Try With Exponent

Exponent

Installation

npm install --save react-native-dialog-component
# OR
yarn add react-native-dialog-component

Exposed Modules

• DialogManager
• DialogComponent
• Dialog
• DialogContent
• DialogButton
• DialogTitle
• Overlay
• Animation
• FadeAnimation
• ScaleAnimation
• SlideAnimation

Examples

Example

Usage With DialogManager

import DialogManager, { ScaleAnimation, DialogContent } from 'react-native-dialog-component';

show

DialogManager.show({
  title: 'Dialog',
  titleAlign: 'center',
  animationDuration: 200,
  ScaleAnimation: new ScaleAnimation(),
  children: (
    <DialogContent>
      <View>
        <Text>
          React Native Dialog Component
        </Text>
      </View>
    </DialogContent>
  ),
}, () => {
  console.log('callback - show');
});

update

DialogManager.update({
  title: 'Dialog Updated',
  titleAlign: 'center',
  animationDuration: 200,
  ScaleAnimation: new ScaleAnimation(),
  children: (
    <DialogContent>
      <View>
        <Text>
          New Content
        </Text>
      </View>
    </DialogContent>
  ),
}, () => {
  console.log('callback - update dialog');
});

dismiss

// dismiss dialog
DialogManager.dismiss(() => {
  console.log('callback - dismiss');
});

dismiss all

DialogManager.dismissAll(() => {
  console.log('callback - dismiss all');
});

Usage with DialogComponent

import { DialogComponent }from 'react-native-dialog-component';

<View style={styles.container}>
  <Button
    text="Show Dialog"
    onPress={() => {
      this.dialogComponent.show();
    }}
  />
  <DialogComponent
    ref={(dialogComponent) => { this.dialogComponent = dialogComponent; }}
  >
    <View>
      <Text>Hello</Text>
    </View>
  </DialogComponent>
</View>

Usage - With Animation

import { DialogComponent, SlideAnimation } from 'react-native-dialog-component';

<View style={styles.container}>
  <Button
    text="Show Dialog"
    onPress={() => {
      this.dialogComponent.show();
    }}
  />
  <DialogComponent
    ref={(dialogComponent) => { this.dialogComponent = dialogComponent; }}
    dialogAnimation = { new SlideAnimation({ slideFrom: 'bottom' }) }
  >
    <View>
      <Text>Hello</Text>
    </View>
  </DialogComponent>
</View>

Usage - With Dialog Title

import { DialogComponent, DialogTitle } from 'react-native-dialog-component';

<View style={styles.container}>
  <Button
    text="Show Dialog"
    onPress={() => {
      this.dialogComponent.show();
    }}
  />
  <DialogComponent
    title={<DialogTitle title="Dialog Title" />}
    ref={(dialogComponent) => { this.dialogComponent = dialogComponent; }}
  >
    <View>
      <Text>Hello</Text>
    </View>
  </DialogComponent>
</View>

Usage - Wrape the content use DialogContent

import { DialogComponent, DialogTitle } from 'react-native-dialog-component';

<View style={styles.container}>
  <Button
    text="Show Dialog"
    onPress={() => {
      this.dialogComponent.show();
    }}
  />
  <DialogComponent
    dialogTitle={<DialogTitle title="Dialog Title" />}
    ref={(dialogComponent) => { this.dialogComponent = dialogComponent; }}
  >
    <DialogContent>
      <View>
        <Text>Hello</Text>
      </View>
    </DialogContent>
  </DialogComponent>
</View>

Props

DialogComponent

DialogContent

DialogTitle

DialogButton

Animation

Params for (*)Animation

FadeAnimation

ScaleAnimation

SlideAnimation