[ReactNative/Expo] Paper と Navigation v5 で Twitter Clone アプリを作成する〜初心者向け〜

条件

• Expo: 36.0.0 / Expo-cli : 3.13.1

• macOS の Expo 開発環境でアプリを作成します。
• テキストエディタは Visual Studio Code を利用します。VScode の設定がまだの方は VSCode に乗り換えてはじめてやること！〜初心者向け〜 記事をご参考ください。別のテキストエディタでも構いませんが VSCode でショートカットキーをよく利用します。
• 作成するファイルは JavaScript を使用 ( TypeScript は使用しない ) します。
• Android Studio エミュレータ・iOS シミュレータ使用します。
• アプリの動作確認は、Android/iOS のデバイスとシミュレータで行いました。

• React のフックの知識があればより理解しやすくなります。
  → 主に、React.useState、React.useCallback、React.useMemo、React.useContext がこのアプリのテーマの切替などに使われています。
  → 参照リンク：フックの導入 or Hooks at a Glance

背景・紹介

React Navigation v5 ( 以下、v5 ) と React Native Paper ( 以下、Paper ) ( マテリアルデザインのライブラリ ) を連動して Twitter Clone アプリを作成する過程を React Native の初心者むけに詳しく説明します。

オリジナルの紹介記事は ▶︎ React Navigation v5 + React Native Paper = ❤️ ですが、この記事では Paper を v5 にどう統合するの？ に対する答え中心に紹介していた為、省略された部分が多くあり、完成版の GitHub の Repo があっても、最終版までどうやってたどり着くのかがよくわからないので、この記事でそれを見えるように書いていきたいと思います。

アプリの概要

作成するアプリは オリジナルの Twitter の一部だけの UI を作成する為、実装するのは主に下記の三つです。

• Drawer：テーマの切替、RTL の切替実行
• Stack Navigator：二つのスクリーンを持つ ( Feed、Details )
• Bottom Navigation : 三つのスクリーンを持つ ( Feed、Notifications、Messages )

完成したアプリの動作は ▼ で確認できます。

アプリ作成をはじめる

それでは始めましょう。

Expo や Android / iOS のシミュレータ環境でアプリを作成しますので、まだの方は、▼ の記事をベースに設定を行ってください。
Expo.io で React Native 開発環境を構築する〜macOS〜

Expo で開発環境を作成します。

expo init twitter-clone-example コマンドを打った後、blank テンプレートを選択しますと、expo の twitter-clone-example 環境がインストールされます。
( ※ プロジェット名の twitter-clone-example は任意 )

try🐶everything ~$ expo init twitter-clone-example
? Choose a template: expo-template-blank
Using Yarn to install packages. You can pass --npm to use npm instead.
...

To get started, you can type:

  cd twitter-clone-example
  yarn start

try🐶everything ~$ 

Paper、v5、そのた必要はパッケージをインストールします。

twitter-clone-example に移動して下記の二つのコマンド ( npm install ... expo install ... ) を実行すると、アプリ作成の準備は完了です。

npm install @react-navigation/native @react-navigation/stack @react-native-community/masked-view @react-navigation/drawer @react-navigation/material-bottom-tabs react-native-paper

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context

try🐶everything ~$ cd twitter-clone-example
try🐶everything twitter-clone-example$ npm install @react-navigation/native @react-navigation/stack @react-native-community/masked-view @react-navigation/drawer @react-navigation/material-bottom-tabs react-native-paper
...
8 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

try🐶everything twitter-clone-example$ 

try🐶everything twitter-clone-example$ expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context
...
├─ strict-uri-encode@2.0.0
└─ use-subscription@1.3.0
✨  Done in 166.72s.
try🐶everything twitter-clone-example$ 

完了したら、expo start コマンドで Expo を起動します。
起動できた後、ターミナルに i か a を押してシミュレータを起動しておきます。
( ここでは iOS シミュレータを使用します )

※Metro Bundler では左パネルの「Run on Android device/ emulator」or 「Run on iOS simulator」メニューをクリックして起動できます。

シミュレータの画面に「Open up App.js to start working on your app!」と表示されればOK です。

次は、VSCode を起動します。

これで開発の準備ができました。アプリを作成していきます。

Paper と v5 のための初期設定

• Paper では Provider でコンポーネントツリーをラップしておく必要があります。
• v5 では NavigationContainer で全てのナビゲーター構造をラップする必要があります。

この二つの条件を合わせて適用すると、下記のようになり、Main コンポーネントにすべてのアプリの機能を追加して行けば良いことです。

App.js

それでは、デフォルトの App.js を下記のように変更してください。

// App.js
import React from "react";
import { Provider as PaperProvider } from "react-native-paper";
import { NavigationContainer } from "@react-navigation/native";
import { Main } from "./src/Main";

export default function App() {
  return (
    <PaperProvider>
      <NavigationContainer>
        <Main />
      </NavigationContainer>
    </PaperProvider>
  );
}

src/main.js ファイルを作成します。

try🐶everything twitter-clone-example$ mkdir src
try🐶everything twitter-clone-example$ touch src/Main.js

Main.js ファイルを作成して iOS シミュレータで確認をします。

VSCode で Main.js ファイルを開き、imrnfc ( 使用方法 ) と打ち込みます。

• テンプレートの中で表示される componentName を Main に変更します。
• 下記のように修正して保存します。
  – export default Main;
  – const Main = (props) => {
  + export const Main = (props) => {
  ※ この後、imrnfc コマンドを使用する際には繰り返して修正してください。
• すると、自動で下記のようにフォマットに整理されます。もしこのように動作しない場合は 上の VSCode の使用方法を確認するか、このままコピペしてください。

src/Main.js

// Main.js

import React from "react";
import { View, Text, StyleSheet } from "react-native";

export const Main = props => {
  return (
    <View style={styles.container}>
      <Text>Main</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  }
});

iOS シミュレータを再起動 ( ⌘ R ) し、白い画面の真ん中に Main と表示されれば動作は OK です。

---

お名前.com

https://www.xserver.ne.jp/lp/service01/