Native Base + React Native + Expo + React Navigation でUIのお試し

作成：2023年1月5日
（本記事は次の記事の続きです「[GraphQL + Amplify + React Native + Expo でデータアクセス](https://qiita.com/RYO_/items/8f29dde7ee5ee258872d)」）

アプリに Native Base を使って UI を導入してみようと思います。
まずはプロジェクトを作って、Boxを使うところまで試します。
また、React Navigation で Home を作ります。

# プロジェクト作成
[Native Base でプロジェクト](https://docs.nativebase.io/install-expo)を作って、これまでにやった [Authenticator](https://qiita.com/RYO_/items/96324bc4dfd2d7e00ae7) や [GraphQL](https://qiita.com/RYO_/items/8f29dde7ee5ee258872d) を追加していきます。

プロジェクト作成
```
expo upgrade
expo init native-base-amplify20230101 -- template @native-base/expo-template
cd native-base-amplify20230101
yarn
```
以下、Hello world サンプルコードです。
```javascript:App.js
import React from "react";
import { NativeBaseProvider, Text, Box } from "native-base";

export default function App() {
  return (
    <NativeBaseProvider>
      <Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
        <Text>Hello NativeBase !!!</Text>
      </Box>
    </NativeBaseProvider>
  );
}
```
```
yarn ios
```
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/b0d6840b-790b-0d26-6a53-10d912c36ba2.png">

# Authenticator のセットアップ
この[リンクの手順](https://qiita.com/RYO_/items/96324bc4dfd2d7e00ae7)でセットアップ進めます。
```
yarn add @aws-amplify/ui-react-native aws-amplify react-native-safe-area-context amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill
```
```
amplify init
npx expo install @react-native-community/netinfo@9.3.5
yarn ios
```
実行できました。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/377b7f20-3f53-a730-ee24-9c602a211db8.png">

App.js を auth を入れて更新します。 App.js のコードのリンク：[ブランチqiita20230101a](https://github.com/ryoyuki6/native-base-amplify20230101/blob/qiita20230101a/App.js)
```
amplify add auth
amplify push
yarn ios
```
auth 実行できました。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/20294ce2-91bf-c93b-2d6c-7adb717ad88f.png">

# GraphQL のセットアップ
[このリンクの手順](https://qiita.com/RYO_/items/8f29dde7ee5ee258872d)でセットアップを進めます。
・データモデルの設計
・データの作成
・amplify pull
・amplify mock
```
yarn add aws-amplify @react-native-async-storage/async-storage @react-native-community/netinfo
```
・amplify push
```
npx expo install @react-native-community/netinfo@9.3.5
```
・yarn ios
Native Base テンプレートで作成した EXPOプロジェクトで GraphQL で Amplify からデータを取ってこれました。App.jsのコードのリンク：[qiita20230102](https://github.com/ryoyuki6/native-base-amplify20230101/blob/qiita20230102/App.js)
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/81748125-f32c-1f94-2ddc-36cc9a990f8b.png">
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/04c7aff4-d93e-83e6-bb6c-8dc7ea893369.png">


# NativeBase の Box を調べてみた
[サンプルコード](https://docs.nativebase.io/utility-first)について調査
```
function Example() {
  return <NativeBaseProvider>
      <Box bg="primary.600" py="4" px="3" borderRadius="5" rounded="md" width={375} maxWidth="100%">
        <HStack justifyContent="space-between">
          <Box justifyContent="space-between">
            <VStack space="2">
              <Text fontSize="sm" color="white">
                Today @ 9PM
              </Text>
              <Text color="white" fontSize="xl">
                Let's talk about avatar!
              </Text>
            </VStack>
            <Pressable rounded="xs" bg="primary.400" alignSelf="flex-start" py="1" px="3">
              <Text textTransform="uppercase" fontSize="sm" fontWeight="bold" color="white">
                Remind me
              </Text>
            </Pressable>
          </Box>
          <Image source={{
          uri: 'https://media.vanityfair.com/photos/5ba12e6d42b9d16f4545aa19/3:2/w_1998,h_1332,c_limit/t-Avatar-The-Last-Airbender-Live-Action.jpg'
        }} alt="Aang flying and surrounded by clouds" height="100" rounded="full" width="100" />
        </HStack>
      </Box>
    </NativeBaseProvider>;
}
```
primary.600：[青系の色](https://getbootstrap.jp/docs/5.0/utilities/colors/)
px : [padding](https://developer.mozilla.org/ja/docs/Web/CSS/padding)-left and padding-right
py : padding-top and padding-bottom
[HStack](https://docs.nativebase.io/next/hstack#page-title)
[justifyContent: space-between;](https://developer.mozilla.org/ja/docs/Web/CSS/justify-content)

参考
[https://nativebase.io/](https://nativebase.io/)
[NativeBase 3.0はReact Nativeアプリのための楽しいUI開発キット](https://note.com/umotion/n/n0fb7ff377b3f)
　・牛の監視システムU-motionのアラート・ダッシュボードをもとに一部簡略化して実装した画面がこちらになります。Dashboardのサンプルソースコード有り。
[NativeBaseはいいぞって話](https://zenn.dev/daichi_suyama/articles/1a44fedf2d1bf9)
　・ドキュメントがわかりやすい(だから記事が少ない？)
　・Figmaのデザインキットもある(弊社での大きな採用理由)
[Utility Firstに生まれ変わったNativeBase 3.0つまみ食い](https://zenn.dev/terrierscript/scraps/ad84d33491a67c)
　・3.0になって大幅アップデート。もはや別物。
[nativebase - Figma](https://www.figma.com/@nativebase)

# React Navigation で基本の画面遷移の準備を行う

コアライブラリをインストール
```
yarn add @react-navigation/native
```

依存ライブラリをインストール
```
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
```

Stack Navigator をインストール
```
yarn add @react-navigation/stack
```

参考
[React Navigation](https://reactnavigation.org/docs/getting-started/)
[基礎から学ぶReact Native入門](https://www.shoeisha.co.jp/book/detail/9784798169569)

# Native Base で基本的な Box 表示と、　React Navigation で基本的な Home 画面を表示

App.js に次のコードを追加します（ App.js のリンク：[ブランチqiita20230105a](https://github.com/ryoyuki6/native-base-amplify20230101/blob/qiita20230105a/App.js)）
```
...
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
...
return (
    <NativeBaseProvider>
      <Box bg="primary.500" py="4" px="3" borderRadius="5" rounded="md" alignSelf="center" justifyContent="center">
        <VStack space="2" alignSelf="center">
          <Text fontSize="sm" color="white">Hello Native Base !!!</Text>
          <SignOutButton />
        </VStack>
      </Box>
    </NativeBaseProvider>
  );
...
        <NavigationContainer>
          <Stack2.Navigator>
            <Stack2.Screen name="Home" component={HomePage} />
          </Stack2.Navigator>
        </NavigationContainer>
```

実行します。
```
yarn ios
```

基本的な表示ができました。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/a9d2a15c-eeaf-c990-74fc-497b1b25c485.png">