Add gestures

Install and configure libraries

The React Native Gesture Handler library provides a way to interact with the native platform's gesture response system. To animate between gesture states, we will use the Reanimated library.

To install them, stop the development server by pressing Ctrl + c and run the following command in the terminal:

Next, also install @babel/plugin-transform-export-namespace-from, which is required to configure the Reanimated library:

Then, add Reanimated's Babel plugin to babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      "@babel/plugin-transform-export-namespace-from",
      "react-native-reanimated/plugin",
    ],
  };
};

Now, start the development server again:

Tip: We are using -c option here because we modified the babel.config.js file.

To get gesture interactions to work in the app, we'll render <GestureHandlerRootView> from react-native-gesture-handler to wrap the top-level component of our app (also known as the "root component").

To accomplish this, replace the root level <View> component in the App.js with <GestureHandlerRootView>.

import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function App() {
  return (
    <GestureHandlerRootView style={styles.container}>
      {/* ...rest of the code remains */}
    </GestureHandlerRootView>
  )
}

Use animated components

Open the EmojiSticker.js file in the components directory. Inside it, import Animated from the react-native-reanimated library to use animated components.

import Animated from 'react-native-reanimated';

The Animated component looks at the style prop of the component. It also determines which values to animate and applies updates to create an animation.

Reanimated exports animated components such as <Animated.View>, <Animated.Text>, or <Animated.ScrollView>. We will apply animations to the <Animated.Image> component to make a double tap gesture work.

Replace the <Image> component with <Animated.Image>.

export default function EmojiSticker({ imageSize, stickerSource }) {
  return (
    <View style={{ top: -350 }}>
      <Animated.Image
        source={stickerSource}
        resizeMode="contain"
        style={{ width: imageSize, height: imageSize }}
      />
    </View>
  );
}

For a complete reference on the animated component API, see React Native Reanimated documentation.

Add a tap gesture

React Native Gesture Handler allows us to add behavior when it detects touch input, like a double tap event.

In the EmojiSticker.js file, import Gesture and GestureDetector from react-native-gesture-handler and the hooks below from react-native-reanimated. These hooks will animate the style on the <Animated.Image> component for the sticker when the tap gesture is recognized.

import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';

Inside the <EmojiSticker> component, create a reference called scaleImage using the useSharedValue() hook. It will take the value of imageSize as its initial value.

const scaleImage = useSharedValue(imageSize);

Creating a shared value using the useSharedValue() hook has many advantages. It helps to mutate a piece of data and allows running animations based on the current value. A shared value can be accessed and modified using the .value property. It will scale the initial value of scaleImage so that when a user double-taps the sticker, it scales to twice its original size. To do this, we will create an object and call it doubleTap. This object will use the Gesture.Tap() to animate the transition while scaling the sticker image. The numberOfTaps method determines how many taps are required.

Create the following object in the <EmojiSticker> component:

const doubleTap = Gesture.Tap()
  .numberOfTaps(2)
  .onStart(() => {
    if (scaleImage.value !== imageSize * 2) {
      scaleImage.value = scaleImage.value * 2;
    }
  });

To animate the transition, let's use a spring-based animation. This will make it feel alive because it's based on the real-world physics of a spring. We will use the withSpring() function provided by react-native-reanimated.

The useAnimatedStyle() hook from react-native-reanimated is used to create a style object that will be applied to the sticker image. It will update styles using the shared values when the animation happens. In this case, we are scaling the size of the image, which is done by manipulating the width and height properties. The initial values of these properties are set to imageSize.

Create an imageStyle variable and add it to the EmojiSticker component:

const imageStyle = useAnimatedStyle(() => {
  return {
    width: withSpring(scaleImage.value),
    height: withSpring(scaleImage.value),
  };
});

Next, wrap the <Animated.Image> component that displays the sticker on the screen with the <GestureDetector> component and modify the style prop on the Animated.Image to pass the imageStyle.

export default function EmojiSticker({ imageSize, stickerSource }) {
  // ...rest of the code remains same
  return (
    <View style={{ top: -350 }}>
      <GestureDetector gesture={doubleTap}>
        <Animated.Image
          source={stickerSource}
          resizeMode="contain"
          style={[imageStyle, { width: imageSize, height: imageSize }]}
        />
      </GestureDetector>
    </View>
  );
}

In the above snippet, the gesture prop takes the value of the doubleTap which triggers a gesture when a user double-taps the sticker image.

Let's take a look at our app on Android, iOS and the web:

For a complete reference on the tap gesture API, refer to the React Native Gesture Handler documentation.

Add a pan gesture

A pan gesture allows recognizing a dragging gesture and tracking its movement. We will use it to drag the sticker across the image.

In the EmojiSticker.js, replace the <View> component with the <Animated.View> component.

export default function EmojiSticker({ imageSize, stickerSource }) {
  // ...rest of the code remains same
  return (
    <Animated.View style={{ top: -350 }}>
      <GestureDetector gesture={doubleTap}>
        {/* ...rest of the code remains same */}
      </GestureDetector>
    </Animated.View>
  );
}

Now, create two new shared values: translateX and translateY.

export default function EmojiSticker({ imageSize, stickerSource }) {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  // ...rest of the code remains same
}

These translation values will move the sticker around the screen. Since the sticker moves along both axes, we need to track the X and Y values separately.

In the useSharedValue() hooks, we have set both translation variables to have an initial position of 0. This means that the position the sticker is initially placed is considered the starting point. This value sets the initial position of the sticker when the gesture starts.

In the previous step, we triggered the onStart() callback for the tap gesture chained to the Gesture.Tap() method. Similarly, for the pan gesture, we have to specify an onChange() callback which runs when the gesture is active and is moving.

Create a drag object to handle the pan gesture.

  const drag = Gesture.Pan()
    .onChange((event) => {
      translateX.value += event.changeX;
      translateY.value += event.changeY;
    });

The onChange() callback accepts event as a parameter. changeX and changeY properties hold the change in position since the last event. They are used to update the values stored in translateX and translateY.

Next, use the useAnimatedStyle() hook to return an array of transforms. For the <Animated.View> component, we need to set the transform property to the translateX and translateY values. This will change the sticker's position when the gesture is active.

const containerStyle = useAnimatedStyle(() => {
  return {
    transform: [
      {
        translateX: translateX.value,
      },
      {
        translateY: translateY.value,
      },
    ],
  };
});

Then add the containerStyle from the above snippet on the <Animated.View> component to apply the transform styles. Also, update the <EmojiSticker> component so that the <GestureDetector> component becomes the top-level component.

export default function EmojiSticker({ imageSize, stickerSource }) {
  // rest of the code

  return (
    <GestureDetector gesture={drag}>
      <Animated.View style={[containerStyle, { top: -350 }]}>
        <GestureDetector gesture={doubleTap}>
          <Animated.Image
            source={stickerSource}
            resizeMode="contain"
            style={[imageStyle, { width: imageSize, height: imageSize }]}
          />
        </GestureDetector>
      </Animated.View>
    </GestureDetector>
  );
}

Let's take a look at our app on Android, iOS and the web: