About this.state function in React Native App - react-native

Question

Hello this is my code. When I try to fill the text box then the error come i.e. ('this.setState is not a function.(In this.setState({emal:email)} this.setState is underfined').
Here is my code:
import React from 'react';
import {
Image,
Platform,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
TextInput,
TouchableHighlight,
Alert,
} from 'react-native';
export default function LoginScreen() {
onClickListener = (viewId) => {
Alert.alert("Alert", "You can't "+viewId);
}
return (
https://png.icons8.com/message/ultraviolet/50/3498db'}}/>
this.setState({email})}/>
<View style={styles.inputContainer}>
<Image style={styles.inputIcon} source={{uri: 'https://png.icons8.com/key-2/ultraviolet/50/3498db'}}/>
<TextInput style={styles.inputs}
placeholder="Password"
secureTextEntry={true}
underlineColorAndroid='transparent'
onChangeText={(password) => this.setState({password})}/>
</View>
<TouchableHighlight style={[styles.buttonContainer, styles.loginButton]} onPress={() => this.onClickListener('login')}>
<Text style={styles.loginText}>Login</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.buttonContainer} onPress={() => this.onClickListener('restore_password')}>
<Text>Forgot your password?</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.buttonContainer} onPress={() => this.onClickListener('register')}>
<Text>Register</Text>
</TouchableHighlight>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#DCDCDC',
},
inputContainer: {
borderBottomColor: '#F5FCFF',
backgroundColor: '#FFFFFF',
borderRadius:30,
borderBottomWidth: 1,
width:250,
height:45,
marginBottom:20,
flexDirection: 'row',
alignItems:'center'
},
inputs:{
height:45,
marginLeft:16,
borderBottomColor: '#FFFFFF',
flex:1,
},
inputIcon:{
width:30,
height:30,
marginLeft:15,
justifyContent: 'center'
},
buttonContainer: {
height:45,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginBottom:20,
width:250,
borderRadius:30,
},
loginButton: {
backgroundColor: "#00b5ec",
},
loginText: {
color: 'white',
}
});

Answer 1

That is the problem
export default function LoginScreen()
Change it to the
export default class LoginScreen extends Component

Answer 2

For using state, it must a stateful component rather than stateless component, So you have to change your functional component into Class.
change
export default function LoginScreen()
to
export default class LoginScreen extends React.Component

Answer 3

In react-native setState function has syntax
this.setState({someField:someValue})
you are using wrong syntax there, you have to give state name and value
this.setState({email})
this.setState({password})
these line should be like -
this.setState({ email: value })
this.setState({password: value })

Answer 4

if you want to use functional components you can use the UseState hook like this
by importing and initializing the state as shown below:
import React,{useState} from 'react';
export default function LoginScreen() {
const [email,setEmail]=useState(initialValues);
//setEmail function can be used for changing the state
}
use can see the usage of the useState here [https://reactjs.org/docs/hooks-state.html]
hope this helps for you

Answer 5

if you want to use functional components use react hooks,
otherwise use class component as below.
import React, { Component } from 'react';
import { Image, StyleSheet, Text, View, TextInput, TouchableHighlight, Alert } from 'react-native';
export default class LoginScreen extends Component {
onClickListener = viewId => {
Alert.alert('Alert', "You can't " + viewId);
};
render() {
return (
<View>
<View style={styles.inputContainer}>
<Image
style={styles.inputIcon}
source={{uri: 'https://png.icons8.com/key-2/ultraviolet/50/3498db'}}
/>
<TextInput
style={styles.inputs}
placeholder="Password"
secureTextEntry={true}
underlineColorAndroid="transparent"
onChangeText={password => this.setState({password})}
/>
</View>
<TouchableHighlight
style={[styles.buttonContainer, styles.loginButton]}
onPress={() => this.onClickListener('login')}>
<Text style={styles.loginText}>Login</Text>
</TouchableHighlight>
<TouchableHighlight
style={styles.buttonContainer}
onPress={() => this.onClickListener('restore_password')}>
<Text>Forgot your password?</Text>
</TouchableHighlight>
<TouchableHighlight
style={styles.buttonContainer}
onPress={() => this.onClickListener('register')}>
<Text>Register</Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#DCDCDC',
},
inputContainer: {
borderBottomColor: '#F5FCFF',
backgroundColor: '#FFFFFF',
borderRadius: 30,
borderBottomWidth: 1,
width: 250,
height: 45,
marginBottom: 20,
flexDirection: 'row',
alignItems: 'center',
},
inputs: {
height: 45,
marginLeft: 16,
borderBottomColor: '#FFFFFF',
flex: 1,
},
inputIcon: {
width: 30,
height: 30,
marginLeft: 15,
justifyContent: 'center',
},
buttonContainer: {
height: 45,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginBottom: 20,
width: 250,
borderRadius: 30,
},
loginButton: {
backgroundColor: '#00b5ec',
},
loginText: {
color: 'white',
},
});