expo-routerで複数段階あるfullscreenModalを全て閉じる方法

はじめに

今回は、表題の通りexpo-routerを使用しているreact nativeで、fullscreenModalを閉じる方法について紹介します。

発生した問題

ScreenAからfullscreen1、fullscreen2、fullscreen3と遷移してきて、最後にfullscreen3からScreenAに遷移(fullscreenModalを終了する)という動作がexpo-routerでは簡単には実装できない。

useRouterを使用した.back()や.dismiss()、.dismissAll()もfullscreen3からfullscreen1に戻るだけで、ScreenAに遷移が実装できない。(これらの組み合わせなら実現は可能だが、なんとかワンライナーで書きたい)

解決法

以下のコードを使用する。

const navigation = useNavigation(); 
// ~~~~~ 省略 ~~~~
navigation.getParent()?.goBack();

解説

• navigation.getParent()?

この関数は現在のナビゲーターの親ナビゲーターへの参照を返します。
今回のfullscreenModalの場合、モーダルを開いた元のスタックナビゲーター(ScreenA)を指すようです。

getParent()がundefinedを返す可能性のある関数なので、ちゃんとオプショナルチェーンを使用するようにしましょう。

おわりに

このような方法の記載はexpo-routerおよびreact-navigationのdocsにもなかったので、勉強になりました。
こんなことをしなくても、それ用のメソッドを用意して欲しいものではあるのですが...

参考