javascript - Llamada de gancho no válida React Native

Sigo recibiendo este error en mi pantalla de registro. Realmente le agradecería si pudiera decirme cuál es el problema. ¡Gracias!

Error: Llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría ocurrir por una de las siguientes razones:

Es posible que tengas versiones no coincidentes de React y el renderizador (como React DOM) Quizás estés rompiendo las reglas de los ganchos Es posible que tengas más de una copia de React en la misma aplicación Consulte https: //fb me/react-invalid-hook-call para obtener sugerencias sobre cómo depurar y solucionar este problema.

import { ImageBackground, StyleSheet, StatusBar, Dimensions, View, Image } from 'react-native';
import { Block, Button, Text, theme } from 'galio-framework';
import * as Yup from 'yup';
import SafeView from '../components/SafeView';
import Form from '../components/Forms/Form';
import FormField from '../components/Forms/FormField';
import FormButton from '../components/Forms/FormButton';
import IconButton from '../components/IconButton';
import FormErrorMessage from '../components/Forms/FormErrorMessage';
import { registerWithEmail } from '../config/firebase';

const { height, width } = Dimensions.get('screen');
const validationSchema = Yup.object().shape({
  name: Yup.string()
    .required()
    .label('Name'),
  email: Yup.string()
    .required('Please enter a valid email')
    .email()
    .label('Email'),
  password: Yup.string()
    .required()
    .min(6, 'Password must have at least 6 characters')
    .label('Password'),
  confirmPassword: Yup.string()
    .oneOf([Yup.ref('password')], 'Confirm Password must match Password')
    .required('Confirm Password is required')
});
const [passwordVisibility, setPasswordVisibility] = useState(true);
const [rightIcon, setRightIcon] = useState('eye');
const [confirmPasswordIcon, setConfirmPasswordIcon] = useState('eye');
const [confirmPasswordVisibility, setConfirmPasswordVisibility] = useState(true);
const [registerError, setRegisterError] = useState('');

function handlePasswordVisibility() {
  if (rightIcon === 'eye') {
    setRightIcon('eye-off');
    setPasswordVisibility(!passwordVisibility);
  } else if (rightIcon === 'eye-off') {
    setRightIcon('eye');
    setPasswordVisibility(!passwordVisibility);
  }
}

function handleConfirmPasswordVisibility() {
  if (confirmPasswordIcon === 'eye') {
    setConfirmPasswordIcon('eye-off');
    setConfirmPasswordVisibility(!confirmPasswordVisibility);
  } else if (confirmPasswordIcon === 'eye-off') {
    setConfirmPasswordIcon('eye');
    setConfirmPasswordVisibility(!confirmPasswordVisibility);
  }
}

async function handleOnSignUp(values, actions) {
  const { email, password } = values;
  try {
    await registerWithEmail(email, password);
  } catch (error) {
    setRegisterError(error.message);
  }
}

export default class Register extends React.Component {
  render() {
    const { navigation } = this.props;
    return (
      <SafeView style={styles.container}>
        <Form
          initialValues={{
            name: '',
            email: '',
            password: '',
            confirmPassword: ''
          }}
          validationSchema={validationSchema}
          onSubmit={values => handleOnSignUp(values)}
        >
          <FormField
            name="name"
            leftIcon="account"
            placeholder="Enter name"
            autoFocus={true}
          />
          <FormField
            name="email"
            leftIcon="email"
            placeholder="Enter email"
            autoCapitalize="none"
            keyboardType="email-address"
            textContentType="emailAddress"
          />
          <FormField
            name="password"
            leftIcon="lock"
            placeholder="Enter password"
            autoCapitalize="none"
            autoCorrect={false}
            secureTextEntry={passwordVisibility}
            textContentType="password"
            rightIcon={rightIcon}
            handlePasswordVisibility={handlePasswordVisibility}
          />
          <FormField
            name="confirmPassword"
            leftIcon="lock"
            placeholder="Confirm password"
            autoCapitalize="none"
            autoCorrect={false}
            secureTextEntry={confirmPasswordVisibility}
            textContentType="password"
            rightIcon={confirmPasswordIcon}
            handlePasswordVisibility={handleConfirmPasswordVisibility}
          />
          <FormButton title={'Register'} />
          {<FormErrorMessage error={registerError} visible={true} />}
        </Form>
        <IconButton
          style={styles.backButton}
          iconName="keyboard-backspace"
          color={Colors.white}
          size={30}
          onPress={() => navigation.goBack()}
        />
      </SafeView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 15,
  },
  backButton: {
    justifyContent: 'center',
    alignItems: 'center',
    marginVertical: 10
  }
});```

------------------------------------

Como el error ssugiere que no estás usando los ganchos correctamente. Los ganchos deben estar dentro de un componente funcional. Actualmente, los estás utilizando sin ningún componente. El único componente que tiene aquí es un componente de clase, por lo que si desea utilizar ganchos, primero debe convertirlo en un componente funcional, algo como esto:

import React, { useState } from 'react';

const Register = (props) => {

  const [passwordVisibility, setPasswordVisibility] = useState(true);
  const [rightIcon, setRightIcon] = useState('eye');
  const [confirmPasswordIcon, setConfirmPasswordIcon] = useState('eye');
  const [confirmPasswordVisibility, setConfirmPasswordVisibility] = useState(true);
  const [registerError, setRegisterError] = useState('');

  // other component logic code here

  return (
    // your component rendering code here
  );
}

export default Register;

0

------------------------------------

Estás mezclando componentes funcionales y basados ​​en clases. Los React Hooks solo se pueden usar dentro de componentes funcionales. Convierta su componente Register en un componente funcional y mueva todas las llamadas useState dentro del componente.