Question 35063 in React native Question posted in
The official React Native documentation can be found here.

I am trying to implement bottom sheet in react native with npm package reanimated-bottom-sheet but swipe down gesture handler is not working

import statements

import * as React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import Animated from 'react-native-reanimated';
import BottomSheet from 'reanimated-bottom-sheet';

main app function

export default function App() {
  const renderContent = () => (
  <View
    style={{ backgroundColor: 'white', padding: 16, height: 450, }} >
    <Text>Swipe down to close</Text>
  </View>

const sheetRef = React.useRef(null);
const fall =  new Animated.Value(1)

return (
  <>
    <View
    style={{
      flex: 1,
      backgroundColor: 'papayawhip', alignItems: 'center', justifyContent: 'center',
    }}
    >
      <Button title="Open Bottom Sheet" onPress={() => sheetRef.current.snapTo(0)} />
    </View>

continue with bottom sheet code

    <BottomSheet 
      ref={sheetRef} 
      snapPoints={[200, 0]} 
      initialSnap={1} borderRadius={20}
      renderContent={renderContent}
      callbackNode={fall}
      enabledGestureInteraction={true}
    />
  </>
)

}

I have set enabledGestureInteraction to true but still it is not working

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The solution I found for this is we have to wrap our components inside GestureHandlerRootView compnent from react-native-gesture-handler and we have to set it's style with flex:1

    discussion ref link - https://github.com/gorhom/react-native-bottom-sheet/issues/775


  2. 0

    I haven’t used reanimated-bottom-sheet before. But looks like there is a problem with snapPoints property. It should be:

    snapPoints={[0, 200]}

    The package is out of date. I suggest you use this one instead: https://gorhom.github.io/react-native-bottom-sheet/

    I’m using it in my project. It’s awesome.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search