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
2
Answers
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
I haven’t used reanimated-bottom-sheet before. But looks like there is a problem with snapPoints property. It should be:
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.