ReactNative > UI Kitten


UI Kitten が気になっていたので試してみました

# UI Kittenとは？
UI Kittenは、[Eva Design System](https://eva.design/?utm_campaign=eva_design%20-%20home%20-%20ui_kitten%20docs&utm_source=ui_kitten&utm_medium=referral&utm_content=what_is_kitten_top_link)の仕様に基づいたカスタマイズ可能なReact Native UIライブラリで、30以上のUIコンポーネント、2つのビジュアルテーマ、その他のサポートモジュールを搭載しています。


[What is UI Kitten?](https://akveo.github.io/react-native-ui-kitten/docs/getting-started/what-is-ui-kitten#what-is-ui-kitten)

[UI Kitten - コンポーネント一覧](https://akveo.github.io/react-native-ui-kitten/docs/components/components-overview)


## Eva Design Systemとは？

[Eva Design System](https://eva.design/?utm_campaign=eva_design%20-%20home%20-%20ui_kitten%20docs&utm_source=ui_kitten&utm_medium=referral&utm_content=what_is_kitten_top_link)とは、[Akveo](https://www.akveo.com/)社が公開しているUX/UIデザインです。
雰囲気は[デモ](https://www.akveo.com/ngx-admin/pages/dashboard)で見ることができます。
Github: [eva-design/eva](https://github.com/eva-design/eva)


# Quick start tutorials

[スタートガイド](https://akveo.github.io/react-native-ui-kitten/docs/getting-started/where-to-start#where-to-start)には、さらから作成する場合と、既存のReactNativeに組み込むパターンの２通りが用意されてますが、ここでは既存に組み込むパターンをやってみます。
（とはいえ、プロジェクト作成からやるので、さらから作成するとほぼ変わりません。）



# react-nativeの新プロジェクトを作成

[公式](https://reactnative.dev/)にそって以下のコマンドで作成します。


```
npx react-native init MyTestApp
```

無事に作成できたらiosシミュレーターで起動してみます。

```
npx react-native run-ios
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/d5824076-9f9f-455a-b56b-62a46d1ff47b.png" width=300px />

起動できたらOK

# UI Kitten

## チュートリアル - 1 Getting Started

[UI Kitten - Getting Started](https://akveo.github.io/react-native-ui-kitten/docs/guides/getting-started#getting-started)


### UI Kittenのインストール

以下のコマンドでインストール

```
yarn add @ui-kitten/components @eva-design/eva react-native-svg
```

※もし、Expoを使っている場合には`expo install react-native-svg@9.13.6`を行う必要があるようです。



### podのインストール

```
cd ios 
pod install
```

### 起動

変更を適用するには、バンドルラーを再起動する必要があります。との事なので以下で起動します。

```
npx react-native run-ios -- --reset-cache
```


### App.jsの変更

さっそくUI Kittenを使ってみます。
`App.js`を以下に変更します。

```:App.js
import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider, Layout, Text } from '@ui-kitten/components';

const HomeScreen = () => (
  <Layout style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
    <Text category='h1'>HOME</Text>
  </Layout>
);

export default () => (
  <ApplicationProvider {...eva} theme={eva.light}>
    <HomeScreen />
  </ApplicationProvider>
);
```

あっさりとしたUIですが、ui-kittenの画面に変わりました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/1e661a0b-2012-5ac4-09aa-ac385542a48f.png" width=300px />





## チュートリアル - 02 Branding

[UI Kitten - Branding](https://akveo.github.io/react-native-ui-kitten/docs/guides/branding#branding)

この章では、カスタムテーマを作成する方法、フォントを適用する方法、Eva内でテーマ変数がどのように使用されるかについての説明を行います。（デザイナーがいる場合は[オリジナルのSketchファイル](https://gumroad.com/l/eva-design)を見ると便利かもしれません。）


まずは、深いオレンジ色のテーマを作成してみましょう。


### Primary Color

#### theme.jsonの作成

深いオレンジ色のテーマを[Eva Designカラージェネレーター](https://colors.eva.design/?utm_campaign=eva_colors%20-%20home%20-%20kitten_docs&utm_source=ui_kitten&utm_medium=referral&utm_content=branding_article_link)で作ってみましょう。

- Primary: #FF6721
- Success: #3DE570
- Info: E0292F9
- Warning: #F9A536
- Danger: #FC5A80

![Kobito.Yw4Y8S.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/4fe21790-8ea0-2d01-5bf3-2d1ed8e4fd0b.png "Kobito.Yw4Y8S.png")


Export -> JSONを選択してテーマのJSONファイルをダウンロードします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/38f34396-5406-e68b-0c1e-ab6688dfdc69.png" height=300px />


ダウンロードしたファイルは`theme.json`にリネームし`App.js`と同じ階層に配置します。

#### テーマの適用

`App.js`を以下に変更します。

```:App.js
import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider, Layout, Button } from '@ui-kitten/components';
import { default as theme } from './theme.json'; // <-- Import app theme

export default () => (
  <ApplicationProvider {...eva} theme={{ ...eva.light, ...theme }}>
    <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button>HOME</Button>
    </Layout>
  </ApplicationProvider>
);
```

オレンジ色のテーマに変わりました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/8fc8e03f-edcf-97f5-3c2d-75a781c661e4.png" width=300px />




#### ダークモード

比較のためにコントロールを増やしてみます。

```:App.js
import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider, Layout, Button } from '@ui-kitten/components';
import { default as theme } from './theme.json'; // <-- Import app theme
import { Radio, Toggle, CheckBox, Datepicker, Calendar, Text } from '@ui-kitten/components';
import { StyleSheet } from 'react-native';

export default () => (
  <ApplicationProvider {...eva} theme={{ ...eva.light, ...theme }}>
    <Layout style={styles.container}>
      <Layout style={styles.layout} level='1'>
        <Text>hello! </Text>
      </Layout>
      <Layout style={styles.layout} level='1'>
        <Button>Button</Button>
      </Layout>
      <Layout style={styles.layout} level='2'>
        <Radio checked>Radio</Radio>
      </Layout>
      <Layout style={styles.layout} level='4'>
        <CheckBox checked>CheckBox</CheckBox>
      </Layout>
    </Layout>
    <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Toggle checked>Toggle</Toggle>
      <Datepicker />
      <Calendar/>
    </Layout>
  </ApplicationProvider>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  layout: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/12a066e3-d314-443c-cc2f-f7bc423a3093.png" width=300px />




ダークモードに変更してみます。７行目の`theme={{ ...eva.light ` を `theme={{ ...eva.dark`に変更します。

```
  <ApplicationProvider {...eva} theme={{ ...eva.dark, ...theme }}>
```


ダークモードに変わりました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/fd8107b1-cda4-a06c-739b-8b6e2cfae0ba.png" width=300px />


### 背景とボーダー

背景やボーダーはベーシックカラーでコントロールします。

基本色には11種類の濃淡があります。背景を適切に変更するためには、それぞれを設定する必要があります。
下の例のように、それぞれの色をtheme.jsonに追加します。

```:theme.json
  "color-basic-100": "#FFFFFF",
  "color-basic-200": "#F5F5F5",
  "color-basic-300": "#F5F5F5",
  "color-basic-400": "#D4D4D4",
  "color-basic-500": "#B3B3B3",
  "color-basic-600": "#808080",
  "color-basic-700": "#4A4A4A",
  "color-basic-800": "#383838",
  "color-basic-900": "#292929",
  "color-basic-1000": "#1F1F1F",
  "color-basic-1100": "#141414",
  "color-basic-transparent-100": "rgba(128, 128, 128, 0.08)",
  "color-basic-transparent-200": "rgba(128, 128, 128, 0.16)",
  "color-basic-transparent-300": "rgba(128, 128, 128, 0.24)",
  "color-basic-transparent-400": "rgba(128, 128, 128, 0.32)",
  "color-basic-transparent-500": "rgba(128, 128, 128, 0.4)",
  "color-basic-transparent-600": "rgba(128, 128, 128, 0.48)",
```

色合いが変わりました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/fd049374-ba09-f644-f165-ab30be84d7d7.png" width=300px />




### Text and Icons


背景と同様に、テキストとアイコンの色は基本シェードで制御されます。暗いテーマでは、テキストの色はシェードの上部（白っぽい色）を使用し、背景の色は下部を使用します。

- text-basic-color はデフォルトのテキスト色としてどこでも使われます。
- text-hint-color プレースホルダー、ラベル、キャプション、字幕、アイコンにデフォルトの状態で使用されます。
- text-disabled-color は、すべてのコントロール内で無効化された状態で使用されます。


変数を theme.json に追加してデフォルト値を上書きすることができます。

theme.jsonに追加します。

```
"text-basic-color": "$color-basic-600",
```
  
これでデフォルトの文字色が変わります。

![Simulator Screen Shot - iPhone 11 - 2020-10-26 at 01.07.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/d9ee3bc4-f76a-25c2-d3d5-d41ee858c520.png "Simulator Screen Shot - iPhone 11 - 2020-10-26 at 01.07.12.png")![Simulator Screen Shot - iPhone 11 - 2020-10-26 at 01.07.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/6ddf8ea5-0d0a-54ce-a753-ac1403afff81.png "Simulator Screen Shot - iPhone 11 - 2020-10-26 at 01.07.30.png")





## Configure Navigation

[UI Kitten - Configure Navigation](https://akveo.github.io/react-native-ui-kitten/docs/guides/configure-navigation#configure-navigation)


```
npm install @react-navigation/native
```

```
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
```


```
npm install react-native-screens
npm install rreact-native-safe-area-context
npm install @react-native-community/masked-view
```



```
npx pod-install ios
```






長くなったのでいったんここまで



今回の成果物は以下に置いてます。

[sugasaki/react-native-ui-kitten](https://github.com/sugasaki/react-native-ui-kitten)