DEV Community

Cover image for How to use React Native Gesture Handler and React Navigation ( Side Menu Example )
MKilmer
MKilmer

Posted on • Edited on

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

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
  }

Enter fullscreen mode Exit fullscreen mode

Instalation

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

Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

└── 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


Enter fullscreen mode Exit fullscreen mode

└── 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

Enter fullscreen mode Exit fullscreen mode

├── 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;


Enter fullscreen mode Exit fullscreen mode

Final Result 😆 😎

Alt Text

Top comments (1)

Collapse
 
jeffdico profile image
Jeffrey

Hi MKilmer,the solution above did not work for me until I applied some Java codes in the MainActivity.java file. here is the example to view from.

software-mansion.github.io/react-n...

Mine was an android application.