Expo環境にReact Native Paperを導入する初期設定の方法

はる

ExpoとReact Native Paperを組み合わせて、カスタマイズ可能なテーマを設定し、アプリ全体に適用する方法をご紹介します。React Native Paperは、GoogleのMaterial Designをベースにした多彩なUIコンポーネントを提供しており、Expo環境での使用も簡単です。

Expo環境の事前準備
必要なパッケージのインストール
テーマの設定
1. コードの解説

Expo環境の事前準備

今回は、npx create-expo-app でReact Native + Expoプロジェクトを作成し、npm run reset-project で環境を整えた状態から説明します。

必要なパッケージのインストール

React Native Paperとreact-native-vector-iconsをインストールします。2つのパッケージを別々にインストールすることで、依存関係のエラーが少なくなり、安定したインストールができます。

npm install react-native-paper

npm install react-native-vector-icons

テーマの設定

次に、テーマを使って色やデザインをカスタマイズします。以下のコード例では、app/_layout.tsxファイルを作成または編集し、アプリ全体にテーマを適用します。

app/_layout.tsx

import { StatusBar } from "expo-status-bar";
import { Stack } from "expo-router";
import {
  PaperProvider,
  MD3LightTheme as DefaultTheme,
} from "react-native-paper";

// シンプルな色の設定を例として使用しています
const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: "#6200ee", // プライマリカラーの例
    secondary: "#03dac6", // セカンダリカラーの例
  },
};

export default function RootLayout() {
  return (
    <PaperProvider theme={theme}>
      <StatusBar style="dark" />
      <Stack>
        <Stack.Screen name="index" />
      </Stack>
    </PaperProvider>
  );
}