Navigate back to the homepage

How to disable back button in react native

Infinitbility
React Native
August 8th, 2021 · 1 min read
How to disable back button in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial help you to disable back button in react native application plus also how to do your stuff when user click on back button. Here I will share a common component example and you can use on any screen on React Native project.

Here, I’m going to create a common component for handle back press or also call back feature.

BackPressHandler.js

1import React from 'react';
2import {BackHandler} from 'react-native';
3
4export default BackPressHandler = callback => {
5 BackHandler.addEventListener('hardwareBackPress', () => {
6 callback();
7 return true;
8 });
9}

Using BackHandler and addEventListener we will handle the back press in android, let see how we use the BackPressHandler component on our react-native screen.

Suppose, we have ExampleScreen.js where we have to BackPressHandler component then first we have to import BackPressHandler component on our ExampleScreen.js and call BackPressHandler on componentDidMount function with our back press stuff task function in BackPressHandler component like below example.

ExampleScreen.js

1import React, { Component } from 'react';
2import { View, Text, Platform} from 'react-native';
3import BackPressHandler from './BackPressHandler';
4
5class ExampleScreen extends Component {
6
7 constructor(props) {
8 super(props);
9
10 this.state = {
11 message : 'Hi, ExampleScreen',
12 }
13 }
14
15 componentDidMount() {
16 if (Platform.OS == 'android') {
17 BackPressHandler(this.BackStuff);
18 }
19 }
20
21 BackStuff = () => {
22 // Wharever you want to do
23 }
24
25 render() {
26 const { names } = this.state;
27 return (
28 <View>
29 <Text>{this.state.message}</Text>
30 </View>
31 );
32 }
33}
34
35export default ExampleScreen;

Write your back press task on BackStuff() function…

Thanks for Reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Tutorials

React Native

Categories

More articles from Infinitbility

How to dismiss keyboard in react native

How to dismiss keyboard in react native

React Native keyboard dismiss Example

August 7th, 2021 · 1 min read
How to use background image in react native

How to use background image in react native

React Native ImageBackground Example

August 6th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]