React Navigation環境からExpo Routerに乗り換える方法〜React Native Paper〜

マテリアル デザインライブラリ・コンポーネントライブラリである React Native Paper を Expo Router と連携するための手順をご紹介します。React Native Paper + React Navigation環境から乗り換える方法にもなると思います。

Expo Router環境を作成する

次の記事通り開発環境は整ったとします。

Expo Router・TypeScriptで開発環境を作る〜Expo bare〜

開発環境 (Expo Bare Workflow)※ 全体参照：下記のような開発環境で行います！(w/ VSCode)try🐶everything myproject$ npx expo-env-info expo-env-info 1.0...

www.jacepark.com

2023.10.10

React Native Paperを設定する

ライブラリを設置・連携する

ライブラリを設置します。

try🐶everything casablanca$ yarn add react-native-paper
try🐶everything casablanca$ yarn add react-native-safe-area-context
try🐶everything casablanca$ npx pod-install

使用しないモジュールを除外してバンドル サイズを小さくする設定をします。

// babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['expo-router/babel'],
    env: {production: {plugins: ['react-native-paper/babel']}}, // <-- 追加
  };
};

これで基本設定は完了です！

次は、Expo Routerと連携します。(app/_layout.tsx)

変化を確認するため、theme.colors.{primary|secondary}の値をMD2Colors.xxxに変更します。

• Line 3-7,15,16

ルートコンポーネントを、<PaperProvider /> でラップします。

• Line 59, 64

// app/_layout.tsx

import React, {useEffect} from 'react';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import {
  MD2Colors,
  PaperProvider,
  MD3LightTheme as DefaultTheme,
} from 'react-native-paper';
import {useFonts} from 'expo-font';
import {SplashScreen, Stack} from 'expo-router';

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: MD2Colors.greenA700,
    secondary: MD2Colors.amberA400,
  },
};

export {
  // Catch any errors thrown by the Layout component.
  ErrorBoundary,
} from 'expo-router';

export const unstable_settings = {
  // Ensure that reloading on `/modal` keeps a back button present.
  initialRouteName: '(tabs)',
};

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [loaded, error] = useFonts({
    SpaceMono: require('common/assets/fonts/SpaceMono-Regular.ttf'), 
    ...FontAwesome.font,
  });

  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
  useEffect(() => {
    if (error) throw error;
  }, [error]);

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return <RootLayoutNav />;
}

function RootLayoutNav() {
  return (
    <PaperProvider theme={theme}>
      <Stack>
        <Stack.Screen name="(tabs)" options={{headerShown: false}} />
        <Stack.Screen name="modal" options={{presentation: 'modal'}} />
      </Stack>
    </PaperProvider>
  );
}

カスタマイズする

ヘッダーを <AppBar/> に変更します (app/(tabs)/_layout.tsx)

Appbar.Header の backgroundColor を colors.primary に設定します。

• Line 5,7,19-20,32-39

navigation.canGoBack() を使って、ReactNavigation の back Prop を代替できます。

// app/(tabs)/_layout.tsx

import * as React from 'react';
import {Pressable, useColorScheme} from 'react-native';
import {Appbar, useTheme} from 'react-native-paper';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import {Link, Tabs, useNavigation} from 'expo-router';
import Colors from 'common/constants/colors';

function TabBarIcon(props: {
  name: React.ComponentProps<typeof FontAwesome>['name'];
  color: string;
}) {
  return <FontAwesome size={28} style={{marginBottom: -3}} {...props} />;
}

export default function TabLayout() {
  const colorScheme = useColorScheme();
  const {colors} = useTheme();
  const navigation = useNavigation();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
      }}>
      <Tabs.Screen
        name="index"
        options={{
          title: 'Tab One',
          tabBarIcon: ({color}) => <TabBarIcon name="code" color={color} />,
          header: () => (
            <Appbar.Header style={{backgroundColor: colors.primary}}>
              {navigation.canGoBack() ? (
                <Appbar.BackAction onPress={navigation.goBack} />
              ) : null}
              <Appbar.Content title={'Tab One'} />
            </Appbar.Header>
          ),
          headerRight: () => (
            <Link href="/modal" asChild>
              <Pressable>
                {({pressed}) => (
                  <FontAwesome
                    name="info-circle"
                    size={25}
                    color={Colors[colorScheme ?? 'light'].text}
                    style={{marginRight: 15, opacity: pressed ? 0.5 : 1}}
                  />
                )}
              </Pressable>
            </Link>
          ),
        }}
      />
      <Tabs.Screen
        name="two"
        ...

<Menu /> をヘッダーに追加する

• Line 5,21-23,41-68

// app/(tabs)/_layout.tsx

import * as React from 'react';
import {Pressable, useColorScheme} from 'react-native';
import {Appbar, useTheme, Menu} from 'react-native-paper';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import {Link, Tabs, useNavigation} from 'expo-router';
import Colors from 'common/constants/colors';

function TabBarIcon(props: {
  name: React.ComponentProps<typeof FontAwesome>['name'];
  color: string;
}) {
  return <FontAwesome size={28} style={{marginBottom: -3}} {...props} />;
}

export default function TabLayout() {
  const colorScheme = useColorScheme();
  const {colors} = useTheme();
  const navigation = useNavigation();
  const [visible, setVisible] = React.useState(false);
  const openMenu = () => setVisible(true);
  const closeMenu = () => setVisible(false);

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
      }}>
      <Tabs.Screen
        name="index"
        options={{
          title: 'Tab One',
          tabBarIcon: ({color}) => <TabBarIcon name="code" color={color} />,
          header: () => (
            <Appbar.Header style={{backgroundColor: colors.primary}}>
              {navigation.canGoBack() ? (
                <Appbar.BackAction onPress={navigation.goBack} />
              ) : null}
              <Appbar.Content title={'Tab One'} />
              {!navigation.canGoBack() ? (
                <Menu
                  visible={visible}
                  onDismiss={closeMenu}
                  anchor={
                    <Appbar.Action icon="dots-vertical" onPress={openMenu} />
                  }>
                  <Menu.Item
                    onPress={() => {
                      console.log('Option 1 was pressed');
                    }}
                    title="Option 1"
                  />
                  <Menu.Item
                    onPress={() => {
                      console.log('Option 2 was pressed');
                    }}
                    title="Option 2"
                  />
                  <Menu.Item
                    onPress={() => {
                      console.log('Option 3 was pressed');
                    }}
                    title="Option 3"
                    disabled
                  />
                </Menu>
              ) : null}
            </Appbar.Header>
          ),
          headerRight: () => (
            <Link href="/modal" asChild>
              <Pressable>
                {({pressed}) => (
                  <FontAwesome
                    name="info-circle"
                    size={25}
                    color={Colors[colorScheme ?? 'light'].text}
                    style={{marginRight: 15, opacity: pressed ? 0.5 : 1}}
                  />
                )}
              </Pressable>
            </Link>
          ),
        }}
      />
      <Tabs.Screen
        name="two"
        ...

おわりに

これで、React Native Paper + React Navigationと同じ環境で最小限の開発環境が作成されました。

※追記：設定の詳細記事はこちら（⬇︎）

[How-To/Expo Rotuer] tabBarのレイアウトを中央寄せに調整する

詳細は割愛いたします！tabBarのアイコンとラベルを中央寄せに変更する。Before基本的に下向きに偏ったレイアウトを変更する。AndoridiOSAfterAndroidiOSTabBarIcon のスタイルを調子するTabBarIco...

www.jacepark.com

2023.10.12