React Native – Passing callback to custom hook is undefined

I am trying to pass a callback to my custom hook:

export default function useScreenshotDetection(onScreenshot) {
   useEffect(() => {
      ...
      onScreenshot();
      ...
   }, []);
}

But for some reason, it is not detected, it is undefined. Here is how I am passing it:

export default function ChatScreen({ ... }) { 
   const { colors } = useTheme();

   const bottomSheet = useMessageBottomSheet();

   useScreenshotDetection(handleOnScreenshot); // <-----

   const [messages, setMessages] = useState([]);

   ...

   const handleOnScreenshot = () => { // <-----
      ...
   }

   return <></>
}

I think that this is because the method hasn’t been created yet in the first render when invoking the hook, and that I should move it under the method. But… is there any other way? I mean, I like, and I think it makes the code very legible, having all the hooks at the top of my component.

Any ideas?

If you really want, you could change const handleOnScreenshot = () => {} to function handleOnScreenshot() {}. The difference is that the latter is both hoisted and initialised at the top of the scope.