Error in react-native application: Invariant Violation: Text strings must be rendered within a <Text> component

Question

this is the code I wrote in react-native application and I've added the image about the error I am getting when I run the app on android virtual device.

import React from 'react';
import { Text, View } from 'react-native';
const Header = () => {
 const { textStyle, viewStyle } = styles;
 return (
 <View style={viewStyle}>
 <Text style={textStyle} >Albums!</Text>;
 </View>
 );
};
const styles = {
 viewStyle: {
 backgroundColor: '#F8F8F8'
 },
 textStyle: {
 fontSize:20
 }
};
export default Header;

The error is as follows:

Invariant Violation: Text strings must be rendered within a <Text> component.

• Jeremy: Please post what the error is and what the desired outcome is
• prayansh ratan: @JeremyLee Sir i've added the link to image to what the error is
• Jeremy: I don't see the link.. my edit may have overwritten yours?
• prayansh ratan: @JeremyLee Sir I've added the image again :)

Answer 1

Just remove the semicolon which is after the text closing tag.

return (
 <View style={viewStyle}>
 <Text style={textStyle} >Albums!</Text> "remove this semicolon ->;"
 </View>
);

Answer 2

if you want that ! you can write code like this

return (
<View style={viewStyle}>
<Text style={textStyle} >{"Albums!"}</Text>
</View>

);