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

作成：2023年1月5日
（本記事は次の記事の続きです「GraphQL + Amplify + React Native + Expo でデータアクセス」）

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

プロジェクト作成

Native Base でプロジェクトを作って、これまでにやった Authenticator や GraphQL を追加していきます。

プロジェクト作成

expo upgrade
expo init native-base-amplify20230101 -- template @native-base/expo-template
cd native-base-amplify20230101
yarn

以下、Hello world サンプルコードです。

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

Authenticator のセットアップ

このリンクの手順でセットアップ進めます。

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

実行できました。

App.js を auth を入れて更新します。 App.js のコードのリンク：ブランチqiita20230101a

amplify add auth
amplify push
yarn ios

auth 実行できました。

GraphQL のセットアップ

このリンクの手順でセットアップを進めます。
・データモデルの設計
・データの作成
・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

NativeBase の Box を調べてみた

サンプルコードについて調査

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：青系の色
px : padding-left and padding-right
py : padding-top and padding-bottom
HStack
justifyContent: space-between;

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

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
基礎から学ぶReact Native入門

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

App.js に次のコードを追加します（ App.js のリンク：ブランチqiita20230105a）

...
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

基本的な表示ができました。