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.

CodePudding user response：

I have the same problem.

import Home from "./screens/Home";
import {createStackNavigator} from "@react-navigation/stack";
import {NavigationContainer} from "@react-navigation/native";

export default function RootNavigation() {
    const Stack = createStackNavigator()
    
    return (
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen name="Home" component={Home} />
                </Stack.Navigator>
            </NavigationContainer>
    );
}

This small piece of code produice the same error.

CodePudding user response：

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.