React Native - Cara Handling Back Press Button Class 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 class component. Agak berbeda dengan yang functional component, walaupun secara garis besar sebenarnya sama. Untuk cara handling dengan model coding functional component akan di bahas di postingan React Native - Cara Handling Back Press Button Functional Component.

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

1.) Import BackHandler

import { BackHandler } from 'react-native';

2.) Buat fungsi handler back press button, di dalam fungsi class component

handleBackButtonClick() {
    Alert.alert('Peringatan', 'Anda akan meninggalkan halaman ini!', [{
        text: 'Batal'
    }, {
        text: 'Keluar',
        onPress: () => {
            this.props.navigation.goBack(null);
        }
    }]);
    return true;
}

Contoh diatas adalah cara menampilkan alert warning jika ingin keluar dari halaman ini. Kalian bisa melakukan modifikasi atau perubahan sesuai kebutuhan kalian

3.) Bind fungsi handler back press tadi ke dalam constructor class

constructor (props) {
    super(props);
    this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
}

4.) Menambahkan event listener backpress ketika screen selesai di render

componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
}

5.) Menghapus event listener backpress ketika screen ditutup

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
}


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

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

class HomeScreen extends React.Component {

    constructor (props) {
        super(props);
        this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
    }

    handleBackButtonClick() {
        Alert.alert('Peringatan', 'Anda akan meninggalkan halaman ini!', [{
            text: 'Batal'
        }, {
            text: 'Keluar',
            onPress: () => {
                this.props.navigation.goBack(null);
            }
        }]);
        return true;
    }

    componentDidMount() {
        BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
    }

    componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
    }

    render () {
        // ...
    }
}

export default HomeScreen;


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


Salam Share,


Funtastic Share

Komentar

Posting Komentar