How to install React Native Reanimated and Gesture Handler

Dealing with React Native is never easy. Fortunately, this article is related to how to initialize a React Native (with Expo) project with Reanimated and React Native Gesture Handler fully configured.

Don't worry, it will be easier than you might think.

So, since we're going to use Expo, make sure to have it already installed. If you don't have the Expo CLI installed, just run the following command:

npm install --global expo-cli

We can now start to get our hands dirty by running:

expo init YOUR-PROJECT-NAME

Let's select a blank project (with TypeScript of course):

? Choose a template:
    ----- Managed workflow -----
    blank               a minimal app as clean as an empty canvas
>>> blank (TypeScript)  same as blank but with TypeScript configuration
    tabs (TypeScript)   several example screens and tabs using react-navigation and TypeScript
    ----- Bare workflow -----
    minimal             bare and minimal, just the essentials to get you started

If everything is good, you must be able to see in the App.tsx the following App component:

App.tsx

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Let's install Reanimated

To install Reanimated we can simply run:

expo install react-native-reanimated

To this point, the package is installed, but it's still not available in our code. If you try, for instance, to call some Reanimated methods (useSharedValue, useAnimatedStyle, ...) from the App component, the app will crash with the following error:

Uncaught Error:

Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

Actually, the error is pretty clear. We need to add the Reanimated's babel plugin in the babel.config.js file.

babel.config.js

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

That's it. At this point you may wonder how to use Reanimated 2? I've built a series on top of this topic. Click here if you're interested.

Installing React Native Gesture Handler

To install react-native-gesture-handler, the process is quite similar. First of all, let's run:

expo install react-native-gesture-handler

In order to complete the installation process, we need to ensure that all the components are wrapped with the GestureHandlerRootView component. That could be an issue on the long term especially on Android when dealing with gestures.

App.tsx

...
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <View style={styles.container}>
        <Text>Open up App.tsx to start working on your app!</Text>
        <StatusBar style="auto" />
      </View>
    </GestureHandlerRootView>
  );
}

...

I'm sure you're interested in moving around things in React Native with this outstanding package. The good news? I've already built another amazing series on this subject called "What about Gestures". Click here to learn more!

What if I want to use React Native CLI?

For the React Native CLI, the process is almost identical. You simply need to replace a few commands.

Project Setup

Instead of running expo init, run:

npx react-native init AwesomeTSProject --template react-native-template-typescript

Packages installation

Simply replace:

expo install react-native-reanimated react-native-gesture-handler

with yarn:

yarn add react-native-reanimated react-native-gesture-handler

or if you're using npm:

npm install react-native-reanimated react-native-gesture-handler