Navigate back to the homepage

How to close react native app programmatically

Infinitbility
React Native
June 26th, 2021 · 1 min read
How to close react native app programmatically

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;

Subscribe Our Newsletter You will get monthly free programming book

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]

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.

Subscribe Our Newsletter You will get monthly free programming book

Tutorials

React Native

Categories

More articles from Infinitbility

Textarea in React Native

Textarea in React Native

React Native Textarea Example

June 25th, 2021 · 1 min read
React Native Dimensions Example

React Native Dimensions Example

Screen width and height in react native

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