[Indonesia] React Native Beginner — Alert Confirm Box

React Native — Alert

Ingin baca tutorial ini dalam Bahasa Inggris?

Sebagai seorang Web Developer yang mencoba menjadi Mobile App Developer. Mungkin beberapa hal akan perlu penyesuaian sintaks bahasa pemrograman yang sedang dipelajari. React Native punya komponen default yang telah disediakan untuk membuat Alert konfirmasi.

Alert konfirmasi ini sering kita gunakan untuk menanyakan sesuai kepada pengguna aplikasi. Misalkan muncul Alert konfirmasi “Apakah anda yakin ingin menghapus data ini?” dengan pilihan YES atau NO. Jika YES maka akan menjalankan perintah hapus data dan jika NO maka akan membatalkan perintah dengan menutup Alert.

Selain menggunakan pilihan YES atau NO. Kita juga dapat memberikan opsi button ketiga, misalkan ASK ME LATER. Jika di klik, maka akan jalankan perintah lainnya.

Contoh Penggunaan Alert

Berikut contoh penggunaan untuk 2 pilihan opsi tombol

import React, { Component } from 'react';
import {
  Text,
  Alert,
  TouchableOpacity,
} from 'react-native';
export default class App extends Component {
  button() {
    Alert.alert(
      'Alert Title',
      'Alert message here...',
      [
        {text: 'NO', onPress: () => console.warn('NO Pressed'), style: 'cancel'},
        {text: 'YES, onPress: () => console.warn('YES Pressed')},
      ]
    );
  }
render() {
    return (
        <TouchableOpacity onPress={() => this.button()}>
          <Text>Button</Text>
        </TouchableOpacity>
    );
  }
}

Posisi index array berpengaruh pada urutan tombol NO lalu tombol YES, atau sebaliknya.

Namun jika kita ingin menambahkan opsi 3 tombol, maka taruh di index awal

Alert.alert(
  'Alert Title',
  'Alert message here...',
  [
    {text: 'Ask me later', onPress: () => console.warn('Ask me later pressed')},
    {text: 'NO', onPress: () => console.warn('NO Pressed'), style: 'cancel'},
    {text: 'YES', onPress: () => console.warn('YES Pressed')},
  ]
);

Tambahkan property cancelable: false jika kita tidak ingin Alert tertutup jika klik drop background warna hitam

Alert.alert(
  'Alert Title',
  'Alert message here...',
  [
    {text: 'Ask me later', onPress: () => console.warn('Ask me later pressed')},
    {text: 'NO', onPress: () => console.warn('NO Pressed'), style: 'cancel'},
    {text: 'OK', onPress: () => console.warn('OK Pressed')},
  ],
  { cancelable: false }
);

Namun jika kita ingin menampilkan Alert tanpa konfirmasi YES atau NO. Bisa melakukan seperti ini

Alert.alert(
  'Alert Title',
  'Alert message here...',
);

Atau cara lainnya, kita bisa menggunakan kode JavaScript untuk menampilkan Alert

alert('Alert message here');

Tetapi kekurangannya jika menggunakan kode native JavaScript, kita tidak dapat mengubah judul dari Alert.

Referensi : https://facebook.github.io/react-native/docs/alert.html#docsNav

Selain menggunakan Alert bawaan React Native. Kita juga bisa menggunakan library lain untuk membuat Alert lebih customable.

• react-native-message-bar
• react-native-dropdownalert
• react-native-scl-alert
• react-native-simpledialog-android
• react-native-awesome-alert
• React Native: Native Styled Dialogs

Sekian terima kasih. Semoga bisa bermanfaat. :)

Yuk tulis ide topik atau request topik yang sedang kamu pelajari seputar React Native. Tuangkan ide atau request kamu disini http://bit.ly/RequestTopicReactNative