React Native - Cara Buat Popup Menu

Halo semuanya, pada postingan kali ini, kita akan membuat popup menu untuk aplikasi Android yang dibuat dengan React Native. Popup menu yang akan dibuat menggunakan package react-native-popup-menu.

Di tutorial ini, saya menggunakan react native versi 0.67.3. React native nya di compile menggunakan komputer dengan OS Windows 10. Package react-native-popup-menu yang digunakan adalah versi 0.16.1. Dan menggunakan tambahan package react-native-vector-icons (versi 9.2.0) untuk icon. Kalian bisa lihat tentang cara pakai package tersebut di postingan React Native - Cara Pakai Vector Icons. 

Kita akan membuat sebuah text yang disampingnya terdapat icon titik tiga (simbol ellipsis). Ketika icon tersebut dipencet, maka akan menampilkan dua menu. Menu tersebut akan menampilkan alert ketika dipilih. Berikut adalah codingnya.

import React from 'react';

import { View, Text, Alert } from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';

import {

  MenuProvider,

  Menu,

  MenuOptions,

  MenuOption,

  MenuTrigger,

} from 'react-native-popup-menu';

const App = () => {

 

  return (

    <MenuProvider>

      <View style={{marginRight: 10, marginLeft: 10,

        marginTop: 25, padding: 5,

        flexDirection: 'row', borderColor: 'grey', borderWidth: 1}}>

        <Text style={{flex: 1}}>Data</Text>

        <Menu>

          <MenuTrigger>

            <Icon

              name={"ellipsis-v"}

              size={18}

              style={{paddingLeft: 30}}/>

          </MenuTrigger>

          <MenuOptions>

            <MenuOption

              onSelect={() => Alert.alert('Alert 1', 'Isi dari alert 1')}>

              <Text>Alert 1</Text>

            </MenuOption>

            <MenuOption

              onSelect={() => Alert.alert('Alert 2', 'Isi dari alert 2')} >

              <Text style={{color: 'red'}}>Alert 2</Text>

            </MenuOption>

          </MenuOptions>

        </Menu>

      </View>

    </MenuProvider>

  );

}

export default App;

Hasil dari coding di atas dapat dilihat seperti berikut:

Ketika kita menggunakan package react-native-popup-menu, kita harus menggunakan element MenuProvider yang me-wrap seluruh coding di aplikasi kita. Untuk pengaturan popup menunya sendiri terdapat pada element Menu.

Sekian tentang cara membuat popup menu dengan menggunakan package react-native-popup-menu. Semoga membantu bagi kalian yang ingin membuat menu tambahan itu. Selamat membaca dan mencoba.

Salam Share,

Funtastic Share