GUIDE
Expo와 React Native 프로젝트에 첫 화면 구성하기
GJ Kit Expo UI의 필수 런타임 peer는 React와 React Native뿐입니다. 테마는 createTheme 또는 createThemes로 만들고 루트 UiProvider에 전달한 뒤, 필요한 컴포넌트를 패키지 루트에서 가져옵니다.
패키지 설치
사용 중인 패키지 매니저로 UI 패키지를 추가합니다. insets 서브패스를 쓰지 않는다면 safe-area 패키지는 필수가 아닙니다.
TypeScript
pnpm add @gj-kit/expo-ui완전한 테마 만들기
Node에서도 안전한 theme 엔트리에서 createThemes를 호출합니다. shared 오버라이드 뒤에 light와 dark 오버라이드가 적용됩니다.
TypeScript
import { createThemes } from '@gj-kit/expo-ui/theme';
export const themes = createThemes({
light: { colors: { primary: '#1769C2', primaryStrong: '#0E5CAD' } },
dark: { colors: { primary: '#5C9EEA', primaryStrong: '#6BAAF0' } },
});Provider와 첫 컴포넌트
앱 루트에 UiProvider를 두면 컴포넌트가 현재 색상 스킴, 문자열과 아이콘을 같은 컨텍스트에서 읽습니다.
- ThemePair를 전달하면 시스템 라이트·다크 설정을 추종
- koStrings 또는 enStrings로 기본 문구 선택
- 앱에서 이미 쓰는 아이콘 라이브러리를 slots로 주입
TypeScript
<UiProvider theme={themes} strings={koStrings}>
<Button label="시작하기" onPress={start} />
</UiProvider>