React Native - Cara Handling Back Button di Header Native Stack Navigator

pada tanggal

Halo semuanya, kali ini kita akan belajar cara untuk menghandling back button yang ada di header dari native stack navigator. Sebelumnya kita udah pernah buat cara handling backpress button di postingan React Native - Cara Handling Back Press Button Class Component. Namun ternyata cara tersebut tidak berlaku jika kita menekan tombol back yang ada di header dari navigator. Maka dari itu, di postingan kali ini, kita akan buat handlingnya. Tutorial dibawah ini menggunakan model coding class component. Agak berbeda dengan yang functional component, namun secara garis besar sebenarnya sama.

Inti dari handlingnya adalah dengan menghilangkan tombol back default yang ada dan membuat tombol back baru yang sudah di custom fungsinya. Berikut adalah langkah yang perlu kita lakukan:

1.) Import element HeaderBackButton

import { HeaderBackButton } from '@react-navigation/elements';

HeaderBackButton sebenernya adalah tombol biasa, hanya saja sudah memiliki style seperti back button default dari navigator

2.) Buat fungsi handler back 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 button tadi ke dalam constructor class

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

4.) Menambahkan pengaturan navigation ketika screen selesai di render

componentDidMount() {
  this.props.navigation.setOptions({
    headerBackVisible: false,
    headerLeft: () => (<HeaderBackButton onPress={()=>{this.handleBackButtonClick()}}/>)
  });
}

Pengaturan navigation yang diatur adalah menghilangkan tombol back default dan membuat tombol back baru yang ketika di tekan akan masuk ke fungsi handling back button (yang sudah ditulis pada langkah 2)


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

import { Alert } from 'react-native';
import { HeaderBackButton } from '@react-navigation/elements';

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() {
    this.props.navigation.setOptions({
      headerBackVisible: false,
      headerLeft: () => (<HeaderBackButton onPress={()=>{this.handleBackButtonClick()}}/>)
    });
  }

  render () {
    // ...
  }

}

export default HomeScreen;


Sekian mengenai cara menambahkan handling back button di header native stack navigator. Selamat membaca dan mencoba.


Salam Share,


Funtastic Share

Komentar

Posting Komentar