モーダルの画像の外側をクリックしてモーダルを閉じたい。

Question

前提

• react-nativeのモーダル
• react-responsive-carouselのカルーセル
• next/imageのImage

を使用しています。

実現したいこと

上記前提で記載したものを使用して、複数の画像を表示しております。
現在閉じるボタンを押してモーダルを閉じることはできますが、
画像の外側をクリックしてモーダルを閉じる実装を追加したいです。

該当のソースコード

現在は画像と一緒にモーダルが閉じてしまっています。

type ImageModalProps = ModalProps & {
  closeModal: () => void
  images: Images
}

const ImageModal: React.FC<ImageModalProps> = ({ images, closeModal, ...rest }) => {

  const contentsWidth = Dimensions.get('window').width
  const contentsHeight = Dimensions.get('window').height

  return (
    <Modal {...rest}>
      <TouchableOpacity activeOpacity={1} onPressOut={() => closeModal()}>
        <Carousel>
          {images.image.map((img, index) => (
            <TouchableWithoutFeedback key={index}>
              <div>
                {img.file_url && (
                  <Image
                    src={img.file_url}
                    objectFit="contain"
                    width={contentsWidth}
                    height={contentsHeight}
                  />
                )}
              </div>
            </TouchableWithoutFeedback>
          ))}
        </Carousel>
        <View style={{ position: 'absolute', top: 10, right: 30 }}>
          <TouchableOpacity onPress={() => closeModal()}>
            <FontAwesomeIcon icon={faTimesCircle} />
          </TouchableOpacity>
        </View>
      </TouchableOpacity>
    </Modal>
  )
}

どなたかお分かりになる方、ご助言いただけますと幸いです。

Answer 1

あまり自信ないのですが、TouchableWithoutFeedbackコンポーネントにタップ時の処理を追記してみたらうまくいかないでしょうか？？

<TouchableWithoutFeedback onPress={() => closeModal()}>
...
</TouchableWithoutFeedback>