React Native Keep Screen Awake
This is an Example to Keep the Screen Awake/On for the Infinite Time in React Native using react-native-keep-awake for Android and IOS. Before starting the example I just want you to think about this feature. Have you ever experienced Screen Awake feature in any app?
Maybe you have the answer or maybe not but let me tell you the most general example and that is the YouTube App. Yes, Video streaming apps are the most generic applications to use these features while we play any video. They keep the screen on as long as we watch the video. Other than that the book reading or article reading applications also use screen awake features to provide a seamless user experience for their readers.
In this example Keep the Screen Awake/On for the Infinite Time in React Native you will find the way to keep the screen on for the infinite time as long as your application is open. Here you can see the screenshot of my mobile device in which I have tried it and it was awake for 01Hr: 12 Min: 32 Sec (after that I was having work so I stopped testing :p).
To Keep Screen Awake for the Infinite Time
To keep the screen awake we are going to use KeepAwake component from react-native-keep-awake library.
There are two ways to use this library:
- By rendering it as a component.
- Explicitly calling the
KeepAwake.activate()andKeepAwake.deactivate()static methods.
By rendering it as a component
<KeepAwake />Explicitly calling the static methods
//Make the Screen On for infinite time
KeepAwake.activate();
//Calling the deactivate function to Deactive Keep awake
KeepAwake.deactivate();For this example, We are going to make a simple screen that has two buttons that will change their state according to the state of Infinite awake on or off. I have covered both ways in this example. So let’s get started.
To Make a React Native App
Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react native command line interface to make our React Native App.
If you have previously installed a global react-native-cli package, please remove it as it may cause unexpected issues:
npm uninstall -g react-native-cli @react-native-community/cliRun the following commands to create a new React Native project
npx react-native init ProjectNameIf you want to start a new project with a specific React Native version, you can use the --version argument:
npx react-native init ProjectName --version X.XX.XNote If the above command is failing, you may have old version of react-native or react-native-cli installed globally on your pc. Try uninstalling the cli and run the cli using npx.
This will make a project structure with an index file named App.js in your project directory.
Installation of Dependency
To use KeepAwake we need to install react-native-keep-awake dependency.
To install this open the terminal and jump into your project using
cd ProjectNameRun the following command to install
For React Native 0.57+ (Recommended)
npm install react-native-keep-awake --saveFor React Native 0.56 and below
npm install react-native-keep-awake@3 --saveThis command will copy all the dependencies into your node_module directory.
–save is optional, it is just to update the react-native-keep-awake dependency in your package.json file.
CocoaPods Installation
Please use the following command to install CocoaPods
npx pod-installCode to Keep Screen Awake
Now Open App.js in any code editor and replace the code with the following code
App.js
// Keep the Screen Awake/On for the Infinite Time in React Native
// https://aboutreact.com/react-native-keep-awake/
// import React in our code
import React, {useState} from 'react';
// import all the components we are going to use
import {
SafeAreaView,
StyleSheet,
Text,
View,
TouchableOpacity,
} from 'react-native';
// import KeepAwake Component
import KeepAwake from 'react-native-keep-awake';
const App = () => {
//Default Keep Awake off
const [keepScreenAwake, setKeepScreenAwake] = useState(false);
const changeKeepAwake = (shouldBeAwake) => {
//To keep screen awake using function Calling
setKeepScreenAwake(shouldBeAwake);
if (shouldBeAwake) {
//Calling the Activate function to Active Keep awake and
//Make the Screen On for infinite time
KeepAwake.activate();
alert('Screen will be awake for infinite time');
} else {
//Calling the deactivate function to Deactive Keep awake
KeepAwake.deactivate();
alert('Screen awake time will become normal now');
}
};
const changeKeepAwakeComponenet = (shouldBeAwake) => {
//To keep screen awake using Compoenent
setKeepScreenAwake(shouldBeAwake);
if (shouldBeAwake) {
alert('Screen will be awake for infinite time');
} else {
alert('Screen awake time will become normal now');
}
};
return (
<SafeAreaView style={styles.container}>
<View>
<Text style={styles.titleText}>
Keep Screen Awake for Infinite Time in React Native
</Text>
{keepScreenAwake ? (
<TouchableOpacity
activeOpacity={0.7}
style={styles.buttonStyle}
onPress={() => changeKeepAwake(false)}>
<Text style={styles.buttonTextStyle}>
Make Screen Normal by Calling Function
</Text>
</TouchableOpacity>
) : (
<TouchableOpacity
activeOpacity={0.7}
style={styles.buttonStyle}
onPress={() => changeKeepAwake(true)}>
<Text style={styles.buttonTextStyle}>
Keep Screen Awake by Calling Function
</Text>
</TouchableOpacity>
)}
{keepScreenAwake ? (
<View>
<TouchableOpacity
activeOpacity={0.7}
style={styles.buttonStyle}
onPress={() => changeKeepAwakeComponenet(false)}>
<Text style={styles.buttonTextStyle}>
Make Screen Normal using Component
</Text>
</TouchableOpacity>
<KeepAwake />
</View>
) : (
<TouchableOpacity
activeOpacity={0.7}
style={styles.buttonStyle}
onPress={() => changeKeepAwakeComponenet(true)}>
<Text style={styles.buttonTextStyle}>
Keep Screen Awake using Component
</Text>
</TouchableOpacity>
)}
</View>
</SafeAreaView>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
padding: 10,
justifyContent: 'center',
},
titleText: {
fontSize: 22,
textAlign: 'center',
fontWeight: 'bold',
},
buttonStyle: {
justifyContent: 'center',
marginTop: 15,
padding: 10,
backgroundColor: '#8ad24e',
marginRight: 2,
marginLeft: 2,
},
buttonTextStyle: {
color: '#fff',
textAlign: 'center',
},
});To Run the React Native App
Open the terminal again and jump into your project using.
cd ProjectName1. Start Metro Bundler
First, you will need to start Metro, the JavaScript bundler that ships with React Native. To start Metro bundler run following command:
npx react-native startOnce you start Metro Bundler it will run forever on your terminal until you close it. Let Metro Bundler run in its own terminal. Open a new terminal and run the application.
2. Start React Native Application
To run the project on an Android Virtual Device or on real debugging device:
npx react-native run-androidor on the iOS Simulator by running (macOS only)
npx react-native run-iosOutput Screenshots
IOS
Android
This is how you can keep the screen awake/on for an infinite time in React Native for Android and IOS. If you have any doubts or want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!
Hope you liked it. 🙂
