React Native Gesture Handler Not Working On Android - react-native

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.