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

Question

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

score 0 · Answer 1 · answered Aug 19 '22 at 15:00

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

answered Aug 19 '22 at 15:00

theaniketpatil

21
3

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 27 '22 at 05:33

score 0 · Answer 2 · answered Aug 08 '23 at 17:21

Wrap your app with GestureHandlerRootView component from react-native-gesture-handler and must use flex 1.

example:

import { GestureHandlerRootView } from "react-native-gesture-handler";


function App(){
return(
 <GestureHandlerRootView style={{ flex: 1 }}>
<AppNavigators />
</GestureHandlerRootView>
);
}

score -1 · Answer 3 · answered Aug 19 '22 at 08:05

-1

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.

answered Aug 19 '22 at 08:05

Đạt Trần

19
2

will this package work with react-native cli or only with expo ? – theaniketpatil Aug 19 '22 at 08:34
btw I tried this package also and got same result swipe down not working in react-cli project – theaniketpatil Aug 19 '22 at 14:42
solution I found that we have to use this component inside GestureHandlerRootView component – theaniketpatil Aug 19 '22 at 14:49
@theaniketpatil we can use @gorhom/bottom-sheet in both React Native or Expo. – Đạt Trần Aug 20 '22 at 05:44

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

3 Answers3