Hello friends, In today’s tutorial we would learn about controlling mobile phone screen awake functionality. As we all know that we can se by default screen awake time or phone lock time in our phones. But in some of applications like YouTube or gaming apps the screen dose not sleep when we opens that applications for a long time period. This is because of they have disabled screen sleep on that particular time. There is a react native NPM library available known as react-native-keep-awake which gives us the same functionality we want here, you can visit their NPM page here. So in this tutorial we would learn about Example of React Native Keep Awake To Prevent Screen Sleep in Both Android and iOS mobile platforms.
Contents in this project Example of React Native Keep Awake To Prevent Screen Sleep :-
1. First of all we have to install the react-native-keep-awake NPM package in our react native project. So open your react native project Root directory in CMD or Terminal and execute below command.
|
1
|
npm install —save react–native–keep–awake
|
Screenshot of CMD :-
Screenshot after done installation :-
2. The second step is only for iOS users. To link the installed library to our project we have to install PODS in our project. So execute below command to install PODS.
|
1
|
cd ios && pod install && cd ..
|
3. Now all the installation part has finished. Next step is to start coding for the app. So open your project’s main App.js file and import StyleSheet, Text, TouchableOpacity, View and Alert component.
|
1
2
3
|
import React, { useState } from ‘react’;
import { StyleSheet, Text, TouchableOpacity, View, Alert } from ‘react-native’;
|
4. Import KeepAwake component from ‘react-native-keep-awake’ package in our project.
|
1
|
import KeepAwake from ‘react-native-keep-awake’;
|
5. Creating our main export default App functional component.
|
1
2
3
4
5
|
export default function App() {
}
|
6. Crating a State named as awakeHolder with State update method setAwakeHolder with default value of False. Using this State we can enable and disable screen from sleeping.
|
1
|
const [awakeHolder, setAwakeHolder] = useState(false);
|
7. Creating a function named as EnableAwake with value argument. In this function first we would check the value argument value and if the value is True then we would call the KeepAwake.activate() method to prevent scree from sleeping. We would also disable the screen awake using KeepAwake.deactivate() method.
|
1
2
3
4
5
6
7
8
9
10
|
const EnableAwake = (value) => {
setAwakeHolder(value);
if (value) {
KeepAwake.activate();
Alert.alert(‘Mobile Screen Will be Awake for infinite time.’);
} else {
KeepAwake.deactivate();
Alert.alert(‘Screen Awake Reset Successfully.’);
}
};
|
8. Creating return() block, Now we would make 2 Touchable opacity buttons here and call above EnableAwake method with True and False argument to enable and disable screen from sleep.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
return (
<View style={styles.MainContainer}>
<Text style={{ fontSize: 28, textAlign: ‘center’ }}>
Example of Keep Mobile Screen Awake for Infinite Time in React Native
</Text>
<TouchableOpacity
activeOpacity={0.8}
style={styles.button}
onPress={() => EnableAwake(true)}>
<Text style={styles.buttonText}>
Set Screen Awake To Infinite Time
</Text>
</TouchableOpacity>
<TouchableOpacity
activeOpacity={0.8}
style={styles.button}
onPress={() => EnableAwake(false)}>
<Text style={styles.buttonText}>
Reset Screen Awake
</Text>
</TouchableOpacity>
</View>
);
|
9. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
padding: 10,
justifyContent: ‘center’,
alignItems: ‘center’
},
button: {
justifyContent: ‘center’,
alignItems: ‘center’,
marginTop: 10,
padding: 8,
backgroundColor: ‘red’,
width: ‘80%’
},
buttonText: {
textAlign: ‘center’,
color: ‘white’
},
});
|
10. Complete Source Code for App.js file :-
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
import React, { useState } from ‘react’;
import { StyleSheet, Text, TouchableOpacity, View, Alert } from ‘react-native’;
import KeepAwake from ‘react-native-keep-awake’;
export default function App() {
const [awakeHolder, setAwakeHolder] = useState(false);
const EnableAwake = (value) => {
setAwakeHolder(value);
if (value) {
KeepAwake.activate();
Alert.alert(‘Mobile Screen Will be Awake for infinite time.’);
} else {
KeepAwake.deactivate();
Alert.alert(‘Screen Awake Reset Successfully.’);
}
};
return (
<View style={styles.MainContainer}>
<Text style={{ fontSize: 28, textAlign: ‘center’ }}>
Example of Keep Mobile Screen Awake for Infinite Time in React Native
</Text>
<TouchableOpacity
activeOpacity={0.8}
style={styles.button}
onPress={() => EnableAwake(true)}>
<Text style={styles.buttonText}>
Set Screen Awake To Infinite Time
</Text>
</TouchableOpacity>
<TouchableOpacity
activeOpacity={0.8}
style={styles.button}
onPress={() => EnableAwake(false)}>
<Text style={styles.buttonText}>
Reset Screen Awake
</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
padding: 10,
justifyContent: ‘center’,
alignItems: ‘center’
},
button: {
justifyContent: ‘center’,
alignItems: ‘center’,
marginTop: 10,
padding: 8,
backgroundColor: ‘red’,
width: ‘80%’
},
buttonText: {
textAlign: ‘center’,
color: ‘white’
},
});
|
Screenshots:-
Also Read :
Wish You All a Very Very Happy New Year 2019
Call External Local JS File Activity in Current App.js File in React Native
React Native Implement Custom reCaptcha in Android iOS Example
React Native Expandable ListView in Android iOS Example Tutorial
React Native Sort String Array into Alphabetical Order Example
