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

Question

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.

Carapace

Answer 1

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.

Ministerial

This gives Build Failed: MainActivity.java uses or overrides a deprecated API for me – Choir

Answer 2

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

Curley