skip to Main Content

The 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
    de of the body of a function component. This could happen for one of the following reasons:
  4. You might have mismatching versions of React and the renderer (such as React DOM)
  5. You might be breaking the Rules of Hooks3. 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. ERROR TypeError: null is not an object (evaluating ‘dispatcher.useState’)
    ERROR Invariant Violation: "main" has not been registered. This can happen if:* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
  • A module failed to load due to an error and AppRegistry.registerComponent wasn’t called.

My code

**import * as React from 'react';
import {useState} from 'react';
import { Text, StyleSheet, 
KeyboardAvoidingView, ScrollView, Image,
TextInput, TouchableOpacity, View } from 'react-native';
import { CheckBox } from 'react-native-elements';
import {Ionicons} from '@expo/vector-icons'

const [input, setInput] = useState('');
const [hidePass, setHidePass] = useState(true);
export default class App extends React.Component {
 

    constructor(props) {
      super(props);
      this.state = {
          ischecked1: true
      };
  }
    onChangeCheck1() {
      this.setState({ ischecked1: !this.state.ischecked1 });
    }
    render() {
      
        return (
          
            <KeyboardAvoidingView
            style={styles.container}
             >
            <ScrollView>
              
                <Image
                    source={require('./assets/logo.png')}
                    style={styles.logo}
                    />
                <Text style={styles.helloText}> 
                Olá de novo !
                </Text>
               <Text style={styles.welcomeText}>
                  Bem-vindo(a) de volta,
                  sentimos sua falta! 
                </Text>
               
                <TextInput
                style={styles.inputArea}
                placeholder="Digite o e-mail"
                />
                <TextInput
                style={styles.inputArea}
                placeholder="Senha"
                value={input}
                onChangeText={ (texto) => setInput(texto)}
                secureTextEntry={hidePass}
                />
                <TouchableOpacity style={styles.eye} onPress={ () =>
                   setHidePass(!hidePass) }>
                  <Ionicons name={hidePass ? 'eye' : 'eye-off'}
                   color="#A0D800" size={25}/>
                </TouchableOpacity>
                <View style={styles.checkBoxStyle}>
                <CheckBox
                  left
                  size={18}
                  checkedColor='#A0D800'
                  value={this.state.ischecked1}
                  checked={this.state.ischecked1}
                  onPress={this.onChangeCheck1.bind(this)}
                  containerStyle={{ backgroundColor: "transparent",
                  borderColor: "transparent", marginRight: 0}}
                />
              <Text style={styles.Connected}> 
                Manter-se conectado
              </Text>
                <Text style={styles.forgotPassword}> 
                  Esqueci minha senha
                </Text>
                
                </View>
                
          
                <TouchableOpacity 
                    style={styles.botao}
                    /*onPress={ () => {this.clicou()} }*/
                >
                    <Text style={styles.botaoText}>Entrar</Text>
                </TouchableOpacity>
                
                
            </ScrollView>
            </KeyboardAvoidingView>
            
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 2,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff'
    },
    logo: {      
        marginTop:50,
        marginBottom: 80,
        width: 150,
        height: 40,
        
    },
    inputArea:{
       marginTop: 30,
       padding: 15,
       height: 60,
       width: 370,
       borderColor: '#808080',
       borderWidth: 1,
       backgroundColor: '#fff',
       fontSize: 16,
       fontWeight: 'bold',
       borderRadius: 15
    },
    botao: {
        width: 350,
        height: 60,
        backgroundColor: '#000000',
        marginTop: 50,
        marginLeft: 8,
        borderRadius: 15,
        alignItems: 'center',
        justifyContent: 'center'
    },
    botaoText: {
      fontSize: 15,
      fontWeight: 'bold',
      color: '#fff'
    },
    helloText: {
      fontSize: 40,
      fontWeight: 'bold',
      marginTop: 15,
      color: '#000000',
      marginEnd: 120,
      marginTop: 8
    },
    welcomeText: {
      fontSize: 16,
      marginTop: 10,
      marginEnd: 35,
      marginVertical: 10,
      color: '#808080',
    },
    forgotPassword: {
      textDecorationLine: 'underline',
      fontWeight: 'bold',
      marginTop: 15,
      marginBottom: 15,
      marginLeft: 30,
      fontSize: 12
    },
    Connected:{
      textDecorationLine: 'underline',
      fontWeight: 'bold',
      marginTop: 15,
      fontSize: 12,
      marginRight: 55,
      marginLeft: -5
    },
    checkBoxStyle:{
      marginTop: 15,
      flexDirection: 'row',
      marginStart: -10
   },
   eye:{
   alignSelf: 'flex-end',
   bottom: 42,
   right: 40
   }
})**

2

