RNGestureHandlerModule.attach Gesture Handler got 3 arguments, expected 2

Question

I am building an app with React Native and have a login, Home, and member screen. when the user is admin I let him go to the home screen and when he is member I let him go to the member screen. and inside the Home screen, I have also the AddMember screen so I build stack navigation and drawer navigation inside stack navigation to navigate to these screens. The App.js Code:

import 'react-native-gesture-handler';
import React from 'react';

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createDrawerNavigator } from '@react-navigation/drawer';


import LoginScreen from './screens/LoginScreen';
import HomeScreen from './screens/HomeScreen';
import MembersScreen from './screens/MembersScreen';
import AddMember from './screens/AddMember';

const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();

function Root() {
return (
<Drawer.Navigator>
  {/* <Drawer.Screen name="Home" component={HomeScreen} /> */}
  <Drawer.Screen name="AddMember" component={AddMember} />
</Drawer.Navigator>
);
}

export default function App() {
return (
<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Login" component={LoginScreen} />
    <Stack.Screen
      name="Root"
      component={Root}
      options={{ headerShown: false }}
    />
    {/* <Stack.Screen name="Home" component={HomeScreen} /> */}
    <Stack.Screen name="Members" component={MembersScreen} />
   </Stack.Navigator>
   </NavigationContainer>
  );
  }

and the login screen

import { useNavigation } from '@react-navigation/core';
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';

import { 
auth, 
signInWithEmailAndPassword,
onAuthStateChanged,
db,
collection,
getDocs
} from '../firebase';

export default function LoginScreen() {
const [email , setEmail ] = useState('');
const [password , setPassword ] = useState('');

const navigation = useNavigation();

useEffect(() => {
    const unsibscribe = onAuthStateChanged(auth, (user) => {
        if(user) {
            handleCheckAdmin(user.email);
        }
    });

    return unsibscribe;

}, []);

const hanldeLogin = async () => {
    await signInWithEmailAndPassword(auth, email, password)
    .then(userCredentials => {
        const user = userCredentials.user;
    })
    .catch(error => alert(error.message));
}

const handleCheckAdmin = async (userEmail) => {
    try {
        const admins = collection(db, 'admin');
        const adminSnapshot = await getDocs(admins);
        const adminList = adminSnapshot.docs.map(doc => doc.get("adminEmail"));

        adminList.forEach(adEmail => {
        if (adEmail === userEmail) {
            navigation.replace('Root');

        }
        else {
            navigation.replace('Members');
        }
    });

    } catch (error) {
        console.log(error);
    }
}

return (
    <View 
        style={styles.container}
        behavior="padding"
    >
        <View style={styles.inputContainer}>
            <TextInput 
                placeholder="Email"
                value={email}
                onChangeText={ text => setEmail(text)}
                style={styles.input}
            />
            <TextInput 
                placeholder="Password"
                value={password}
                onChangeText={ text => setPassword(text)}
                style={styles.input}
                secureTextEntry
            />
        </View>
        <View style={styles.buttonContainer}>
            <TouchableOpacity
                onPress={hanldeLogin}
                style={styles.button}
            >
                <Text style={styles.buttonText}>Login</Text>
            </TouchableOpacity>
        </View>
    </View>
     )
     }

and my problem is when I run the app and login in Home screen, I get this error: RNGestureHandlerModule.attach Gesture Handler got 3 arguments, expected 2.

Answer 1

What version of 'react-native-gesture-handler' do you have installed? If it is v2.0 series, re-installing v1.0 series may solve the problem.

Answer 2

I start having this problem when downgrading expo SDK. I just solve it by running expo install react-native-gesture-handler. Doing so, expo will handle the best version for react-native-gesture-handler regarding your current SDK. Hope it helps!

Answer 3

I am using expo and installing recat-navigation 6 and drawer. So I have followed the docs, I am mentioning some key things here:

1. See react-navigation docs to install all things. Install gesture and reanimated using expo install.
2. Add plugins: ['react-native-reanimated/plugin'] into babel.config.js
3. At the end start project with expo start --clear

Answer 4

So I had this issue while trying to use @rainbow-me/animated-charts. Looks like the latest version of @rainbow-me/animated-charts is installing react-native-gesture-handler: ^1.7.0, however we need react-native-gesture-handler > 2 for react-native-reanimated v2. I was able to fix this by using yarn resolutions to force deps to use react-native-gesture-handler > 2.

I guess this isn't the best solution and I'm usually against using resolutions but I don't see any other option here. This might help someone else.

Happy hacking

Answer 5

I also got this error after updating my react-native-gesture-handler from ^1.9.0 to ^2.1.0 by running yarn add react-native-gesture-handler.

Running npx pod-install and re-running the app (npx react-native run-ios) fixed the issue.

Answer 6

if you're using expo, just type 'expo install react-native-gesture-handler' and 'import react-native-gesture-handler' or wrapped with 'GestureHandlerRootView' in app.tsx