직딩 개발기- Theme

직딩을 실행할 때 가장 먼저 보이는 화면은 Splash 화면이에요.
Native에도 Splash가 있지만 React Native에도 Screen으로 별도로 만들었어요. Screen으로 만든 Splash는 아래와 같이 나타났어요.

여기에 직딩에서 주로 사용하는 색상을 적용하려면 어떻게 해야 할까요?
직접 Style을 지정하는 방법도 있지만 이번에는 React-Navigation의 Them를 사용해보기로 했어요.

먼저 Theme를 선언하고 기본 테마 값을 상속했어요.

import {Theme, DefaultTheme} from '@react-navigation/native'

export const DefaultAppTheme: Theme = {
  ...DefaultTheme,
}

여기에 원하는 색상 값을 colors에 재정의했죠.

export const DefaultAppTheme: Theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'orange',
    background: 'black',
    text: 'white',
  },
}

primary는 말그대로 주요 색상, 주요 버튼들(확인 등).
background는 기본 배경 색상,
text는 기본 글자색을 의미해요.

이렇게 만든 Theme는 NavigationContainer의 theme 속성에 넣어주면 적용할 수 있어요.

const App = () => {
  return (
    <NavigationContainer theme={DefaultAppTheme}>

앗! 배경 색상은 적용돼었는데 글자가 보이지 않네요. 😭

이렇게 테마가 자동으로 적용되지 않는 Component는 직접 테마의 값을 가져와서 사용할 수 있어요. 직딩에서는 Screen도 Functional Component로 만들어서 useTheme hook을 통해 현재 theme에 접근할 수 있었어요.

export const SplashScreen: ISplashScreen = ({navigation}) => {
  const theme = useTheme()

  ...
      <Text style={[styles.logo, {color: theme.colors.primary}]}>{'직딩'}</Text>

theme의 colors.primary를 직딩 로고에 적용했더니 로고가 보이게 되었어요!

로고는 제대로 보이는데 상단에 휴대폰 상태가 보였어요.
휴대폰 상태가 나오는 것을 StatusBar라고 부르는데 이것을 숨기려면 StatusBar Component 사용해야 해요.

아이러니 하게도 숨기려고 하는데 넣어줘야 합니다.
StatusBar의 상태가 보고 있지 않은 다른 화면이 상태 공유 라이브러리 등에 의해 Rerendering된다면 깜빡이는 현상이 발생할 수 있죠.

<StatusBar animated={false} showHideTransition="none" hidden={true} />

StatusBar가 제거된 깔끔한 Splash가 완성되었어요! 😃

참고자료

React Navigation