はじめに

React Native (+ Expo) で使用できる NativeBase という見目麗しいライブラリがあるのですが、公式の Expo のセットアップサンプルが、React.Componentベースなので、関数ベースに書き換えてみます。

なお、言語は TypeScript とします。

nativebase.io

NativeBase のインストール

Expo で使用する場合は、以下の２行を実行するだけです。なんでも、NativeBase は Expo のカスタムフォントを使用しているので追加で設定が必要な模様。

$ yarn add native-base --save
$ expo install expo-font

App.tsx でカスタムフォントを読み込む

公式ドキュメントと異なるのは、Hooks を使用していることでしょうか。条件判定が入るので複雑な記述になっていますが。。

import React, { useState, useEffect } from 'react';
import { AppLoading } from 'expo';
import { Container, Text } from 'native-base';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';

const App = () => {
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    const load = async () => {
      await Font.loadAsync({
        Roboto: require('native-base/Fonts/Roboto.ttf'),
        // eslint-disable-next-line @typescript-eslint/camelcase
        Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
        ...Ionicons.font,
      });

      setIsReady(true);
    };

    load();
  }, [isReady]);

  return (
    <>
      {(() => {
        if (isReady) {
          return (
            <Container>
              <Text>Open up App.js to start working on your app!</Text>
            </Container>
          );
        } else {
          return <AppLoading />;
        }
      })()}
    </>
  );
};

export default App;