AndroidでReact NavigationのアニメーションをiOS風に変更する方法

問題点

React Navigationを使用しているAndroidアプリで画面遷移を行う際、デフォルトのアニメーションは画面がフラッシュするような挙動を示します。一般的な左から右へ、または右から左へとスライドするアニメーションにするには一部設定を変える必要があります。

解決策

この問題を解決するために、React NavigationのscreenOptionsプロパティを利用して、カードスタイルのインターポレータをCardStyleInterpolators.forHorizontalIOSに設定します。これにより、Androidデバイス上での画面遷移アニメーションがiOSのスタイル、つまり左から右、または右から左へとスライドするアニメーションに変更されます。この方法は簡単に実装でき、アプリのナビゲーション体験を大きく改善させることが可能です。

実装方法

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

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
      }}
    >
      {/* スクリーンコンポーネント */}
    </Stack.Navigator>
  );
}