title: react native gesture handler is not working with Android emulator or Android device
body: <p>I am trying to practice using <code>react-native-gesture-handler</code>. Everything renders but I am unable to move a square around the screen. I have installed <code>react-native-reanimated</code>, the appropriate plugin, cleared the cache and installed <code>react-native-gesture-handler</code> using expo, but it does not work on my android phone or android emulator. Interestingly it does work on the web browser. The following is the code:</p>
  <pre class="lang-js prettyprint-override"><code>import {
      PanGestureHandler,
      PanGestureHandlerGestureEvent,
  } from &quot;react-native-gesture-handler&quot;;
  import { StatusBar } from &quot;expo-status-bar&quot;;
  import React from &quot;react&quot;;
  import { StyleSheet, Text, View } from &quot;react-native&quot;;
  import Animated, {
      useAnimatedGestureHandler,
      useAnimatedStyle,
      useSharedValue,
      withSpring,
  } from &quot;react-native-reanimated&quot;;
  
  const SIZE = 100.0;
  const CIRCLE_RADIUS = SIZE * 2;
  
  type ContextType = {
      translateX: number;
      translateY: number;
  };
  
  export default function App() {
      const translateX = useSharedValue(0);
      const translateY = useSharedValue(0);
  
      const panGestureEvent = useAnimatedGestureHandler&lt;
          PanGestureHandlerGestureEvent,
          ContextType
      &gt;({
          onStart: (event, context) =&gt; {
              context.translateX = translateX.value;
              context.translateY = translateY.value;
          },
          onActive: (event, context) =&gt; {
              translateX.value = event.translationX + context.translateX;
              translateY.value = event.translationY + context.translateY;
          },
          onEnd: () =&gt; {
              const distance = Math.sqrt(translateX.value ** 2 + translateY.value ** 2);
  
              if (distance &lt; CIRCLE_RADIUS + SIZE / 2) {
                  translateX.value = withSpring(0);
                  translateY.value = withSpring(0);
              }
          },
      });
  
      const rStyle = useAnimatedStyle(() =&gt; {
          return {
              transform: [
                  {
                      translateX: translateX.value,
                  },
                  {
                      translateY: translateY.value,
                  },
              ],
          };
      });
  
      return (
          &lt;View style={styles.container}&gt;
              &lt;View style={styles.circle}&gt;
                  &lt;PanGestureHandler onGestureEvent={panGestureEvent}&gt;
                      &lt;Animated.View style={[styles.square, rStyle]} /&gt;
                  &lt;/PanGestureHandler&gt;
              &lt;/View&gt;
          &lt;/View&gt;
      );
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          backgroundColor: &quot;#fff&quot;,
          alignItems: &quot;center&quot;,
          justifyContent: &quot;center&quot;,
      },
      square: {
          width: SIZE,
          height: SIZE,
          backgroundColor: &quot;rgba(0, 0, 256, 0.5)&quot;,
          borderRadius: 20,
      },
      circle: {
          width: CIRCLE_RADIUS * 2,
          height: CIRCLE_RADIUS * 2,
          alignItems: &quot;center&quot;,
          justifyContent: &quot;center&quot;,
          borderRadius: CIRCLE_RADIUS,
          borderWidth: 5,
          borderColor: &quot;rgba(0, 0, 256, 0.5)&quot;,
      },
  });
  
  </code></pre>
  <p>Why will it not work on my Android device or Android emulator but works on the web browser? Do I need to install something else? Thank you in advance!</p>
  <p>Solution:  if you're using React Native CLI you must wrap the Root Component with the GestureHandlerRootView component (from react-native-gesture-handler). For my situation the following update is needed:</p>
  <pre><code>&lt;GestureHandlerRootView style={styles.container}&gt;
             &lt;View style={styles.circle}&gt;
                  &lt;PanGestureHandler onGestureEvent={panGestureEvent}&gt;
                      &lt;Animated.View style={[styles.square, rStyle]} /&gt;
                  &lt;/PanGestureHandler&gt;
              &lt;/View&gt;
  &lt;GestureHandlerRootView /&gt;
  </code></pre>