※ React-Navigation v6
iOS13のモーダルとは
スムーズなアニメーションと、スワイプダウンによるクローズ。
※ もちろんAndroidでも同様の挙動にできる。
![](https://i2.wp.com/qiita-user-contents.imgix.net/https%3A%2F%2Fi.gyazo.com%2Ff8337719a0daf9ec6a5cab8e8430f2e5.gif?w=1320&ssl=1)
手軽にリッチなアニメーションが実装でき、然るべき画面で使用することでユーザービリティの向上が見込める。
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>
![](https://i2.wp.com/qiita-user-contents.imgix.net/https%3A%2F%2Fi.gyazo.com%2Fd70d52f812dc4f82140911548e51a990.gif?w=1320&ssl=1)