React NativeのModalをswipe downで閉じる

React Nativeのデフォルトにある、Modalを使用していてswipe downでモーダルを非表示したい場合がある。
色々やり方があるみたいだが、一番簡単な解決方法を見つけた。

結論

先に結論。
onRequestCloseを使えばいい。

<Modal onRequestClose={() => setVisible(false))}>
 {/* Modalの中身 */}
</Modal>

解説

ライブラリなんかも出てるみたいだが、単純に標準に装備されたonRequestCloseというイベントハンドラで制御できることがわかった。

<Modal
  animationType={'slide'}
  visible={visible}
  presentationStyle={'pageSheet'}
  onRequestClose={() => {}} // ←ここ
>
 {/* Modalの中身 */}
</Modal>

onRequestCloseにstateの処理を記載してやれば良い。

全体としてはこんな感じになる。

import React, { useState } from 'react';
import { Modal, View, Text } from 'react-native';

const SwipeDownModal = (): JSX.Element => {
  const [visible, setVisible] = useState(false);
  return (
    <Modal
      animationType={'slide'}
      visible={visible}
      presentationStyle={'pageSheet'}
      onRequestClose={() => setVisible(false)}
    >
      {/* Modalの中身 */}
    </Modal>
  );
}

export default SwipeDownModal;

若干動きが気になるが、まぁ許容範囲だろう。

単純にドキュメントちゃんと読もうねって話なんだけど、
あまりonRequestCloseを使ってる記事がなかったので、ここに残しておく。

参考

https://reactnative.dev/docs/modal