React Native get params in Custom Drawer

Question

I build a e-commerce app and i try to get params in a custom drawer from screen and i want to implement a remember Me function for the login page so i try to use AsyncStorage but i don't succeed to get the params from the login to my customdrawer logout button and i have a second issue when i logout from the homepage the useEffect don't work. i have to reload the app to get the storage credentials.

Here my code:

LoginScreen:

const LoginScreen = ({ navigation }) => {
  const [show, setShow] = useState(false);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [isSignUp, setIsSignUp] = useState(true);
  const [haveAccount, setHaveAccount] = useState(true);
  const [token, setToken] = useState("");
  const [rememberMe, setRememberMe] = useState(true);

  useEffect(() => {
    getCredentials();
  }, []);


  const handleRemember = () => {
    setRememberMe(!rememberMe);
    console.log(rememberMe);
  };

  const handleRegister = () => {
    setHaveAccount(!haveAccount);
    console.log("change");
  };

  const getCredentials = async () => {
    try {
      const value = await AsyncStorage.getItem("token");
      const username = await AsyncStorage.getItem("email");
      const storedPassword = await AsyncStorage.getItem("password");
      if (value !== null) {
        setToken(value);
        console.log("token recupéré:", value);
        if (username !== null) {
          setEmail(username);
          console.log(email);
        }
        if (storedPassword !== null) {
          setPassword(storedPassword);
          console.log(password);
        }
      } else {
        console.log("aucun token");
      }
    } catch (error) {
      console.log(error);
    }
  };

  const storeCredentials = async () => {
    try {
      let newToken = Math.random()
        .toString(36)
        .substring(2);
      setToken(newToken);
      console.log("newTok", newToken);
      await AsyncStorage.setItem("token", newToken);
      await AsyncStorage.setItem("email", email);
      await AsyncStorage.setItem("password", password);
      console.log("userToken", newToken);
      console.log("emailRegistered", email);
      console.log("passwordUser : ", password);
    } catch (error) {
      console.log(error);
    }
  };


  const handleSignIn = (e) => {
    e.preventDefault();
    signInWithEmailAndPassword(authentification, email, password)
      .then((userCredential) => {
        console.log("Signed In!");
        const user = userCredential.user;
        if (rememberMe === true) {
          storeCredentials();
        }
        setEmail("");
        setPassword("");
        navigation.navigate("HomePage", {
          storage: rememberMe,
        });
      })
      .catch((error) => {
        console.log(error);
        Alert.alert(error.message);
      });
  };

My Drawer:

const Drawer = createDrawerNavigator();

export const DrawerNavigator = ({ navigation, route }) => {
  //const { storage } = route.params.storage;

  return (
    <Drawer.Navigator
      drawerContent={(props) => <CustomDrawer {...props} />}
      screenOptions={{ headerShown: false }}
    >
      <Drawer.Screen
        name="BottomHome"
        component={BottomTabNav}
        options={{
          title: "Accueil",
          drawerIcon: () => (
            <AntDesign name="home" size={24} color={Colors.purple} />
          ),
          drawerActiveTintColor: "#5956E9",
        }}
      />

and my Custom Drawer:

const CustomDrawer = (props) => {
  useEffect(() => {
    console.log("test :", props);
  }, []);
  const navigation = useNavigation();
  const route = useRoute();

  const handleLogout = async () => {
    navigation.goBack("Login");
    //if (storageCred === false) {
    //await AsyncStorage.clear();
    //console.log("cache effacé");
    //}
  };

How i can get the params from my LoginScreen to my CustomDrawer LogoutButton?

React Native get params in Custom Drawer

0 Answers0