Navigate back to the homepage

How to close react native app programmatically

Infinitbility
React Native
June 26th, 2021 · 1 min read

Hello Friends,

Welcome To Infinitbility!

This article will you to exit your react native application programmatically when you use react-navigation for managing routes you get the inbuild feature back press exit application from the first route but many times we want to close the application when we want.

React native not provide any exit functionality for react native ios application but we have BackHandler for android, and today you get an example of BackHandler, how to use BackHandler in react native application.

Let’s start today article How to close react native app programmatically

React Native provides the BackHandler component to handle exit functionality in android.

when you call BackHandler.exitApp(); app will close but it will remain in android’s recent tab.

1import React, { BackHandler } from 'react-native';
2
3BackHandler.exitApp();

Here, I will share React Native BackHandler example to use when the user presses the back button.

when you want to exit the application when the user clicks on the back button you have to use hardwareBackPress EventListener, let’s understand with an example.

ReactNativeBackHandler.js

1import React, { Component } from "react";
2import { Text, View, StyleSheet, BackHandler, Alert } from "react-native";
3
4class App extends Component {
5 backAction = () => {
6 Alert.alert("Hold on!", "Are you sure you want to go back?", [
7 {
8 text: "Cancel",
9 onPress: () => null,
10 style: "cancel"
11 },
12 { text: "YES", onPress: () => BackHandler.exitApp() }
13 ]);
14 return true;
15 };
16
17 componentDidMount() {
18 this.backHandler = BackHandler.addEventListener(
19 "hardwareBackPress",
20 this.backAction
21 );
22 }
23
24 componentWillUnmount() {
25 this.backHandler.remove();
26 }
27
28 render() {
29 return (
30 <View style={styles.container}>
31 <Text style={styles.text}>Click Back button!</Text>
32 </View>
33 );
34 }
35};
36
37const styles = StyleSheet.create({
38 container: {
39 flex: 1,
40 alignItems: "center",
41 justifyContent: "center"
42 },
43 text: {
44 fontSize: 18,
45 fontWeight: "bold"
46 }
47});
48
49export default App;

Thanks for reading…

Follow me on Twitter

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]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

Textarea in React Native

React Native Textarea Example

June 25th, 2021 · 1 min read

React Native Dimensions Example

Screen width and height in react native

June 24th, 2021 · 1 min read
© 2020–2022 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]