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.
