[Suggestion Needed] Dismissing bottom sheet when tapping outside of bottom sheet

Hi. Great component! This is working fantastic so far. One thing I haven’t figure out is a way to easily dismiss it when tapping outside of the sheet. I can easily dismiss it programmatically by using snapTo(index) however when the sheet is raised I am not sure how to intercept these taps to prevent it from tapping on content underneath.

Thank you!

[lindesvard]

I do like this:

import React, { useRef, useEffect } from 'react'
import PropTypes from 'prop-types'
import { View, TouchableWithoutFeedback } from 'react-native'
import BottomSheet from 'reanimated-bottom-sheet'
import Animated from 'react-native-reanimated'
import { useNavigation } from 'hooks'

const { Value, onChange, call, cond, eq, abs, sub, min } = Animated

const Modal = ({ children, snapPoints = [400, 0], initialSnap = null }) => {
  const sheet = useRef(null)
  const { closeModal } = useNavigation()
  const position = new Value(1)
  const opacity = min(abs(sub(position, 1)), 0.8)
  const zeroIndex = snapPoints.length - 1
  const height = snapPoints[0]
  const handleOutsidePress = () => {
    sheet.current.snapTo(zeroIndex)
  }

  useEffect(() => {
    if (sheet.current) {
      sheet.current.snapTo(initialSnap || 0)
    }
  }, [])

  return (
    <View style={{ flex: 1 }}>
      <TouchableWithoutFeedback onPress={handleOutsidePress}>
        <Animated.View
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            flex: 1,
            backgroundColor: '#000',
            opacity,
          }}
        />
      </TouchableWithoutFeedback>
      <Animated.Code exec={onChange(position, [cond(eq(position, 1), call([], closeModal))])} />
      <BottomSheet
        ref={sheet}
        initialSnap={zeroIndex}
        snapPoints={snapPoints}
        callbackNode={position}
        renderHeader={() => (
          <View
            style={{
              backgroundColor: 'rgba(255,255,255,0.5)',
              width: 50,
              height: 3,
              margin: 10,
              alignSelf: 'center',
              borderRadius: 3,
            }}
          />
        )}
        renderContent={() => (
          <View
            style={{
              backgroundColor: '#fff',
              padding: 20,
              height,
            }}
          >
            {children}
          </View>
        )}
      />
    </View>
  )
}

Modal.propTypes = {
  children: PropTypes.any,
  snapPoints: PropTypes.array,
  initialSnap: PropTypes.number,
}

export default Modal

Usage:

const SomeModal = () => {
  return (
    <Modal snapPoints={[500, 0]}>
      <Text>My modal</Text>
    </Modal>
  )
}

Works like a charm 😃

[ardyfeb]

I do like this:

import React, { useRef, useEffect } from 'react'
import PropTypes from 'prop-types'
import { View, TouchableWithoutFeedback } from 'react-native'
import BottomSheet from 'reanimated-bottom-sheet'
import Animated from 'react-native-reanimated'
import { useNavigation } from 'hooks'

const { Value, onChange, call, cond, eq, abs, sub, min } = Animated

const Modal = ({ children, snapPoints = [400, 0], initialSnap = null }) => {
  const sheet = useRef(null)
  const { closeModal } = useNavigation()
  const position = new Value(1)
  const opacity = min(abs(sub(position, 1)), 0.8)
  const zeroIndex = snapPoints.length - 1
  const height = snapPoints[0]
  const handleOutsidePress = () => {
    sheet.current.snapTo(zeroIndex)
  }

  useEffect(() => {
    if (sheet.current) {
      sheet.current.snapTo(initialSnap || 0)
    }
  }, [])

  return (
    <View style={{ flex: 1 }}>
      <TouchableWithoutFeedback onPress={handleOutsidePress}>
        <Animated.View
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            flex: 1,
            backgroundColor: '#000',
            opacity,
          }}
        />
      </TouchableWithoutFeedback>
      <Animated.Code exec={onChange(position, [cond(eq(position, 1), call([], closeModal))])} />
      <BottomSheet
        ref={sheet}
        initialSnap={zeroIndex}
        snapPoints={snapPoints}
        callbackNode={position}
        renderHeader={() => (
          <View
            style={{
              backgroundColor: 'rgba(255,255,255,0.5)',
              width: 50,
              height: 3,
              margin: 10,
              alignSelf: 'center',
              borderRadius: 3,
            }}
          />
        )}
        renderContent={() => (
          <View
            style={{
              backgroundColor: '#fff',
              padding: 20,
              height,
            }}
          >
            {children}
          </View>
        )}
      />
    </View>
  )
}

Modal.propTypes = {
  children: PropTypes.any,
  snapPoints: PropTypes.array,
  initialSnap: PropTypes.number,
}

export default Modal

Usage:

const SomeModal = () => {
  return (
    <Modal snapPoints={[500, 0]}>
      <Text>My modal</Text>
    </Modal>
  )
}

Works like a charm 😃

using this code, scrollview outside <View style={{ flex: 1 }}> cannot be scrolled