React Native Gesture Handler Not Working On Android

Question

I am using react-native-gesture-handler and react-native-reanimated package to animate a View in react native. The scale of the view should increase on tap and the backgroundColor should change to red on tap. Everything works fine when I launch the app on the web but on android I get no feedback. I used snack to text my code on my device and that worked on my android device but when I run the project with expo-start on my laptop the gesture handling doesn't work at all. Any help will be much appreciated 🙏🙏🙏🙏. The project is expo managed.

I am using react-native-reanimated version "~2.3.1", react-native-gesture-handler version "2.1.0";

//MY APP.JS FILE

import "react-native-gesture-handler";
import { StyleSheet, Text, View } from "react-native";
import Animated,{useAnimatedGestureHandler, useAnimatedStyle, useSharedValue} from "react-native-reanimated";
import {  TapGestureHandler } from "react-native-gesture-handler";

export default function App() {

  const pressed= useSharedValue(false);

  const gestureEvent= useAnimatedGestureHandler({
    onStart:()=>{
     
     pressed.value=true
    },
    onActive:(e)=>{
      pressed.value=true;
    },
    onEnd:()=>{
      pressed.value=false;
    }
  });

  const animationStyle=useAnimatedStyle(()=>{
    return {
      transform:[{scale:pressed.value?1.3:1}],
      backgroundColor:pressed.value?"red":"yellow"
    }
  })



  return (
    <View style={styles.container}>
      <TapGestureHandler onGestureEvent={gestureEvent}  >
        <Animated.View style={[styles.view,animationStyle]}></Animated.View>
      </TapGestureHandler>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  view:{
    backgroundColor:"blue",
    width:100,
    height:100,
    borderRadius:20,
  }
});

// BABEL CONFIG.JS

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

The scale of the view should increase on tap and the backgroundColor should change to red on tap. Everything works fine when I launch the app on the web but on android I get no feedback. I used snack to text my code on my device and that worked on my android device but when I run the project with expo-start on my laptop the gesture handling doesn't work at all.

Answer 1

Is <GestureHandlerRootView> somewhere in your hierarchy? I've noticed this is not required in iOS, but is in Android. See their Docs.

Answer 2

Wrap your entire app with

<GestureHandlerRootView style={{flex: 1}}>

</GestureHandlerRootView>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

The Flex: 1 is important, without it your app won't be able to detect gestures on android.