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;
Top comments (1)
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.