React Native Bottom Sheet not reacting for touch input

Question

I would like to use React Native Bottom Sheet in my new expo app (expo init).

I've followed the instructions here. Check out the GitHub Repo here.

Here is what i did.

1. expo init (blank typescript project)

2. yarn add @gorhom/bottom-sheet@^4

3. yarn add react-native-reanimated react-native-gesture-handler

4. Replacing the content of the App.tsx with snippet from the docs.

5. Added react-native-reanimated/plugin to babel.

    module.exports = function (api) {
      api.cache(true);
      return {
        presets: ["babel-preset-expo"],
        plugins: ["react-native-reanimated/plugin"],
      };
    };
   

6. Started expo using expo start --clear

The Bottom Sheet is visible but is not reacting to touch input (not moving). It reacts to code changes (changing snap points etc.). I use the android emulator, but I've tried it on my phone too.

Here is a GitHub Repo showing the problem

Answer 1

Wrap your entire Layout in GestureHandlerRootView if your using Android.

Import:

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

Layout:

<GestureHandlerRootView style={{flex: 1}}>
// Your layout
</GestureHandlerRootView>

Similar problem has already been solved here