text string must be rendered with <text> component error only on ios - ios

Question

I'm getting this weird error when I'm running my code on Expo Go on IOS
I'm new to react native and I don't know what to do
This is my code:
import React, { Component } from 'react';
import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
export default class ButtonBasics extends Component {
_onPressButton() {
alert("Don't touch that button!")
}
render() {
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<text>Press the button</text>
<Button title="Press" onPress={this._onPressButton} color="#57a9af" />
<View/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#d6f0f2',
alignItems: 'center',
justifyContent: 'center',
},
});

Answer 1

Well There are multiple problems with your Code,
<text> is not a valid component. It is <Text> with Capital T. You have imported the right Component but using the wrong Tag.
You have three end tags. While you have only two start tags.
So your code should be
import React, { Component } from 'react';
import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
export default class ButtonBasics extends Component {
_onPressButton() {
alert("Don't touch that button!")
}
render() {
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Text>Press the button</Text>
<Button title="Press" onPress={this._onPressButton} color="#57a9af" />
<View/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#d6f0f2',
alignItems: 'center',
justifyContent: 'center',
},
});