Answers


  1. The error is pretty straight forward.
    You have a class extending React.Component, and you define a state in the constructor, why would you need the useState hook ?
    You have to choose one or the other, function components using hooks, or class components. Functions starting by useXXX are hooks, it’s a naming convention.

    See here for more information about hooks: https://reactjs.org/docs/hooks-intro.html

    Taken from this page:

    Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

    Removing the 2 lines above your class declaration should fix the problem.

    Please people correct me if I’m wrong, but it seems to me that you can’t use both because of how React keeps track of states, needing a single reference to the value to watch.

    Hope I helped.

    Login or Signup to reply.
  2. You have to choose between class component or functional component.

    Here, you have a class component, but useState can be used only in a functional component.

    I have rewritten your component as functional, you can try to replace all you component by this :

    import * as React from 'react';
    import {useState} from 'react';
    import { Text, StyleSheet, 
    KeyboardAvoidingView, ScrollView, Image,
    TextInput, TouchableOpacity, View } from 'react-native';
    import { CheckBox } from 'react-native-elements';
    import {Ionicons} from '@expo/vector-icons'
    
    const App = () => {
    const [input, setInput] = useState('');
    const [hidePass, setHidePass] = useState(true);
    const [ischecked1, setIschecked1] = useState(true)
    
    const onChangeCheck1 = () => {
        setIschecked1(!ischecked1)
    }
      
    return (
        
        <KeyboardAvoidingView
            style={styles.container}
        >
            <ScrollView>
                <Image
                    source={require('./assets/logo.png')}
                    style={styles.logo}
                />
                <Text style={styles.helloText}> 
                    Olá de novo !
                </Text>
                <Text style={styles.welcomeText}>
                    Bem-vindo(a) de volta,
                    sentimos sua falta! 
                </Text>
                
                <TextInput
                    style={styles.inputArea}
                    placeholder="Digite o e-mail"
                />
                <TextInput
                    style={styles.inputArea}
                    placeholder="Senha"
                    value={input}
                    onChangeText={ (texto) => setInput(texto)}
                    secureTextEntry={hidePass}
                />
                <TouchableOpacity style={styles.eye} onPress={ () => setHidePass(!hidePass) }>
                    <Ionicons name={hidePass ? 'eye' : 'eye-off'}
                        color="#A0D800" size={25}
                    />
                </TouchableOpacity>
                <View style={styles.checkBoxStyle}>
                    <CheckBox
                        left
                        size={18}
                        checkedColor='#A0D800'
                        value={ischecked1}
                        checked={ischecked1}
                        containerStyle={{ backgroundColor: "transparent",
                        borderColor: "transparent", marginRight: 0}}
                    />
                    <Text style={styles.Connected}> 
                        Manter-se conectado
                    </Text>
                    <Text style={styles.forgotPassword}> 
                        Esqueci minha senha
                    </Text>
                </View>
                
                <TouchableOpacity 
                    style={styles.botao}
                    /*onPress={ () => {this.clicou()} }*/
                >
                    <Text style={styles.botaoText}>Entrar</Text>
                </TouchableOpacity>
            </ScrollView>
        </KeyboardAvoidingView>
    );
    
    }
    const styles = StyleSheet.create({
    container: {
        flex: 2,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff'
    },
    logo: {      
        marginTop:50,
        marginBottom: 80,
        width: 150,
        height: 40,
        
    },
    inputArea:{
       marginTop: 30,
       padding: 15,
       height: 60,
       width: 370,
       borderColor: '#808080',
       borderWidth: 1,
       backgroundColor: '#fff',
       fontSize: 16,
       fontWeight: 'bold',
       borderRadius: 15
    },
    botao: {
        width: 350,
        height: 60,
        backgroundColor: '#000000',
        marginTop: 50,
        marginLeft: 8,
        borderRadius: 15,
        alignItems: 'center',
        justifyContent: 'center'
    },
    botaoText: {
      fontSize: 15,
      fontWeight: 'bold',
      color: '#fff'
    },
    helloText: {
      fontSize: 40,
      fontWeight: 'bold',
      marginTop: 15,
      color: '#000000',
      marginEnd: 120,
      marginTop: 8
    },
    welcomeText: {
      fontSize: 16,
      marginTop: 10,
      marginEnd: 35,
      marginVertical: 10,
      color: '#808080',
    },
    forgotPassword: {
      textDecorationLine: 'underline',
      fontWeight: 'bold',
      marginTop: 15,
      marginBottom: 15,
      marginLeft: 30,
      fontSize: 12
    },
    Connected:{
      textDecorationLine: 'underline',
      fontWeight: 'bold',
      marginTop: 15,
      fontSize: 12,
      marginRight: 55,
      marginLeft: -5
    },
    checkBoxStyle:{
      marginTop: 15,
      flexDirection: 'row',
      marginStart: -10
    },
    eye:{
    alignSelf: 'flex-end',
    bottom: 42,
    right: 40
    }
    })
    
    export default App
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search