Using react hooks inside function returns invalid hook call

I'm trying to create choose language screen on first app launch in React Native.

So far I have managed to get the first screen working, but once I click on button to select language error throws with the following debugging message:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

I have used all the hooks inside component function body, but I assume it's because I have used useEffet hook and async function at once, therefore conflict has been created.


import React, {useEffect, useState} from "react";
import Login from "./login.js";
import Register from "./register.js";
import Dashboard from "./dashboard.js";
import { NavigationContainer, useNavigation } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { Text, View, Button } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";

const Stack = createStackNavigator();

const HAS_LAUNCHED = "hasLaunched";
const ENGLISH = "en";
const HEBREW = "he";

function setAppLaunched(en) {
  const navigation = useNavigation();
  AsyncStorage.setItem(HAS_LAUNCHED, "true");
  AsyncStorage.setItem(en ? ENGLISH : HEBREW, "true");

function CheckIfFirstLaunch() {

  const selectLaunched = (value) => {

  return (
        <Text>Choose Language</Text>
        <Button onPress={() => selectLaunched(false)} title="Hebrew"/>
        <Button onPress={() => selectLaunched(true)} title="English"/>

export default function App() {
  const [selected, setSelected] = useState(false);

  const verifyHasLaunched = async () => {
    try {
      const hasLaunched = await AsyncStorage.getItem(HAS_LAUNCHED);
      setSelected(hasLaunched != null);
    } catch (err) {

  useEffect(() => verifyHasLaunched);

  if (!selected){
    return <CheckIfFirstLaunch onSelect={() => setSelected(true)} />;

  return (
      <Stack.Navigator screenOptions={{headerShown: false}} initialRouteName="Login">
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Register" component={Register} />
        <Stack.Screen name="Dashboard" component={Dashboard} />

How can I avoid the conflict with useEffect hook and async function?

Read more here:

Content Attribution

This content was originally published by Yotam at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: