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

just to chime in in I was bondering with same issue yesterday, Expo would compile App just fine it seemed to work on their website but after starting implementing all the code to Visual Code and trying to run project on Android Studio Emulator, no luck.