How to install React Native Reanimated and Gesture Handler
Saturday, January 6, 2024
This article guides you through the process of initializing a React Native (with and without Expo) project using Reanimated and React Native Gesture Handler fully configured.
Don't worry, it will be easier than you might think.
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:
Ensure Expo is Installed:
Before we start, make sure you have Expo installed. If not, run the following command:
If everything is successful, you'll see the default App.tsx file with a basic component.
import{StatusBar}from'expo-status-bar';
importReactfrom'react';
import{StyleSheet,Text,View}from'react-native';
exportdefaultfunctionApp(){
return(
<Viewstyle={styles.container}>
<Text>Open up App.tsx to start working on your app!</Text>
<StatusBarstyle="auto"/>
</View>
);
}
const styles =StyleSheet.create({
container:{
flex:1,
backgroundColor:'#fff',
alignItems:'center',
justifyContent:'center',
},
});
Installing Reanimated
To install Reanimated, run:
npx expo install react-native-reanimated
However, simply installing the package is not enough. If you try to use Reanimated methods in the App component without configuring Babel, your app will crash. To fix this, add the Reanimated babel plugin in the babel.config.js file:
In conclusion, setting up a React Native project with Expo, Reanimated, and React Native Gesture Handler is a straightforward process. Ensure you follow the steps outlined above, and you'll be ready to explore the powerful capabilities these libraries offer in enhancing your React Native applications. Happy coding!
Join my newsletter
Every week I send out a newsletter sharing new things.