useAnimatedGestureHandler not work on android emulator

[vnxz]

I follow documentation https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/events
here is code

import React from 'react'
import {Button,Image,ImageBackground, View, StyleSheet,Text } from 'react-native'
import { useNavigation,useRoute } from '@react-navigation/core'
import TinderCard from '../components/TinderCard'
import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  Easing,
  withSpring,
  useAnimatedGestureHandler
} from 'react-native-reanimated';

import { PanGestureHandler ,PanGestureHandlerGestureEvent} from "react-native-gesture-handler";



const HomeScreen = () => {

    const navigation = useNavigation();

    
const data =[
  {
    id: '1',
    name: 'Vadim Savin',
    image:
      'https://www.biography.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cg_face%2Cq_auto:good%2Cw_300/MTU5MDUzMTE0Mzk2MTI0OTUy/abraham-lincoln-1809---18652c-sixteenth-president-of-the-united-states-of-america-photo-by-stock-montagestock-montagegetty-images_promo.jpg',
    bio: 'I will be the semicolons to your code',
  },
  {
    id: '2',
    name: 'Elon Musk',
    image:
      'https://www.biography.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cg_face%2Cq_auto:good%2Cw_300/MTU5MDUzMTE0Mzk2MTI0OTUy/abraham-lincoln-1809---18652c-sixteenth-president-of-the-united-states-of-america-photo-by-stock-montagestock-montagegetty-images_promo.jpg',
    bio: 'A dude with a rocket is looking for a gal with fuel',
  },
  {
    id: '3',
    name: 'Zuck',
    image:
      'https://www.biography.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cg_face%2Cq_auto:good%2Cw_300/MTU5MDUzMTE0Mzk2MTI0OTUy/abraham-lincoln-1809---18652c-sixteenth-president-of-the-united-states-of-america-photo-by-stock-montagestock-montagegetty-images_promo.jpg',
    bio: 'No need to send me your nudes, I already saw them',
  },
  {
    id: '4',
    name: 'Jeffrey Bezos',
    image:
      'https://notjustdev-dummy.s3.us-east-2.amazonaws.com/avatars/jeff.jpeg',
    bio: 'CEO, entrepreneur born in 1964, Jeffrey, Jeffrey Bezos',
  },
  {
    id: '5',
    name: 'Vadim Savin',
    image:
      'https://notjustdev-dummy.s3.us-east-2.amazonaws.com/avatars/vadim1.JPG',
    bio: 'Hola',
  },
];

const pressed = useSharedValue(false);
const startingPosition = 100;
const x = useSharedValue(startingPosition);
const y = useSharedValue(startingPosition);

const eventHandler = useAnimatedGestureHandler({  
  onStart: (event, ctx) => {    pressed.value = true;  },
  onActive: (event, ctx) => {  
       x.value = startingPosition + event.translationX; 
       y.value = startingPosition + event.translationY;  
      },  
  onEnd: (event, ctx) => {   
     pressed.value = false;  
     x.value = withSpring(startingPosition);   
     y.value = withSpring(startingPosition);  },
    });

      const cardStyle = useAnimatedStyle(() => {  return {   
         backgroundColor: pressed.value ? '#FEEF86' : '#001972',   
         transform: [{ translateX: x.value }, { translateY: y.value }],  };});


    return (
        <View style={styles.pageContainer}>  
           <PanGestureHandler onGestureEvent={eventHandler}>
          <Animated.View style={[styles.animatedCard,cardStyle]}/>
               <TinderCard user={data[0]}/>
          </Animated.View> 
          </PanGestureHandler>
       
        </View>
      );
}

const styles = StyleSheet.create({
  square: {
    width: 100,
    height: 100,
    backgroundColor: 'rgba(0, 0, 256, 0.5)',
    borderRadius: 20,
  },
  pageContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  animatedCard: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  card:{
    width:'95%',
    height:'70%',
    borderRadius:10,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 5,
    },
    shadowOpacity: 0.36,
    shadowRadius: 6.68,

    elevation: 11,
  },
  cardInner: {
    padding: 10,
  },
  images:{
    height:'100%',
    width:'100%',
    borderRadius:10,
    overflow:'hidden',
    justifyContent:'flex-end'
  },
  name: {
    fontSize: 30,
    color: 'white',
    fontWeight: 'bold',
    
  },
  bio: {
    fontSize: 18,
    color: 'white',
    lineHeight: 25,
    
  },
});

export default HomeScreen

I cannot move card on android but move on web view.
what wrong in android with this useAnimatedGestureHandler.
I work with expo react native.
can someone help me

[vnxz]

why noone here .

[boodong-kwanee]

The situation is exactly same as mine.
onStartis working only.
This is really big issue...

[vnxz]

noone help here.

[zoolle]

@vnxz did you found any workaround? On android is not working even on real device

[fristyr]

Have you guys tried to wrap your app into GestureHandlerRootView ?

<GestureHandlerRootView style={{flex: 1}}>
        ...rest of your app
 </GestureHandlerRootView>

[vnxz]

i use expo, not bare react native. can I use this RootView?

[carlos3g]

i use expo, not bare react native. can I use this RootView?

Yes, you must use it

[zoolle]

For me is not working even with this and I am not using expo

[boodong-kwanee]

It's working perfectly! Thank you @fristyr

[carlos3g]

Wrap your app with GestureHandlerRootView (Put this in your App.js)

<GestureHandlerRootView style={{flex: 1}}>
...rest of your app
</GestureHandlerRootView>

and put collapsable={false} in the first View child of your PanGestureHandler

<View style={styles.pageContainer}>
  <PanGestureHandler onGestureEvent={eventHandler}>
    <Animated.View collapsable={false} style={[styles.animatedCard,cardStyle]}/>
      <TinderCard user={data[0]}/>
    </Animated.View>
  </PanGestureHandler>
</View>

[raphaeldcout]

it's working for me. Thanks!

[zoolle]

adding gestureHandlerRootHOC on my main component const CardContainer = gestureHandlerRootHOC(() => {...}) as per documentation

On Android RNGH does not work by default because modals are not located under React Native Root view in native hierarchy. To fix that, components need to be wrapped with gestureHandlerRootHOC (it's no-op on iOS and web).