[React Native][Android][라이브러리] System Bar 숨기는 방법

# react-native-system-bars를 활용해서 안드로이드 시스템 숨기는 방법

- RN으로 크로스 플랫폼 개발을 하다보면, 안드로이드에서는 시스템 바와 네비게이션 바로 인한 추가적인 처리가 필요한 경우가 있다. 안드로이드 운영체제 특성 상 하단 시스템 메뉴가 자리를 차지 하고 있기 때문이다. 특히 앱이나 게임에서 전체 화면을 다 사용하고 싶은 경우에는 이 처리가 필수적이다. 그렇다보니 이를 지원하는 다양한 라이브러리르들이 있지만, 최근에 사용해본 추가적인 삽질 없이 바로 동작하던 라이브러리를 하나 소개하려고 한다.

# 깃헙 페이지

GitHub - hudl/react-native-system-bars: Control the visibility of Android's Status Bar and Navigation Bar

 

# 사용 방법

- 라이브러리러 설치

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를 사용했었는데, 사용할 당시에는 트러블슈팅이 조금 필요했던 기억이 있다. 하지만 마지막 업데이트 날짜를 보니 훨씬 더 최근이어서, 해당 문제는 해결되었을 수도 있고, 추후에 안드로이드 측에서 업데이트가 있을 경우에는, 교체가 필요할수도 있으므로 알아두는 것을 추천한다