Function called from custom hook in React Native returns is not a function

songexile9 0
Viewed 17

Hello I am getting a error with my code in React Native. I am trying to make a custom hook which retrieves the display name from Firebase but currently React Native is saying "_readDb.useDisplayName is not a function"

Custom hook (readDb)


import { db } from "../model/config"; // import the db config
import { get, ref, set, child } from "firebase/database";
import useAuth from "./useAuth";
import { React, useState, useEffect } from "react";
import { Text, View } from "react-native";

function useDisplayName() {
  const [displayName, setDisplayName] = useState("");
  const { user } = useAuth();
  const userId = user.uid;

  useEffect(() => {
    get(child(ref(db), "users/" + userId)).then((snapshot) => {
      if (snapshot.exists()) {
        setDisplayName(snapshot.val().username);
      } else {
        console.log("No data available");
      }
    });
  }, []);
  return displayName;
}

export default useDisplayName;

HomeScreen

import { Button, Text, View } from "react-native";
import { getAuth } from "firebase/auth";
import useAuth from "../../hooks/useAuth";
import { writeUserName } from "../../hooks/useWriteDb";
import { useDisplayName } from "../../hooks/readDb";

export default function HomeScreen(props) {
  const { signOut, user } = useAuth();
  const name = useDisplayName();

  return (
    <View>
      <Text>{name}</Text>
    </View>
  );
}
react-native reactjs
1 Answers

You're destructuring the import:

import { useDisplayName } from "../../hooks/readDb";

So you have to export as an object:

export { useDisplayName };

Or, export as written in the question, and import without destructuring:

import useDisplayName from "../../hooks/readDb";

userVqYI0
Related