ReactNative: ボタンを押したらアラート・確認・入力ダイアログを表示

alert / confirm / prompt のダイアログを表示します。

まず iOS 用の prompt は ReactNative 標準パッケージに含まれているのですが、Android 用はないため、以下のパッケージを入れます。

nom install react-native-prompt-android --save

ネイティブのライブラリを使用しているので、link します

react-native link react-native-prompt-android

Android / iOS の判断は Platform.OS の値を見て分岐でできます。
詳しくは公式ドキュメントのこちらを見ていただくとして、下記コードで分岐しているところを探してみてください。

import React, { Component } from 'react';
import {
  AppRegistry,
  Alert,
  Button,
  StyleSheet,
  View,
  Text,
  AlertIOS,
  Platform,
} from 'react-native';
import prompt from 'react-native-prompt-android';

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#ffffff",
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      password: ''
    };
  }

  showAlert() {
    Alert.alert(
      'タイトル',
      '説明説明説明説明',
      [
        {text: 'OK', onPress: () => console.log('OK Pressed'), style: 'default'},
      ],
      { cancelable: false }
    )
  }

  showConfirmAlert() {
    Alert.alert(
      'タイトル',
      '説明説明説明説明',
      [
        {text: 'キャンセル', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
        {text: '変更を実行', onPress: () => console.log('OK Pressed'), style: 'destructive'},
      ],
      { cancelable: false }
    )
  }

  showPromptAlert() {
    if (Platform.OS == 'ios') {
      // iOS
      AlertIOS.prompt(
        'パスワードを入力',
        'パスワードを入力してください',
        [
          {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
          {text: 'OK', onPress: password => this.inputPassword(password) },
        ],
        'secure-text'
      );
    }
    if (Platform.OS == 'android') {
      // Android
      prompt(
        'パスワードを入力',
        'パスワードを入力してください',
        [
          {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
          {text: 'OK', onPress: password => this.inputPassword(password) },
        ],
        {
          type: 'secure-text',
          cancelable: false,
          defaultValue: 'test',
          placeholder: 'placeholder'
        }
      )
    }
  }

  inputPassword(newPassword) {
    console.log(newPassword)
    this.setState(previousState => {
      return { password: newPassword }
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Button
          onPress={() => this.showAlert()}
          title="Open Alert"
          color="#841584"
          accessibilityLabel="ダイアログを出します"
        />
          <Button
            onPress={() => this.showConfirmAlert()}
            title="Open Confirm Alert"
            color="#841584"
            accessibilityLabel="選択型のダイアログを出します"
          />
        <Button
          onPress={() => this.showPromptAlert()}
          title="Open Prompt Alert"
          color="#841584"
          accessibilityLabel="入力用のダイアログを出します"
        />
        <Text>入力された値: {this.state.password}</Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('ProjectName', () => App);