@gj-kit/expo-ui 레시피

각 코드 블록은 패키지 README에서 이미 타입 검사하는 public-contract 예제를 재사용합니다.

1. provider 하나를 설치하고 접근성 control을 렌더링하기

앱 테마를 한 번 만들고 이를 소비하는 primitive 위에 UiProvider를 둡니다.

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

앱 소유 경계: 테마는 한 번만 만들고 앱을 감싸는 컴포넌트에 UiProvider를 둡니다. 네이티브 Button·IconButton·Menu·Select는 누름 피드백을 네이티브 스타일로 처리하므로 기본 상호작용에 NativeWind가 필요하지 않습니다.

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>
  );
}

2. tab value와 panel을 동기화하기

literal item 목록을 사용해 각 tab value가 non-null panel과 접근성 tablist 이름을 요구하게 합니다.

Tabs는 tablist의 접근성 이름과 item value마다 대응하는 panel을 필수로 받기 때문에, 빠뜨린 panel은 빈 화면이 아니라 빌드 실패로 드러납니다.

import { Tabs, Text, UiProvider, createThemes } from '@gj-kit/expo-ui';

declare const onChange: (value: 'overview' | 'history') => void; // the app owns tab state
const items = [{ label: 'Overview', value: 'overview' }, { label: 'History', value: 'history' }] as const;

export const ProfileTabs = () => (
  <UiProvider theme={createThemes({ light: { colors: { primary: '#1769C2' } } })}>
    <Tabs
      accessibilityLabel="Profile sections"
      items={items}
      value="overview"
      onChange={onChange}
      // Delete the history entry below and tsc stops the build:
      // TS2741: Property 'history' is missing in type '{ overview: JSX.Element; }'
      panels={{ overview: <Text>Overview</Text>, history: <Text>History</Text> }}
    />
  </UiProvider>
);

전체 API reference에서 모든 export와 import path를 확인하세요.