React native reference error Can't find variable :style - react-native

Question

I implemented a react-native log in page and i added some styles for it. But then i run it on my emiulator, It gives me this reference error can't find variable: style
This is my login.js code --
import React,{Component} from 'react';
import { Alert, Button,Text, TextInput, View,TouchableOpacity, StyleSheet } from 'react-native';
// import { TouchableOpacity } from 'react-native-gesture-handler';
export default class App extends Component {
state = {
email: '',
password: '',
errorMassage:null
}
render() {
return(
<View style={styles.container}>
<Text style={style.greeting}>{"Helloo.."}</Text>
<View style={styles.errorMassage}>
<Text>Error</Text>
</View>
<View style={styles.form}>
<View>
<Text style={styles.inputTitle}>Email Address</Text>
<TextInput style={styles.input} ></TextInput>
</View>
<View>
<Text style={styles.inputTitle}>Password</Text>
<TextInput style={styles.input} securityTextEntry autoCapitalize ="none" ></TextInput>
</View>
</View>
<TouchableOpacity style={styles.button}>
<Text style={{color:"#FFF",fontWeight:"500"}}>Sign in</Text>
</TouchableOpacity>
<TouchableOpacity style={{alignSelf:"center",marginTop:32}}>
<Text style={{color:"#414959",fontSize:13}}>New To EduApp?<Text style={{color:"#E9446A",fontWeight:"500"}}></Text>
</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'red',
},
greeting: {
marginTop:32,
fontSize:18,
fontWeight:"400",
textAlign:"center"
},
errorMassage:{
alignItems:"center"
},
form:{
marginBottom:48,
marginHorizontal:30
},
input:{
borderBottomColor:"#8A8F9E",
borderBottomWidth:StyleSheet.hairlineWidth,
fontSize:15,
color:"#161F3D"
},
inputTitle: {
color:"#8A8F9E",
fontSize:10,
textTransform:"uppercase"
},
button:{
marginHorizontal:30,
backgroundColor:"#E9446A",
borderRadius:4,
alignItems: "center",
justifyContent: "center",
}
});
And this is the error I got in my emulator.
How can I fix this?

Answer 1

The error occurs because of a typo in your code. It is located on line 17 of the code you supplied. style.greetings should be styles.greeting.
Replace
<Text style={style.greeting}>{"Helloo.."}</Text>
with
<Text style={styles.greeting}>{"Helloo.."}</Text>
One way to decrease these kinds of mistakes is to use a code editor that supports the eslint extension which amongs many things underline missing variables. One that I have had good experiences with is Visual Studio Code.