@gj-kit/expo-ui

Expo, React Native, 웹을 위한 접근성 중심 토큰 기반 UI 프리미티브입니다.

현재 npm 최신판: 0.8.1

사용할 때

네이티브와 웹에서 하나의 디자인 언어, 제어 컴포넌트 상태, 오버레이, 접근성 동작을 함께 유지해야 할 때 사용합니다.

사용하지 않을 때

제품 route, 데이터 store, analytics, 제품 고유 문구를 이 패키지에 넣기 위한 용도로는 사용하지 마세요.

Golden path

완료 상태: 앱 전체 provider 하나에서 테마와 접근성이 적용된 버튼을 렌더링합니다.

1. 설치

pnpm add @gj-kit/expo-ui

2. 앱이 소유할 경계를 정합니다

테마는 한 번만 만들고 앱을 감싸는 컴포넌트에 UiProvider를 둡니다.

3. 최소 연결부터 시작합니다

먼저 아래 코드를 복사한 뒤, 위에서 언급한 앱 소유 값만 교체하세요.

import { Button, UiProvider, enStrings } from '@gj-kit/expo-ui';
import { createThemes } from '@gj-kit/expo-ui/theme';

const themes = createThemes();

export function App() {
  return (
    <UiProvider theme={themes} strings={enStrings}>
      <Button label="Get started" onPress={() => {}} />
    </UiProvider>
  );
}

환경과 peer

엔진: node >=20

Peer	지원 범위	필요한 위치
`react`	`>=18`	패키지 통합
`react-native`	`>=0.79`	패키지 통합
`react-native-safe-area-context`	`>=4`	문서화된 optional subpath에서만
`react-native-web`	`>=0.21`	문서화된 optional subpath에서만

공개 subpath

Entry	Exported symbols
`Root entry`	361
`./insets`	11
`./insets/pure`	6
`./tailwind`	4
`./theme`	26

안전 경계

optional safe-area와 React Native Web peer는 문서화된 subpath에서만 가져오고, 제품 문구는 프리미티브에 넣지 말고 strings로 주입하세요.

API reference

전체 API reference에는 선언 파일에서 생성한 모든 공개 함수, 클래스, 타입, 상수, 오류 계약이 있습니다. 각 항목은 import path, release signature, package version을 표시합니다.