Navigate back to the homepage

How to detect airplane mode in react native

Infinitbility
React Native
September 26th, 2021 · 1 min read
How to detect airplane mode in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will help you to detect is airplane mode on in android and web, here we will use react-native-device-info ( https://github.com/react-native-device-info/react-native-device-info ) for detection of airplane mode on or not.

Let’s start today tutorial How to detect airplane mode in react native

Introduction

React Native device info provide isAirplaneMode() function to check airplane mode on or off it will return only true or false. isAirplaneMode() function work in android, and web.

Note: This only works if the remote debugger is disabled.

Installation

  • Go to your project directory and install react-native-device-info package using npm.
1npm install --save react-native-device-info
  • Link react-native-device-info package if your react native version less then 0.63.
1npx react-native link react-native-device-info

Syntax

DeviceInfo.isAirplaneMode() function usages syntax.

1import DeviceInfo from 'react-native-device-info';
2
3
4DeviceInfo.isAirplaneMode().then((airplaneModeOn) => {
5 if (!airplaneModeOn) {
6 // ...
7 }
8});

Example

In Below Example, we will isAirplaneMode() value on constant and show in application.

React Native Device Info isAirplaneMode example

1import React, { Component } from 'react';
2import {
3 StyleSheet,
4 View,
5 Text,
6 SafeAreaView,
7} from 'react-native';
8import DeviceInfo from 'react-native-device-info';
9
10class App extends Component {
11
12 constructor(props) {
13 super(props);
14
15 this.state = {
16 airplaneModeOn: false
17 }
18 }
19
20
21 componentDidMount(){
22 DeviceInfo.isAirplaneMode().then((airplaneModeOn) => {
23 if (airplaneModeOn) {
24 this.setState({airplaneModeOn: true});
25 }
26 });
27 }
28
29
30
31 render() {
32 const { airplaneModeOn } = this.state;
33 return (
34 <SafeAreaView style={{ flex: 1 }}>
35 <View style={styles.container}>
36 <Text>Device is on airplane mode</Text>
37 <Text>{`${airplaneModeOn}`}</Text>
38 </View>
39 </SafeAreaView>
40 );
41 }
42}
43
44const styles = StyleSheet.create({
45 container: {
46 flex: 1,
47 alignItems: 'center',
48 marginTop: 20,
49 backgroundColor: '#ffffff',
50 },
51});
52
53export default App;

Output

React Native, DeviceInfo, isAirplaneMode, true, Example
React Native, DeviceInfo, isAirplaneMode, false, Example

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]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

How to remove the underline from material select in react js

How to remove the underline from material select in react js

React material ui select remove underline example

September 18th, 2021 · 1 min read
How to prevent host header injection in apache

How to prevent host header injection in apache

Host header injection testing and solution in apache

September 14th, 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]