[RN] react-native 앱 화면 꺼짐 방지 : expo-keep-awake

해당 글에서는 react-native 환경에서 expo-keep-awake를 활용하는 방법에 대해 알아봅니다.

1) expo-keep-awake

---

💡 expo-keep-awake

- 화면이 자동으로 어두워지거나 잠기는 것을 방지할 수 있는 패키지입니다. 이는 프레젠테이션 중이나 앱을 긴 시간 동안 사용하는 경우와 같이 앱이 실행 중일 때 화면을 계속 켜 두고 싶은 상황에서 유용합니다.
- 안드로이드 기기에서 배터리 최적화 모드로 전환되는 것을 방지할 수 있습니다. 또한 해당 기능을 이용하여 앱을 유지하거나 유지된 것을 해제할 수 있습니다.

KeepAwake

expo-keep-awake

 

 

 

1. 적용가능 플랫폼 보기

---

💡 react-native 환경에서 Andriod와 iOS 플랫폼에서 사용이 가능함을 확인하였습니다.

 

 

 

2. 의존성 추가

---

$ npm i expo-keep-awake
# or
$ yarn add expo-keep-awake

 

 

 

3. 소스코드 내에서 확인하기 : 전체 적용

---

💡 앱을 사용하는 동안 화면이 꺼지지 않기 위해서 시작점이 되는 App.tsx 파일에 이를 적용합니다.

 

 

3.1. 앱이 시작될때, 꺼지지 않도록 유지합니다.

---

import React, { useEffect } from "react";
import { activateKeepAwakeAsync } from 'expo-keep-awake'
import { View } from "react-native";

const App = () => {
	useEffect(() => {
		activateKeepAwakeAsync();
	}, [])
	return (
		<View>

		</View>
	)
}
export default App;

 

 

 

3.2. 앱을 키거나 끄거나 처리를 수행합니다.

---

💡 앱을 키거나 끄거나 처리를 수행합니다.

- onPressActivateKeepAwake() 함수를 호출하면 activateKeepAwakeAsync()가 수행되면서 앱 화면 꺼짐 증상이 유지됩니다.
- onPressDeactivateKeepAwake() 함수를 호출하면 deactivateKeepAwake()가 수행되면서 앱 화면 꺼짐 증상이 해제됩니다.

import React, { useEffect } from "react";
import { activateKeepAwakeAsync, deactivateKeepAwake } from 'expo-keep-awake'
import { Text, TouchableHighlight, View } from "react-native";

const App = () => {
	useEffect(() => {
	}, [])

	/**
	 * 화면꺼짐 상태 유지 
	 */
	const onPressActivateKeepAwake = () => {
		activateKeepAwakeAsync();

	}

	/**
	 * 화면꺼짐 상태 유지를 종료합니다.
	 */
	const onPressDeactivateKeepAwake = () => {
		deactivateKeepAwake();
	}

	return (
		<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
			<TouchableHighlight onPress={onPressActivateKeepAwake}>
				<Text>화면 꺼짐 상태 유지</Text>
			</TouchableHighlight>
			<TouchableHighlight onPress={onPressDeactivateKeepAwake}>
				<Text>화면 꺼짐 상태 유지 종료</Text>
			</TouchableHighlight>

		</View >
	)
}
export default App;

 

 

 

4. 일부 화면에서 적용: 일부 화면 적용

---

💡일부 화면에서 적용: 일부 화면 적용

- 특정 화면에서만 화면 꺼짐 증상을 방지하기 위해서 이를 사용합니다. 동일하게 사용하려는 페이지에서 해당 함수를 사용하여서 이를 적용하면 특정 페이지에서만 사용할 수 있습니다.

import React, { useEffect } from "react";
import { activateKeepAwakeAsync } from 'expo-keep-awake'
import { View } from "react-native";

const TestScreen = () => {
	useEffect(() => {
		activateKeepAwakeAsync();
	}, [])
	return (
		<View>

		</View>
	)
}
export default TestScreen;

 

 

 

 

 

 

99) 참고사이트

---

💡 expo-module을 사용하고 있지 않으면 아래의 라이브러리를 사용하더라도 동일하게 이용이 가능합니다.

GitHub - corbt/react-native-keep-awake: Keep the screen from going to sleep. iOS and Android.

 

 

 

 

 

오늘도 감사합니다. 😀