EXPO 프로젝트에서 UI-Kitten 테마 적용하기

Expo 프로젝트에서 UI-Kitten을 사용할 때 다음과 같은 컬러 테마 관련 필요가 있을 때 설정 방법.

1. 커스텀 컬러를 사용

2. Secondary 컬러 버튼도 적용
3. 기기의 테마 모드와 동일한 eva 테마가 앱에서 자동 적용

 

1. 커스텀 컬러 사용

theme 객체를 별도의 파일(theme.json)로 만들어, 기존 테마에 연결한다.

 

1) Eva Design System 페이지에 들어가면 자동으로 색 리스트 생성 및 json 파일 다운로드가 가능하다.
2) 다운받은 파일을 루트 폴더에 넣고 App.js에 import 한다.

 

 

2. Secondary 컬러 버튼 적용

1) 원하는 Secondary 컬러 버튼을 위한 객체를 생성하여 별도의 파일(mapping.json) 저장한다.
2) App.js에 불러온 후 ApplicationProvider에 추가한다. (UI-Kitten 문서)

{
  "components": {
    "Button": {
      "meta": {
        "variantGroups": {
          "status": {
            "secondary": {
              "default": false
            }
          }
        }
      },
      "appearances": {
        "filled": {
          "variantGroups": {
            "status": {
              "secondary": {
                "borderColor": "color-secondary-500",
                "backgroundColor": "color-secondary-500",
                "textColor": "black",
                "iconTintColor": "black",
                "state": {
                  "focused": {
                    "borderColor": "color-secondary-900",
                    "backgroundColor": "color-secondary-900"
                  },
                  "hover": {
                    "borderColor": "color-secondary-900",
                    "backgroundColor": "color-secondary-900"
                  },
                  "active": {
                    "borderColor": "color-secondary-900",
                    "backgroundColor": "color-secondary-900"
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

 

3. 기기의 테마 모드와 동일한 eva 테마가 앱에서 자동 적용

1) 사용자의 현재 선호 테마를 반환하는 react-native의 useColorScheme 훅을 사용하여 colorScheme로 저장한다.
2) colorScheme은 "light", "dark" 및 null을 지원하며, null은 사용자가 선호 색상 테마를 지정하지 않았을 경우이다.
3) colorScheme에 따른 조건부 설정으로 eva의 컬러테마(eva.dark 또는 eva.light)가 달리 적용되도록 한다.
4) 커스텀 테마가 있는 경우, 이 때에 스프레드 연산자를 사용해 합쳐진 테마 객체를 만든다.
5) ApplicationProvider에 추가한다.

 

최종 코드 결과 예시:

import { useColorScheme } from 'react-native';
import { default as customTheme } from './theme.json';
import { default as mapping } from './mapping.json';
import { ApplicationProvider } from '@ui-kitten/components';
import Main from './Screen/Main';
 
export default () => {
    const colorScheme = useColorScheme();
    const theme = colorScheme === 'dark' ? { ...eva.dark, ...customTheme } : { ...eva.light, ...customTheme };
 
	retrun (
		<ApplicationProvider {...eva} theme={theme} customMapping={mapping} >
			<Main />
		</ApplicationProvider>
	)
}

 

추가. 테마 색상을 직접 하드코드 하려는 경우

1) UI-Kitten의 useTheme 훅을 사용해서 theme 생성: 

2) 원하는 키 값을 theme["키"]로 style에 직접 삽입한다. 예) theme['text-disabled-color']

import { useTheme } from '@ui-kitten/components';  
 
[중략]
 
const theme = useTheme();
 
[중략]
 
<Layout style={{ ...styles.imageWrapper, backgroundColor: theme['color-basic-100'] }} >