[react native] 안드로이드 상태바 겹침 현상 해결 (Android header is overlapped)

 

expo react native 앱을 개발하는데

아래 캡쳐와같이 상단에 상태바와 헤더가 겹치는 현상이 발생했다.

 

적용전

 

해결책을 찾아 구글링을 하고

https://github.com/react-navigation/react-navigation/issues/1478#issuecomment-301220017

Android header is overlapped · Issue #1478 · react-navigation/react-navigation

 

해결책은 아래와 같다.

<View style={{paddingTop: Platform.OS === ‘ios’ ? 0 : Expo.Constants.statusBarHeight}}> <-- your react navigation stack or whatever goes here --> </View>

 

 

Container 스타일값에 적용

const style = StyleSheet.create({
	container: {
		paddingTop: Platform.OS === `ios` ? 0 : Expo.Constants.statusBarHeight,
	}
});

 

 

결과

아래와 같이 겹침 문제가 해결되었다.

적용후