React has detected a change in the order of Hooks called-CodePudding

I have just started learning react native and I'm trying to create a login screen that uses the NativeBase ActionSheet component, but I keep getting an error that states React has detected a change in the order of Hooks called

I believe this is due to the fontsLoaded boolean being loaded in async but I'm not exactly sure. What would be the proper way to handle async methods and make sure the screen is loaded correctly?

Here is my code:

function LoginScreen() {
let [fontsLoaded] = useFonts({
    HammersmithOne_400Regular,
})

if (!fontsLoaded) {
    return <AppLoading />;
}

const {
    isOpen,
    onOpen,
    onClose
  } = useDisclose();

return (
    <View style={styles.container}>
        <Text style={styles.logo}>Logo</Text>

        <View style={styles.signInContainer}>
            <Button onPress={onOpen} title="Log in">
                Log in
            </Button>
            <Actionsheet isOpen={isOpen} onClose={onClose}>
                <Actionsheet.Content>
                    <Box w="100%" h={60} px={4} justifyContent="center">
                        <Text>
                            Albums
                        </Text>
                    </Box>
                </Actionsheet.Content>
            </Actionsheet>
        </View>
    </View>
);

}

CodePudding user response：

Well you are violating hook-rule, because you are calling useDisclose conditionally, after if (!fontsLoaded) { return ; }

Hooks must be called on the top level of your components.

Here you can find more about all hook rules in react docs: https://reactjs.org/docs/hooks-rules.html

In order to fix your issue you will have to call useDisclose before if statement.

CodePudding user response：

Move useDisclose hook to the top and if statement below. Here is the reason why

   let [fontsLoaded] = useFonts({
    HammersmithOne_400Regular,
})

const {
    isOpen,
    onOpen,
    onClose
  } = useDisclose();

if (!fontsLoaded) {
    return <AppLoading />;
}