React Native error: Super expression must either be null or a function - react-native

Question

I get the error when i trie to run this app on my Android Emulator. I changed "Component" to "React.Component" but then i get other Problems.
My versions of React, Node and JS are the newest.
The Problem is that im new and have this Code from a Viedo and he didnt got thet Mistake.
Without React.Component:
With React.Component:
import React from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
StatusBar,
Component,
} from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<StatusBar backgroundColor="#1e90ff" barStyle="light-content" />,
<Text style={styles.login}>Login</Text>,
<TextInput style={styles.input} placeholder="Username" />,
<TextInput
style={styles.input}
placeholder="Password"
secureTextEntry
/>
<View style={styles.btnContainer}>
<TouchableOpacity style={styles.userBtn}>
<text style={styles.btnText}>Login</text>
</TouchableOpacity>
<TouchableOpacity style={styles.userBtn}>
<text style={styles.btnText}>Text</text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#1e90ff',
},
login: {
textAlign: 'center',
fontSize: 35,
margin: 10,
color: '#fff',
},
input: {
width: '80%',
backgroundColor: '#fff',
padding: 10,
marginBottom: 10,
height: 30,
},
btnContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
width: '90%',
},
userBtn: {
backgroundColor: '#fff',
padding: 15,
width: '40%',
margin: 10,
},
btnText: {
fontSize: 25,
textAlign: 'center',
color: '#1e90ff',
},
});
Can someone help me?

Answer 1

1. TypeError: Super expression must either be null or a function
To fix this
import React, { Component } from 'react';
Then you can use
export default class App extends Component
2. Invariant Violation: Text strings must be rendered within a component
To fix this remove , & change
<text style={styles.btnText}>Login</text>
to
<Text style={styles.btnText}>Login</Text>
EDIT
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<StatusBar backgroundColor="#1e90ff" barStyle="light-content" />
<Text style={styles.login}>Login</Text>
<TextInput style={styles.input} placeholder="Username" />
<TextInput
style={styles.input}
placeholder="Password"
secureTextEntry
/>
<View style={styles.btnContainer}>
<TouchableOpacity style={styles.userBtn}>
<Text style={styles.btnText}>Login</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.userBtn}>
<Text style={styles.btnText}>Text</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
Hope this helps you. Feel free for doubts.