React Native Alert View Component

The best AlertView for React Native.

Support me with a Follow

Getting Started

First, cd to your RN project directory, and install RNMK through rnpm . If you don't have rnpm, you can install RNMK from npm with the command npm i -S rnkit-alert-view and link it manually (see below).

iOS

• ####React Native < 0.29 (Using rnpm)

  rnpm install rnkit-alert-view

• ####React Native >= 0.29 $npm install -S rnkit-alert-view

  $react-native link rnkit-alert-view

Manually

1. Add node_modules/rnkit-alert-view/ios/RNKitAlertView.xcodeproj to your xcode project, usually under the Libraries group
2. Add libRNKitAlertView.a (from Products under RNKitAlertView.xcodeproj) to build target's Linked Frameworks and Libraries list

Android

• ####React Native < 0.29 (Using rnpm)

  rnpm install rnkit-alert-view

• ####React Native >= 0.29 $npm install -S rnkit-alert-view

  $react-native link rnkit-alert-view

Manually

1. JDK 7+ is required
2. Add the following snippet to your android/settings.gradle:

include ':rnkit-alert-view' project(':rnkit-alert-view').projectDir = new File(rootProject.projectDir, '../node_modules/rnkit-alert-view/android/app')

1. Declare the dependency in your android/app/build.gradle

dependencies {     ...     compile project(':rnkit-alert-view') }

1. Import import io.rnkit.alertview.AlertViewPackage; and register it in your MainActivity (or equivalent, RN >= 0.32 MainApplication.java):

@Override protected List<ReactPackage> getPackages() {     return Arrays.asList(             new MainReactPackage(),             new AlertViewPackage()     ); }

Finally, you're good to go, feel free to require rnkit-alert-view in your JS files.

Have fun! 🤘

Basic Usage

Import library

import Alert from 'rnkit-alert-view'; 

Code

Alert.alert(       'Alert Title',       'alertMessage',       [         {text: 'Cancel', onPress: () => console.log('Cancel Pressed!'), style: 'cancel',},         {text: 'Ok', onPress: () => console.log('OK Pressed!')},         {text: 'Destructive', onPress: () => console.log('Destructive Pressed!'), style: 'destructive',},       ],     );

Alert.alert(       'Alert Title',       'alertMessage',       [         {text: 'Cancel', onPress: () => console.log('Cancel Pressed!'), style: 'cancel'},         {text: 'Ok', onPress: (text) => console.log('Ok Pressed!' + text)},       ],       'plain-text',       '',       1     );

Params

• ButtonsArray

type ButtonsArray = Array<{   text?: string,   onPress?: ?Function,   style?: AlertButtonStyle, }>;

• AlertType

type AlertType = $Enum<{   'default': string,   'plain-text': string }>;

• AlertButtonStyle

type AlertButtonStyle = $Enum<{   'default': string,   'cancel': string,   'destructive': string, }>;

Contribution

• @simamn The main author.

Thanks

@saiwu-bigkoo - Android-AlertView 仿iOS的AlertViewController @adad184 - MMPopupView Pop-up based view(e.g. alert sheet), can easily customize.

Questions

Feel free to contact me or create an issue

made with ♥