【React Native】iOS13風モーダルの作成

※ React-Navigation v6

iOS13のモーダルとは

スムーズなアニメーションと、スワイプダウンによるクローズ。
※ もちろんAndroidでも同様の挙動にできる。

手軽にリッチなアニメーションが実装でき、然るべき画面で使用することでユーザービリティの向上が見込める。

React Navigationでの実装

Stackの設定で、mode="modal"を設定する。

<Stack.Navigator
  mode="modal"
  screenOptions={{
  headerShown: true,
}}>
  <Stack.Screen name="tab" component={TabScreen} />
  <Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>

Androidでも同様のアニメーションとジェスチャを設定する

AndroidでもiOSと動きを揃える場合、追加の設定が必要になる。

<Stack.Navigator
  mode="modal"
  screenOptions={{
  headerShown: true,
+ gestureEnabled: true,
+ cardOverlayEnabled: true,
+ ...TransitionPresets.ModalPresentationIOS,
}}>
  <Stack.Screen name="tab" component={TabScreen} />
  <Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>