Status Bar 색 변경하기(feat. Native Base)

리액트 네이티브에서는 특정 화면 혹은 전체 앱에서 상태 바에 대한 색상을 변경시킬 수 있는 컴포넌트를 제공하고 있다.

https://reactnative.dev/docs/statusbar

React Native · A framework for building native apps using React

 

사실 매우 간단한 부분이다.

<StatusBar backgroundColor="blue" barStyle="light-content" />

이런 식으로 넣어주면 끝이다.

하지만 Native Base UI 라이브러리를 사용할 때 적용이 안되서 약간의 삽질을 해서 글을 남겼다.

https://nativebase.io/

NativeBase | Essential cross-platform UI components for React Native

 

Native Base의 컴포넌트들을 패딩이나 스타일이 잘 적용되어 있어서 특정 UI를 쉽게 넣을 수가 있다. 대표적인 예가 Header 부분인데 Header,Left,Right 등의 컴포넌트만 사용해도 스타일에 크게 신경쓰지 않고 꽤나 일반적인 형태의 앱 디자인을 만들 수 있다. 그런데 Header가 들어가는 순간 react native의 Status bar가 적용이 되지 않는다. 아니 덮어씌워진다고 하는 게 맞을 것 같다. Header 컴포넌트에서 상태바를 변경하는 특성이 들어 있는지 확인을 해보지는 않았지만 내 앱의 경우에 모든 화면에 대한 상태 바를 변경하기 위해 가장 상단에 상태 바를 넣었고, 그 안에 특정 화면에서만 Header을 사용해서 앱을 구성했는데 그 화면들은 상태 바가 적용되지 않는 것이였다.

결국 해결은 Header를 View로 변경함으로써, 즉 native base 컴포넌트를 사용하지 않음으로써 해결했다. 그리고 스타일은 직접 적용을 해주었다.