React Native

@tanrei/react-native は TypeScript で書かれ、ネイティブモジュールを含みません。そのため、リンクするものは何もなく、Expo でも動作します。New Architecture を対象とし、React 19 と React Native 0.78 以降が必要です。

まだ公開していません

@tanrei/react-native はまだ npm にありません。プラットフォームは現在の仕様に追従してから公開し、それまで React Native の CI は止めてあります。下の「ソースから」は chnotchy/tanrei からパッケージを加える方法、「公開後」は公開されてからの導入方法です。

インストール

ソースから

現在はビルドできません

React Native のパッケージは、現在の仕様とトークンに追従していません。ソースは以前の版の生成されたトークンコードに合わせて書かれていて、現在のコードに対してはビルドが型エラーで止まります。追従するまで CI は止めてあり、ステータスページではそのコンポーネントを追従待ちとしています。以下はアプリに追加する手順で、パッケージが追従すれば動きます。

Web のパッケージと同じく（Git、Node 22.22 以降、pnpm 12）、リポジトリのクローンでパッケージをビルドしてパックします。

git clone https://github.com/chnotchy/tanrei.git
cd tanrei
pnpm install
pnpm --filter @tanrei/react-native build
pnpm --filter @tanrei/react-native pack --pack-destination ../tanrei-packages

次に、パックしたファイルをアプリにインストールします。

npm install path/to/tanrei-packages/tanrei-react-native-*.tgz

公開後

npm install @tanrei/react-native

使い方

import { Button, TanreiProvider } from '@tanrei/react-native';

export function App() {
  return (
    <TanreiProvider>
      <Button variant="filled" onPress={deploy}>
        デプロイ
      </Button>
      <Button variant="outlined" size="small" disabled>
        キャンセル
      </Button>
    </TanreiProvider>
  );
}

コンポーネントの名前は、接頭辞のない Button です。JavaScript のモジュールが、すでに名前空間の役割を果たしているためです。押されたことは onPress で伝わります。これは、仕様の click イベントに対する React Native の流儀です。

テーマとコントラスト

TanreiProvider は、既定ではシステムのカラースキームに従います。固定するには、theme に "light" か "dark" を、contrast に "standard"・"medium"・"high" のいずれかを設定します。

<TanreiProvider theme="dark" contrast="high">
  <App />
</TanreiProvider>

ツリーの中では、useTanrei() が、自分のビューで使える解決済みの色とテキストスタイルを返します。

const theme = useTanrei();
<Text style={[theme.text('body'), { color: theme.color('onSurfaceVariant') }]}>最後のデプロイは 2 分前</Text>;
<Text style={theme.text('heading2', { emphasized: true })}>デプロイ</Text>;

このプラットフォームでは、テキストスタイルとカラーロールのキーはキャメルケースです。heading1 から heading6 は h1 から h6、body は段落、label はコントロール上のテキストです。トークン sys.color.on-surface-variant は onSurfaceVariant になります。emphasized は、ファミリーの強調のステップを太さに加えます。別のロールではありません。

フォント

Inter（および Noto Sans JP、Roboto Mono）を、普段のフォントの設定方法（たとえば expo-font）で読み込みます。React Native は太さごとにフォントファイルを選ぶので、TanreiProvider に resolveFont 関数を渡して、ファミリーと太さを、登録したフォント名に対応づけてください。

ソースコードと Issue（GitHub）