Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

@gorhom/react-native-bottom-sheet doesn't work on Android

I've been using the library to create bottom sheet modals for my react native app, but it's doesn't seem to work on Android, but on iOS it does. I used the same backdrop component and handle component suggested in the docs, and everything is contained is the provider, and SafeAreaView my package.json includes

"@gorhom/bottom-sheet": "^3.6.5", 
"react-native-reanimated": "^2.0.0",

and the code is structured like this:

     <BottomSheetModal ref={reference_settings}
                            index      = {1}
                            enableOverDrag={true}
                            onChange   = {(index) => { if(index === 0) { reference_settings.current.dismiss(); } }}
                            snapPoints = {[-1, '50%', '70%']}
                            backdropComponent={Backdrop}
                            handleComponent  ={(props) => (<Belt {...props} />)}
                            style            ={styles.sheet}
                        >
                        <BottomSheetView style={[styles.content]}>
                            <View style={{ width, height: '100%', overflow: 'hidden', backgroundColor: scheme === 'dark' ? '#000' : '#FFF', paddingHorizontal: 10 }}>
                              // the functions inside
                            </View>
                       </BottomSheetView>
</BottomSheetModal>

I used the right configuration for babel for react-native-reanimated including the plugin, but it shows up and then I can't drag to close.

like image 691
tech0int Avatar asked Sep 01 '26 02:09

tech0int


2 Answers

Don't forget to wrap your Root App Component like this in the index.js file

place the the import statement at the top of index.js

import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
import {AppRegistry} from 'react-native';

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));

more details

like image 80
Rahul.S Avatar answered Sep 02 '26 19:09

Rahul.S


I know it's a bit late to answer for you but I would like to add for others. Assuming you already installed react-native-gesture-handler you should also add some lines of code to your MainActivity.java.

enter image description here

like image 22
Erkan GÖRGÜLÜ Avatar answered Sep 02 '26 18:09

Erkan GÖRGÜLÜ



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!