React Native - Cara Handling Back Press Button Functional Component

pada tanggal

Halo semuanya, kali ini kita akan belajar cara untuk menghandling back press button dengan React Native. Back press button itu adalah tombol back nya OS android. Biasanya tombol back ini ada yang dari hardware handphone dan ada juga yang dari firmware OS nya, tergantung dari merk HP. Kali ini kita akan buat cara handling event ketika ada penekanan tombol ini.

Tutorial dibawah ini menggunakan model coding functional component. Agak berbeda dengan yang class component, walaupun secara garis besar sebenarnya sama. Untuk cara handling dengan model coding class component akan di bahas di postingan React Native - Cara Handling Back Press Button Class Component.

Berikut adalah langkah yang perlu kita lakukan untuk membuat handling back press button, yaitu:

1.) Import BackHandler dan useEffect

import { useEffect } from 'react';
import { BackHandler } from 'react-native';

2.) Buat fungsi handler back press button

const backPressed = () => {
  Alert.alert(
    'Exit App',
    'Do you want to exit?',
    [
      {text: 'No'},
      {text: 'Yes', onPress: () => BackHandler.exitApp()},
    ],
    { cancelable: false }
  );
  return true;
}

3.) Menambahkan event listener backpress ketika screen dirender

useEffect(() => {
  BackHandler.addEventListener('hardwareBackPress', backPressed);
  return () => {};
}, []);

4.) Menghapus event listener backpress ketika screen ditutup

useEffect(() => {
  ...
  return () => {
    BackHandler.removeEventListener('hardwareBackPress', backPressed);
  };
}, []);


Selanjutnya tinggal sesuaikan aja coding lainnya. Secara keseluruhan, coding bisa dilihat sebagai berikut:

import { useEffect } from 'react';
import { BackHandler, Alert } from 'react-native';

const App = () => {

  const backPressed = () => {
    Alert.alert(
      'Exit App',
      'Do you want to exit?',
      [
        {text: 'No'},
        {text: 'Yes', onPress: () => BackHandler.exitApp()},
      ],
      { cancelable: false }
    );
    return true;
  }

  useEffect(() => {
    BackHandler.addEventListener('hardwareBackPress', backPressed);
    return () => {
      BackHandler.removeEventListener('hardwareBackPress', backPressed);
    };
  }, []);

 
  return (
    ...
  );
}

export default App;


Sekian mengenai cara menambahkan handling backpress react native dengan model functional component. Kalau mau lihat tentang yang model class component, bisa liat di postingan React Native - Cara Handling Back Press Button Class Component. Selamat membaca dan mencoba.

 

Salam Share,

 

Funtastic Share

Komentar

Posting Komentar