How to use React Native Gesture Handler and React Navigation ( Side Menu Example )
Tags: reactnative, react, javascript, mobile
Published: 2019-09-15 17:16:11

---
title: How to use React Native Gesture Handler and React Navigation ( Side Menu Example )
published: true
description: Tutorial to how use React Native Gesture Handler
cover_image : https://thepracticaldev.s3.amazonaws.com/i/p4jpv1forjeau7rs6oad.png
tags: #reactnative #react #javascript #mobile 
---

So I decided to write this post because I had some problems implementing Gesture Handler on React Native and some friends had it too.

**``But isn't it just looking at the React Native Gesture Handler documentation and implementing the code? So, React-Native-Gesture-Handler supports autolinking on Android but the problem is that it is not yet compatible with AndroidX.``**

**What is Gesture Handler?**

Declarative API exposing platform **``native touch``** and **``gesture``** system to React Native. [React Native Gesture Handler](https://github.com/kmagiera/react-native-gesture-handler) provides native-driven gesture management APIs for building best possible touch-based experiences in React Native.

**What is React Navigation?**

[React Navigation](https://reactnavigation.org/en/) is born from the React Native community's need for an extensible yet easy-to-use navigation solution written entirely in JavaScript (so you can read and understand all of the source), on top of powerful native primitives.

**``Versions of dependencies``**

```json
 "dependencies": {
    "react-native": "0.60.5",
    "react-native-gesture-handler": "1.3.0",
    "react-navigation": "3.11.1",
    "jetifier": "^1.6.4
  }

```
**``Instalation``**

```bash
  yarn add react-native-gesture-handler@1.3.0
  yarn add react-navigation@3.11.1
  yarn add jetifier

```

Now just follow the React Navigation documentation steps to deploy on Android and IOS.

So how to solve the problem with Gesture Handler? [Jetifier](https://github.com/mikehardy/jetifier) is the solution. It helps make the library compatible with your AndroidX project by converting all dependency packages at compile time.

**Steps to Resolution**

1.Open the project package.json file and add this line to the scripts section: ```json
 "postinstall" : "npx jetify"
```
2.Now run **``npm install``** or **``yarn``**

3.Code!

**How Implement Side Menu**

project structure
```bash

├── src                    # source folder
└── screens
  └── SideDrawer           # screen components
  └── HomeScreen             
├── App                    # createAppContainer


```

 └── SideDrawer.js

```javascript
import React, { Component } from 'react';
import {
    View,
    Text,
    Button,
    StyleSheet
} from 'react-native';


class SideDrawer extends Component{
    render(){
        return(
            <View style={styles.main}>
                <Text>SideMenu</Text>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    main : {
        flex : 1,
        alignItems:'center',
        justifyContent:'center',
        fontWeight:'bold'
    }
})
export default SideDrawer


```

└── HomeScreen.js

```javascript
import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    Button
} from 'react-native';

class HomeScreen extends Component{
    render(){
        return(
            <View style={styles.main}>
               <Button
                title={"Open Side Menu"}
                onPress = {()=> this.props.navigation.openDrawer()}
               />
            </View>
        )
    }
}
const styles = StyleSheet.create({
    main : {
        flex : 1,
        alignItems:'center',
        justifyContent:'center'
    }
})
export default HomeScreen

```
├── App.js

```javascript 
import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Button,
  Text
} from 'react-native';
import { createAppContainer, createDrawerNavigator } from 'react-navigation';
import HomeScreen from './src/screens/HomeScreen';
import SideDrawer from  './src/screens/SideDrawer';

const App = createAppContainer(
  createDrawerNavigator({
    Home : HomeScreen,
    
  },{
    contentComponent : SideDrawer
  })
)


  
export default App;


``` 

**Final Result** :satisfied:  :sunglasses:               
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ayyu1m5cslhip9zqrb10.gif)