React-Native android status바, system bar 제거

모바일에서 디자인을 헤치는 android status바, system bar 확실하게 제거하는 방법을 알려드립니다.

이방법, 저방법 다 해봤지만 잘 먹혔던것 소개 드립니다.

 

---

android 회색 status bar

회색 바 제거

• StatusBar.hidden 속성을 true로 설정하면 상단의 회색 바가 제거됩니다.
• 만약 SafeAreaView를 사용 중이라면, 이를 View로 교체하거나 스타일로 padding을 없앨 수 있습니다.

import React from 'react';
import { View, StyleSheet, StatusBar } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      {/* 상태바 스타일 조정 */}
      <StatusBar hidden={true} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightblue',
  },
});

export default App;

 

 

---

android system bar

시스템 바 제거

• react-native-system-bars 라이브러리 활용하니 깔끔하게 바로 적용 됩니다.

yarn add react-native-system-bars

 

아래의 코드 index.js에 넣어줍니다.

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);

 

index.js에서 이렇게 넣어주면 깔끔하게 적용됩니다.

react-native-system-bars 사용법

반응형