Invalid hook call. Hooks can only be called inside of the body of a function component. in react nat-CodePudding

actually, i tried to run the app yesterday and it worked successfully, right now i added some packages like react native form validator, and after adding it and trying to run the app it gets the error:

i tried to search for solutions and found out to update react native to the leatest version and did that. the same error still occurs. this is my code :

i tried to remove everything in the app.js and it still getting the same error.

this is my package.json

{
  "name": "OMR_APP",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.1.0",
    "app-icon": "^0.13.2",
    "install": "^0.13.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-native": "0.65.1",
    "react-native-camera": "^4.2.1",
    "react-native-dropdown-picker": "^5.1.28",
    "react-native-elements": "^3.4.2",
    "react-native-form-validator": "^0.1.3",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-ico-material-design": "^3.3.1",
    "react-native-reanimated": "^2.2.2",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.7.2",
    "react-native-simple-radio-button": "^2.7.4",
    "react-native-svg": "^12.1.1",
    "react-native-vector-icons": "^8.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/runtime": "^7.15.4",
    "@react-native-community/eslint-config": "^3.0.1",
    "babel-jest": "^27.2.0",
    "eslint": "^7.32.0",
    "jest": "^27.2.0",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-native-codegen": "^0.0.7",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

when i removed the register function with it's import, it works, this is my register file:

import React, {useState} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import AppBtn from '../../components/AppButton';
import CustomText from '../../components/CustomText';
import AppScreen from '../../components/AppScreen';
import TextField from '../../components/TextField';
import Colors from '../../config/Colors';
import {useValidation} from 'react-native-form-validator';

const [name, setName] = useState('Enter Name');
const [email, setEmail] = useState('Enter Mail');
const [newPassword, setNewPassword] = useState('Enter password');
const [confirmPassword, setConfirmPassword] = useState('Confirm password');
const {validate, isFieldInError, getErrorsInField, getErrorMessages} =
    useValidation({
        state: {name, email, number, newPassword, confirmPassword},
    });
const fieldError = ({field}) => {
    {
        isFieldInError(field) &&
            getErrorsInField(field).map(errorMessage => (
                <Text style={styles.text}>{errorMessage}</Text>
            ));
    }
};
const onPressButton = () => {
    validate({
        name: {minlength: 3, maxlength: 30, required: true},
        email: {email: true},
        newPassword: {minlength: 6, required: true},
        confirmPassword: {equalPassword: newPassword},
    });
};
function Register({navigation}) {
    return (
        <AppScreen style={{alignItems: 'center'}}>
            <CustomText
                text="Sign Up"
                style="bold head"
                otherStyle={{marginTop: 100}}
            />
            <View style={styles.hairline} />
            <TextField
                data="user name"
                other="name"
                onChangeText={setName}
                value={name}
            />
            {fieldError('name')}
            <TextField data="mail" onChangeText={setEmail} value={email} />
            {fieldError('email')}
            <TextField
                data="password"
                onChangeText={setNewPassword}
                value={newPassword}
            />
            {fieldError('newPassword')}
            <TextField
                data="confirm password"
                onChangeText={setConfirmPassword}
                value={confirmPassword}
            />
            {fieldError('confirmPassword')}
            <AppBtn text="Register" onPress={onPressButton} />
            <AppBtn
                text="Return back"
                style={{
                    backgroundColor: Colors.primary,
                    width: '30%',
                    marginTop: 100,
                }}
                onPress={() => navigation.navigate('PreAuth')}
            />
            <Text>{getErrorMessages()}</Text>
        </AppScreen>
    );
}
const styles = StyleSheet.create({
    container: {},
    hairline: {
        backgroundColor: Colors.secondary,
        marginTop: 10,
        height: 2,
        width: '50%',
        marginBottom: 70,
    },
    text: {
        margin: 10,
    },
});

export default Register;

CodePudding user response：

I see now, you declare your states outside the component. That is incorrect check the docs.

That would work

import React, {useState} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import AppBtn from '../../components/AppButton';
import CustomText from '../../components/CustomText';
import AppScreen from '../../components/AppScreen';
import TextField from '../../components/TextField';
import Colors from '../../config/Colors';
import {useValidation} from 'react-native-form-validator';


function Register({navigation}) {
    const [name, setName] = useState('Enter Name');
    const [email, setEmail] = useState('Enter Mail');
    const [newPassword, setNewPassword] = useState('Enter password');
    const [confirmPassword, setConfirmPassword] = useState('Confirm password');
    const {validate, isFieldInError, getErrorsInField, getErrorMessages} =
    useValidation({
            state: {name, email, number, newPassword, confirmPassword},
        });
    const fieldError = ({field}) => {
    {
        isFieldInError(field) &&
            getErrorsInField(field).map(errorMessage => (
                <Text style={styles.text}>{errorMessage}</Text>
            ));
    }
    };
    const onPressButton = () => {
        validate({
            name: {minlength: 3, maxlength: 30, required: true},
            email: {email: true},
            newPassword: {minlength: 6, required: true},
            confirmPassword: {equalPassword: newPassword},
        });
    };
    return (
        <AppScreen style={{alignItems: 'center'}}>
            <CustomText
                text="Sign Up"
                style="bold head"
                otherStyle={{marginTop: 100}}
            />
            <View style={styles.hairline} />
            <TextField
                data="user name"
                other="name"
                onChangeText={setName}
                value={name}
            />
            {fieldError('name')}
            <TextField data="mail" onChangeText={setEmail} value={email} />
            {fieldError('email')}
            <TextField
                data="password"
                onChangeText={setNewPassword}
                value={newPassword}
            />
            {fieldError('newPassword')}
            <TextField
                data="confirm password"
                onChangeText={setConfirmPassword}
                value={confirmPassword}
            />
            {fieldError('confirmPassword')}
            <AppBtn text="Register" onPress={onPressButton} />
            <AppBtn
                text="Return back"
                style={{
                    backgroundColor: Colors.primary,
                    width: '30%',
                    marginTop: 100,
                }}
                onPress={() => navigation.navigate('PreAuth')}
            />
            <Text>{getErrorMessages()}</Text>
        </AppScreen>
    );
}
const styles = StyleSheet.create({
    container: {},
    hairline: {
        backgroundColor: Colors.secondary,
        marginTop: 10,
        height: 2,
        width: '50%',
        marginBottom: 70,
    },
    text: {
        margin: 10,
    },
});

export default Register;

Also you can install eslint-plugin-react-hooks, to prevent that kind off error in future.