【解決】ReactNativeのCardStyleInterPolatorが使えなくなった

ReactNavigationで遷移を実装するとき、遷移の仕方を変える方法、CardStyleInterPolatorが効かなくなっていた。

今回は、ReactNativeでStack.Navigationを使うときに遷移の方法を変えるscreenOptionsが使えなくなってたので、その解決方法を示します。

実際に動かして動作ができることを確認しているので、同じ事象になっている人は参考にしていただければと思います。

【結論】解決方法

今回は、遷移の仕方を変える方法の結論を先に述べておこうと思います。

screenOptions={{
            animation: "fade_from_bottom"
          }}

今回の事象

今回は、Reactnavigation 6.0以降を使っている人で、screenOptionsで遷移の仕方を変える方法がバージョンアップしていました。

今までは、以下のようにして指定していました。

cardStyleInterpolator: CardStyleInterpolators.<あなたの指定したい遷移方法>

ですが、バージョン6.0.0以降で、以前のようにcardStyleInterpolatorを使っても、遷移方法を変えることができません。

Stack.Screenで遷移方法を変える場合も同様

個々の画面で遷移方法を変えたい時に、Stack.Screenの中でoptionsを指定するかと思いますが、そこでも同様に、cardStyleInterPolatorではなく、animationを指定することになっています。

<Stack.Screen 
          name="SignUp" 
          component={SignUpScreen} 
          options={{
            animation: "fade_from_bottom"
          }}

遷移の種類

【余談】インストールする内容も変化（Expoの場合）

バージョンが６.０.０になったことで、今までStack.Navigationを使うときは、結構長いインストール文を入力する必要がありました。（コピペすればいいので手間はないですが。。）

以前までのインストール文（バージョン5.0）

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

現在のインストール文（バージョン6.0.0）

npx expo install react-native-screens react-native-safe-area-context

なので、他のサイトをみるとバージョン5.0.0に対応したものもあります。現在は、handlerやreanimatedなどは必要ありませんので、どのバージョンに対応しているかをよく確認すると良いです。

詳しくは、公式ページを参照してみてください。

まとめ

今回は、ReactnativeのNavigationバージョンアップで変わった遷移の方法を紹介しました。

ReactNativeを使ったアプリ開発の方法についても紹介しています。ぜひそちらも併せてご覧ください。

ReactNativeの開発ハック