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:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- 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: - You might have mismatching versions of React and the renderer (such as React DOM)
- 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
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.
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 :