React NavigationのDrawer Navigatorでbabelプラグインエラー

React Navigation logo 雑記

CodeZineさんの記事でReact Nativeを勉強しているのですが、画面遷移ライブラリ「React Navigation」の基本で躓いた話です。

共通セットアップは問題なし

記事通りにまずは共通のセットアップをしていきました。

コアライブラリのインストール

npm install @react-navigation/native

依存ライブラリのインストール（Expo CLIを利用）

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

アプリのエントリーポイント（ExpoではApp.js）に追記

import 'react-native-gesture-handler';
import { NavigationContainer, useNavigation } from '@react-navigation/native';

NavigationContainerコンポーネントで、画面遷移したいUIを囲む

export default function App() {
  return (
    <NavigationContainer>
      {/* ここに中身を書く感じ */}
    </NavigationContainer>
  );
}

ここまでは特に問題ありませんでした。

Stack NavigatorとTab Navigatorは問題なし

ここから追加でnpmインストールして実装していくのですが、StackとTabについては問題なく実装できました。Stackを例にすると、

まずインストール

npm install @react-navigation/stack

あとは使いたい機能（createStackNavigator）インポートして

import { createStackNavigator } from '@react-navigation/stack';

constで宣言してStackオブジェクトを作っておいて、createStackNavigatorの機能を.Navigationとか.Screenで呼び出すという感じでした

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='Home'>
        <Stack.Screen name='Home' component={HomeScreen} />
        <Stack.Screen name='Detail' component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

ここまで問題なし。

Tab Navigatorの方はcreateBottomTabNavigatorというのをインストールして、同じように実装できました。

（createTabNavigatorじゃなくて、createBottomTabNavigatorなところが注意です。）

Drawer Navigatorでbabel pluginのエラー

同じように利用できる、とCodeZineさんの記事で割愛されているのですが、ここだけはめっちゃエラーが出て、なんで割愛したんですか…という感じでした

Error: Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/ 
1) Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details) 
2) Make sure you reset build cache after updating the config, run: yarn start --reset-cache, js engine: hermes

落ち着いてよく読むと、babelプラグインをどうにかして、キャッシュをクリアしろ的なことが書いてありました。

ご丁寧にURLも書いてくれているのでとりあえずクリック。当たり前ですがめっちゃ英語ですが、パッケージをインストールして、babel.config.jsに追記したらよさそうです。

yarn add react-native-reanimated

react-native-reanimated については、共通セットアップですでにExpoCLIでインストール済みですので、babel.config.jsを開いてpresetsの下のところに、緑色で記載している部分を追記

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin',],
  };
};

この処理で晴れてエラーが解消して、ドロワーが実装できました！

スポンサーリンク