React Native Invalid hook call when using useRecoilValue

Question

I got an error Invalid hook call when I am using useRecoilValue. Am I wrong to use this hooks? then how can I solve this problem?

List.fn.js

import { Alert, AsyncStorage } from "react-native";
import { useRecoilValue } from "recoil";
import { listDataViewer } from "../State";

const ListFunction = (listName) => {
    const listID = Date.parse(new Date());
    const newListData = {
      "ID": listID,
      "Name": listName
    };
    const list = useRecoilValue(listDataViewer);
    if (JSON.stringify(list) == "null"){
      try {
        AsyncStorage.setItem('list', JSON.stringify([list]));
      } catch (error) {
        console.log(error);
      }
    } else {
        try {
          AsyncStorage.setItem('list', JSON.stringify([newListData, ...list]));
        } catch (error) {
          console.log(error);
        }
      }
    }
}

Answer 1

You can only use hooks inside a React component, but you are calling it inside a regular function. React cannot handle hooks outside of function components. For more on the rules of hooks, check out the official docs: https://reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions