How to use React Native Gesture Handler and React Navigation ( Side Menu Example )

#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 provides native-driven gesture management APIs for building best possible touch-based experiences in React Native.

What is React Navigation?

React Navigation 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

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

Instalation

  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 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:

 "postinstall" : "npx jetify"

2.Now run npm install or yarn

3.Code!

How Implement Side Menu

project structure


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

└── SideDrawer.js

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

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

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;