React Native
네이티브 앱에서 같은 브랜드 토큰을 쓰기 위한 로드맵이에요. 토큰 객체는 지금 쓸 수 있고, 컴포넌트는 준비 중이에요.
로드맵
React Native 지원은 준비 중이에요. 토큰 객체 출력은 지금 쓸 수 있고, 컴포넌트는 아래 계획에 따라 순차적으로 제공할 예정이에요.
지금 쓸 수 있는 것: 토큰 객체
토큰 빌드는 브랜드마다 React Native 용 테마 객체를 함께 만들어요.
import theme from '@rebar/tokens/native/clay';
theme.id; // 'clay'
theme.light['color.bg.brand-solid']; // 브랜드 배경색 (라이트)
theme.dark['color.fg.neutral']; // 기본 텍스트색 (다크)
theme.light['dimension.x4']; // '16px'
theme.shadcn.light.primary; // shadcn 별칭 값| 키 | 내용 |
|---|---|
light / dark | 토큰 경로(color.bg.brand-solid) → 끝까지 해석한 값. 색이 아닌 토큰은 두 모드에서 같아요. |
shadcn.light / shadcn.dark | shadcn 별칭(primary, background …) → 값 |
useColorScheme() 으로 모드를 골라 쓰면 돼요.
import { useColorScheme, View, Text } from 'react-native';
import theme from '@rebar/tokens/native/clay';
export function Card() {
const t = theme[useColorScheme() === 'dark' ? 'dark' : 'light'];
return (
<View style={{ backgroundColor: t['color.bg.layer-default'], padding: 16, borderRadius: 8 }}>
<Text style={{ color: t['color.fg.neutral'] }}>주문이 접수됐어요</Text>
</View>
);
}지금은 크기 값이 CSS 문자열('16px', '1rem')로 나와요. 숫자 값 출력은 아래 로드맵에 포함돼 있어요.
로드맵
| 단계 | 내용 | 상태 |
|---|---|---|
| 1 | 브랜드별 토큰 객체 (@rebar/tokens/native/<id>) | 제공 중 |
| 2 | 크기·글자·그림자 값을 React Native 스타일 형식(숫자, shadowOffset 등)으로 변환 | 계획 |
| 3 | NativeWind 용 Tailwind 테마 출력 — 웹과 같은 유틸 이름(bg-bg-brand-solid, p-x4) | 계획 |
| 4 | react-native-reusables 기반 컴포넌트 registry — shadcn 과 같은 add 방식 | 계획 |
웹과 네이티브가 같은 토큰 이름, 같은 컴포넌트 API 를 갖도록 하는 것이 목표예요. 브랜드를 추가하면 웹과 네이티브 산출물이 함께 만들어져요.