I have a function that I declared on a file, like this
export default function doSomething (param1, param2, param3) {
*Do something here*
}
And then I want to use that function whenever I press a button on a screen I have declared in another file:
import doSomething from '../../doSomething';
export default function Screen(props) {
return (
<Container>
<SafeAreaProvider>
<Button onPress={() => doSomething(1, 2, 3)} />
</SafeAreaProvider>
</Container>
);
}
However, any time I press the button, it gives me a Invalid hook call. Hooks can only be called inside of the body of a function component error. I'm fairly new to custom hooks/external functions, so how can I resolve is?
If doSomething is a hook and not a plain JS function, then you can not just import it and call it as you would do with plain functions.
The following code fixes the issue.
export default function useDoSomething() {
...
const doSomething = React.useCallback((parameter1, parameter2, parameter3) => {}, [])
return {
doSomething,
}
}
Then use the hook as follows.
const { doSomething } = useDoSomething()
return (
<Container>
<SafeAreaProvider>
<Button onPress={() => doSomething(1, 2, 3)} />
</SafeAreaProvider>
</Container>
);