# react-native-system-bars를 활용해서 안드로이드 시스템 숨기는 방법
- RN으로 크로스 플랫폼 개발을 하다보면, 안드로이드에서는 시스템 바와 네비게이션 바로 인한 추가적인 처리가 필요한 경우가 있다. 안드로이드 운영체제 특성 상 하단 시스템 메뉴가 자리를 차지 하고 있기 때문이다. 특히 앱이나 게임에서 전체 화면을 다 사용하고 싶은 경우에는 이 처리가 필수적이다. 그렇다보니 이를 지원하는 다양한 라이브러리르들이 있지만, 최근에 사용해본 추가적인 삽질 없이 바로 동작하던 라이브러리를 하나 소개하려고 한다.
# 깃헙 페이지
GitHub - hudl/react-native-system-bars: Control the visibility of Android's Status Bar and Navigation Bar
Control the visibility of Android's Status Bar and Navigation Bar - GitHub - hudl/react-native-system-bars: Control the visibility of Android's Status Bar and Navigation Bar
github.com
# 사용 방법
- 라이브러리러 설치
yarn add react-native-system-bars
- 사용 방법은 간단합니다. "setSystemUIVisibility"를 사용해서 원하는 플래그들을 직접 한 번에 설정하거나, 개별적으로 필요한 기능을 호출하면 된다.
import AndroidSystemBars from "react-native-system-bars";
// Go immersive (i.e. hide status bar and nav bar)
AndroidSystemBars.setSystemUIVisibility(
'SYSTEM_UI_FLAG_IMMERSIVE',
'SYSTEM_UI_FLAG_FULLSCREEN',
'SYSTEM_UI_FLAG_HIDE_NAVIGATION'
);
// Show status bar and nav bar
AndroidSystemBars.setSystemUIVisibility('SYSTEM_UI_FLAG_VISIBLE');
AndroidSystemBars.clearFlags();
AndroidSystemBars.setContentBehindSystemBars();
AndroidSystemBars.dimSystemBars();
AndroidSystemBars.hideStatusBar();
AndroidSystemBars.hideNavigationBar();
AndroidSystemBars.hideStatusAndNavigationBars();
AndroidSystemBars.enableFullScreenMode('immersive', /*preventResizing (optional)*/true);
AndroidSystemBars.enableFullScreenMode('sticky-immersive', /*preventResizing (optional)*/true);
AndroidSystemBars.enableFullScreenMode('lean-back', /*preventResizing (optional)*/true);
- 만약 기존에 적용되어 있는 옵션 등이 있거나 할 경우, 원하는 동작을 하도록 clearFlags로 한 번 초기화 해주면 된다.
# 마치며
- 현재 직접 서비스 중인 Tab Display에서 전체화면으로 안드로이드 태블릿을 고정하기 위해 사용했으며, 네비게이션과 스테이터스 바를 숨기는 기능만 사용하긴 하였으나 전체적으로 큰 추가적인 삽질 없이 작동함을 확인하였다. 기존에는 react-native-system-navigation-bar를 사용했었는데, 사용할 당시에는 트러블슈팅이 조금 필요했던 기억이 있다. 하지만 마지막 업데이트 날짜를 보니 훨씬 더 최근이어서, 해당 문제는 해결되었을 수도 있고, 추후에 안드로이드 측에서 업데이트가 있을 경우에는, 교체가 필요할수도 있으므로 알아두는 것을 추천한다
'개발 > React Native' 카테고리의 다른 글
[React Native][라이브러리 소개] 깔끔하고 쉽게 구현하는 Toast (0) | 2023.09.28 |
---|---|
[React Native][라이브러리 소개] 앱 리뷰 요청 기능 쉽게 구현하기 (0) | 2023.09.12 |
[React Native][라이브러리 소개] RN에서 쓸만한 Dropdown (0) | 2023.09.07 |
[React Native][라이브러리] react-native-restart로 앱 재시작 기능을 추가하는 방법 (0) | 2023.08.27 |
[RN] React Native에서도 TailwindCSS를 쉽게 사용하는 방법 (0) | 2023.08.19 |