React-native-dialog-component NPM

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

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 Dialog Title

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; }}
  >
    <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

Prop	Type	Default	Note
`dialogTitle`	`React Element`		You can pass a `DialogTitle` component or pass a `View` for customizing titlebar
`width`	`Number`	Your device width	The Width of Dialog, you can use fixed width or use percentage
`height`	`Number`	300	The Width of Dialog, you can use fixed height or use percentage
`dialogAnimation`		`FadeAnimation`	animation for dialog
`dialogStyle`	`Object` or `Number`
`animationDuration`	`Number`	`200`
`overlayPointerEvents`	`String`		Available option: `auto`, `none`
`overlayBackgroundColor`	`String`	`#000`
`overlayOpacity`	`Number`	`0.5`
`dismissOnTouchOutside`	`Bool`	`true`	When touch overlay will close dialog, but if `haveOverlay` is false then the `dismissOnTouchOutside` won't work
`dismissOnHardwareBackPress`	`Bool`	`true`	Only for Android
`haveOverlay`	`Bool`	`true`	If false won't show overlay when dialog show
`show`	`Bool`	`false`
`onShown`	`Function`		You can pass onShown function as a aallback function, will call the function while dialog shown
`onDismissed`	`Function`		You can pass onDismissed function as a callback function, will call the function while dialog dismissed
`actions`	`Array`		Array of `DialogButton` component for example: `[<DialogButton text="DISMISS", align="center" onPress={this.dismissDialog}/>]`

DialogContent

Prop	Type	Default	Note
`contentStyle`			Dialog's content container

DialogTitle

Prop	Type	Default
`title`	`String`
`titleStyle`	`Object` or `Number`
`titleTextStyle`	`Object` or `Number`
`titleAlign`	`String`	`center`
`haveTitleBar`	`Bool`	`true`

DialogButton

Prop	Type	Default	Note
`text`	`String`
`align`	`String`	`center`	The position of the button. Available option: `left`, `center`, `right`
`onPress`	`Function`
`buttonStyle`	`Object` or `Number`
`textStyle`	`Object` or `Number`
`textContainerStyle`	`Object` or `Number`
`disabled`	`Boolean`	`false`
`activeOpacity`	`Number`