Expo Install React Native Gesture - Shell/Bash

If you are a React Native developer, you might have heard about react-native-gesture-handler, a library for handling gestures in React Native. Expo is a popular tool for developing React Native applications and simplifies the development process by providing a set of pre-configured native modules. In this guide, we will see how to install and use react-native-gesture-handler in Expo.

Prerequisites

• Node.js installed on your machine
• Expo CLI installed on your machine

Steps

1. First, create a new Expo project by running the following command in your terminal:

   expo init my-new-project
   

2. Navigate to your project directory and install react-native-gesture-handler by running the following command:

   expo install react-native-gesture-handler
   

3. Next, we need to link the native modules by running the following command:

   expo run:android
   

   or

   expo run:ios
   

   This command will launch your project in the emulator. Press CTRL-C to stop the emulator once it loads up.

4. Finally, import the Gesture Handler library in your project and set up your gesture recognizers. Here's an example of how to add a PanGestureHandler:

   import React from 'react';
   import { StyleSheet, View } from 'react-native';
   import { PanGestureHandler } from 'react-native-gesture-handler';
   
   export default function App() {
     function onGestureEvent(event) {
       console.log(event.nativeEvent.translationX, event.nativeEvent.translationY);
     }
   
     return (
       <View style={styles.container}>
         <PanGestureHandler onGestureEvent={onGestureEvent}>
           <View style={styles.box} />
         </PanGestureHandler>
       </View>
     );
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
     },
     box: {
       width: 100,
       height: 100,
       backgroundColor: 'blue',
     },
   });
   

And that's it! You have successfully installed and used react-native-gesture-handler in your Expo project.

Conclusion

In this guide, we saw how to use react-native-gesture-handler in an Expo project. We first created a new Expo project and then installed the gesture handler library using the expo install command. We then linked the native modules by running the project in the emulator and finally added a PanGestureHandler to our project.