component is not defined react native - react-native-ios

Question

I have created a empty page and trying to import the component of another page into the empty one.
App.js
import React, {Component} from 'react';
import {name as appName} from './app.json';
import {
View,
Text,
StyleSheet,
TextInput,
Button,
TouchableOpacity,
AppRegistry
} from 'react-native';
import Login from "./Login";
function validate() {
alert("Button Clicked...")
console.log("Hello world!")
}
export default class App extends Component{
render(){
return(
<Login />
);
}
}
const styles = StyleSheet.create({
container: {
// justifyContent: 'center',
// alignItems: 'center',
backgroundColor: '#af522a',
flex: 1
},
txtText: {
textAlign: 'center',
fontSize: 25,
color: '#9daf2a'
},
txtInput: {
height: 45,
borderColor: '#9daf2a',
borderWidth: 3,
marginTop: 75,
padding: 12,
backgroundColor: '#FFFFFF',
marginLeft: 16,
marginRight: 16,
borderRadius: 15
},
txtInput2: {
height: 45,
borderColor: '#9daf2a',
borderWidth: 3,
padding: 12,
backgroundColor: '#FFFFFF',
marginLeft: 16,
marginRight: 16,
marginTop: 24,
borderRadius: 15
},
loginScreenButton:{
marginRight:40,
marginLeft:40,
marginTop:45,
paddingTop:10,
paddingBottom:10,
backgroundColor:'#593eb2',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
loginText:{
color:'#fff',
textAlign:'center',
paddingLeft : 10,
paddingRight : 10
}
})
Login.js
import React, {component} from 'react';
import{
View,
TextInput,
StyleSheet
}from 'react-native';
export default class Login extends Component {
render(){
return(
<View style = {styles.container}>
</View>
)
}
}
const styles = StyleSheet.create({
container: {background: "#44c41d", flex: 1}
})
Error
I have just started up with react-native and don't have that much of knowledge . so, please tell me if any one have any solution.
Thanks in advance.

Answer 1

in your Login.js, you use lowercase component,
import React, {component} from 'react'
convert it to uppercase.
import React, {Component} from 'react';