Invalid Hook Call - React Native-CodePudding

So, I'm trying to use Hooks in React Native but I'm very new to React Native and I don't know how to properly use Hooks in Class and Function components. But in this project, I'm using the Class component but I'm getting an error of invalid hook call, so how do I turn this hook for the function component into the class component.

This is my code:

export default class Home extends Component {
  render() {
    let [fontsLoaded, error] = useFonts({
      Raleway_100Thin,
      Raleway_100Thin_Italic,
      Raleway_200ExtraLight,
      Raleway_200ExtraLight_Italic,
      Raleway_300Light,
      Raleway_300Light_Italic,
      Raleway_400Regular,
      Raleway_400Regular_Italic,
      Raleway_500Medium,
      Raleway_500Medium_Italic,
      Raleway_600SemiBold,
      Raleway_600SemiBold_Italic,
      Raleway_700Bold,
      Raleway_700Bold_Italic,
      Raleway_800ExtraBold,
      Raleway_800ExtraBold_Italic,
      Raleway_900Black,
      Raleway_900Black_Italic,
    });

    if (!fontsLoaded) {
      return <AppLoading />;
    }
    return (
      <View style={styles.container}>
        {/* TITLE */}
        <Text style={styles.title}>MALIGAYANG PAGDATING!</Text>

        <Text style={styles.subtitle}>RECENTLY VIEWED</Text>
      </View>
    );
  }
}

CodePudding user response：

You can't use hooks inside of a class component. See the Hooks FAQ on the React documentation.

CodePudding user response：

Use this way like

import React from 'react';
import { View, Text } from 'react-native';
import AppLoading from 'expo-app-loading';
import { useFonts, Inter_900Black } from '@expo-google-fonts/inter';

export default function App() {
  let [fontsLoaded] = useFonts({
    Inter_900Black,
  });

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

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontFamily: 'Inter_900Black', fontSize: 40 }}>Inter Black</Text>
    </View>
  );
}

Details Here also you can try this way too Here

CodePudding user response：

You cannot use hooks inside a class component. Hooks was designed for functional component only. You can modify your class based component to functional based like below and use it.

// Imports

function Home() {
const [fontsLoaded, error] = useFonts({
  Raleway_100Thin,
  Raleway_100Thin_Italic,
  Raleway_200ExtraLight,
  Raleway_200ExtraLight_Italic,
  Raleway_300Light,
  Raleway_300Light_Italic,
  Raleway_400Regular,
  Raleway_400Regular_Italic,
  Raleway_500Medium,
  Raleway_500Medium_Italic,
  Raleway_600SemiBold,
  Raleway_600SemiBold_Italic,
  Raleway_700Bold,
  Raleway_700Bold_Italic,
  Raleway_800ExtraBold,
  Raleway_800ExtraBold_Italic,
  Raleway_900Black,
  Raleway_900Black_Italic,
});

return fontsLoaded ? (
  <View style={styles.container}>
    {/* TITLE */}
    <Text style={styles.title}>MALIGAYANG PAGDATING!</Text>

    <Text style={styles.subtitle}>RECENTLY VIEWED</Text>
  </View>
) : (
  <AppLoading />
);
}

export default Home;