react-native-native-dialogs

A wrapper of native-coded dialogs for simple usage.

Install

This module is not on npm, install from github instead.

References

1. Apple Human Interface Guidelines
2. React Native Doc
3. Material Design
4. Material Dialogs by @afollestad
5. react-native-dialogs by @aakashns
6. Hekla app

Setup

Android

Modify android/build.gradle as following:

buildscript {
    ext.kotlin_version = '1.3.50'
    ...
    dependencies {
      ...
      classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

Usage

import RNND from "react-native-native-dialogs";

RNND.showActionSheet({
  options: ["left", "right", "middle"],
  onSelect: ({ label, index }) => {
    console.log(label, index);
  }
});

RNND.prompt({
  title: "Prompt",
  detailText: "some messages",
  textInputConfig: {
    secureTextEntry: true,
    placeholder: "user name",
    maxLength: 16,
    minLength: 6,
    keyboardType: "this.state.keyboardType"
  },
  onSubmit: text => {
    console.log(text)
  }
});

Screenshots

Android simple list (item selected):

iOS Action sheet (item selected, title align, icon)

Android prompt (keyboard type: url, max length 15)

iOS prompt (keyboard type URL)