react-native-status-bar-height - 구식

문제 상황

UI 디자인을 할 때, 작업한 내용이 상태바 영역에 가리는 경우가 있다.

notion image

해결방안


<View styles={{ paddingTop:50 }} /*루트 컨테이너*/>
 .....
 각종 컴포넌트들
 .....
</View>

이런 식으로 상단에 패딩을 두면 되는데 기기마다 상태바 높이가 다르다.

⇒ 기기에 맞는 StatusBarHeight 값으로 paddingTop을 주도록 만들어 보자.

라이브러리 설치


#npm을 쓰는 경우
$ npm install --save react-native-status-bar-height


#yarn을 쓰는 경우
$ yarn add react-native-status-bar-height

라이브러리 사용 예시


//라이브러리 불러오고
import {getStatusBarHeight} from 'react-native-status-bar-height'

....

<View style={styles.container}>
		.....
	  각종 컴포넌트들
	  .....
</View>

....


const styles = StyleSheet.create({
  container:{
    paddingTop:getStatusBarHeight(), flex:1
  },
});

notion image