[Suggestion Needed] Dismissing bottom sheet when tapping outside of bottom sheet about react-native-reanimated-bottom-sheet

[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 :)

[levani]

It's possible to close the bottom sheet by swiping down so in this case the TouchableWithoutFeedback will stay visible and the first tap will try to close already closed sheet. There must be some kind of "closed" event to implement this properly.

[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

[satya164]

Put a TouchableWithoutFeedback underneath where you can add a onPress listener to dismiss.

[timothystewart6]

Good suggestion @satya164 ! I can't seem to get it to trigger however. Each time I tap on the content in the background it routes to the item details. Here's my structure:

       <View>
           <BottomSheet
              ref={this.bottomSheet}
              snapPoints={[500, 250, 0]}
              renderContent={this.renderInner}
              renderHeader={this.renderHeader}
              initialSnap={2}
              callbackNode={this.fall}
              enabledInnerScrolling={false}
            />
          <TouchableWithoutFeedback
              onPress={() => {
                console.log('pressed')
                this.bottomSheet.current.snapTo(1)
              }}
            >
             <View style={{
                 backgroundColor: '#2c2c2f',
                }}>
              <Animated.ScrollView> 
                  ... list items that navigate to item details
              </Animated.ScrollView
           </View>
          </TouchableWithoutFeedback>
      </View>

[satya164]

It needs to be positioned absolutely above your content, not wrap the content if I understand your code

[timothystewart6]

Not sure I follow. I have a View (root component) with a BottomSheet and a ScrollView wrapped in a TouchableWithoutFeedback per (I thought) your suggestion. TouchableWithoutFeedback requires at least one child component.

[satya164]

Wrapping doesn't work, because then your scrollview handles touches. You want the touchable to be positioned absolutely over your scrollview so it doesn't let any touches go through.

TouchableWithoutFeedback requires at least one child component.

You can use an empty view

[nastarfan]

@lindesvard could you please explain about import { useNavigation } from 'hooks' and closeModal?
Is the hooks from this package here?

If you could provide some resources or information I can look at, that would be so helpful. Thanks

[AsadSaleh]

@lindesvard
Are you using this https://reactnavigation.org/docs/en/next/use-navigation.html ?

[appasaheb4]

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 :)

state update then not working

[appasaheb4]

it's solve thanks man

…

On Wed, Jan 22, 2020 at 5:50 PM Appasaheb ***@***.***> wrote: 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 :) state update then not working — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#46?email_source=notifications&email_token=AF4UYC5265G5YZ5JPCICS6DQ7A2YLA5CNFSM4HQRDNB2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJTLDJY#issuecomment-577155495>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AF4UYC6H5NTFXI6IRBOMI43Q7A2YLANCNFSM4HQRDNBQ> .

[BrtqKr]

Thank you for your work. Closing issue, because provided solution was approved.

[przbadu]

This is how I am handling it:

Basically, idea here is:

• Always render bottom sheet content as 100% height
• Then put upper portion with certain height and transparent background, e.g: 60%, which can be Tappable area, tapping on it, close the bottom sheet
• Second 40% screen is for your bottom sheet content (agin, you can adjust these heights)

  function renderBottomSheetContent() {
    return (
      <View
        style={{
          height: '100%',
          display: 'flex',
          justifyContent: 'space-between',
        }}>

        <TouchableOpacity onPress={closeBottomSheet} style={{height: '60%'}} />

        <View
          style={{
            height: '40%',
            backgroundColor: COLORS.white,
            padding: SIZES.padding,
          }}>
          <Text>You can put both header and content in content section</Text>
        </View>

      </View>
    );
  }