React-native: Hooks can only be called inside of the body of a function component-CodePudding

Hey i have a problem with my react-native app.

I have 3 file

App.tsx

 /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Button
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Helloworld from './components/Helloworld';
import Test from './components/Test';
const Stack = createNativeStackNavigator();

class App extends React.Component {
  render() {
    const isDarkMode = useColorScheme() === 'dark';

    const backgroundStyle = {
      backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    };
    return (    
    <NavigationContainer>      
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Helloworld} />
        <Stack.Screen name="Test" component={Test} />

      </Stack.Navigator>
    </NavigationContainer>

  );
}
};
export default App;

components/Test.tsx

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Button
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { StackScreenProps } from '@react-navigation/stack';

// eslint-disable-next-line  @typescript-eslint/no-explicit-any
const Test = ({ navigation }:any) => {

    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>BAGOU IS BEST</Text>
           <Button
            title="Go to Home... again"
            onPress={() => navigation.push('Home')}
          />
        </View>
      );
}

export default Test;

components/Helloworld.tsx

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Button
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { StackScreenProps } from '@react-navigation/stack';

const Helloworld = ({ navigation }:any) => {

        return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>BAGOU IS BEST</Text>
           <Button
            title="Go to Home... again"
            onPress={() => navigation.navigate.push('Home')}
          />
        </View>
      );
    }

export default Helloworld;

and i have this error when i run "yarn android"

BUNDLE  ./index.js
LOG  Running "appfirst" with {"rootTag":1}
ERROR  Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

This error is located at:
    in App (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in appfirst(RootComponent) (at renderApplication.js:60)
 ERROR  Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

This error is located at:
    in App (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in appfirst(RootComponent) (at renderApplication.js:60)

I don't understand why.

Can you explain me why?

Also what can i set instead of "{ navigation }:any" because i know is not any but i don t know the type of navigation

CodePudding user response：

The main problem are on the file App.tsx. You are using useColorScheme inside of a class. useColorScheme are a Hook, look: https://reactnative.dev/docs/usecolorscheme

Solution, follow one partner only using functions not class. The best practice is using functional components rather than Class component.

Look the difference here and why are better use functional component, https://reactjs.org/docs/components-and-props.html

Solution

Replace this:

class App extends React.Component {
  render() {
    const isDarkMode = useColorScheme() === 'dark';

    const backgroundStyle = {
      backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    };
    return (    
    <NavigationContainer>      
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Helloworld} />
        <Stack.Screen name="Test" component={Test} />

      </Stack.Navigator>
    </NavigationContainer>

  );
}
};

For this:

const  App = ()=>{

    const isDarkMode = useColorScheme() === 'dark';

    const backgroundStyle = {
      backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    };
    return (    
    <NavigationContainer>      
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Helloworld} />
        <Stack.Screen name="Test" component={Test} />

      </Stack.Navigator>
    </NavigationContainer>)

};