Why is my text not being rendered within text components?-CodePudding

I am new to React Native and i am having trouble with the following error message:

text string must be rendered within a <Text> component

This is my component:

import React from "react";
import { Text, StyleSheet, View, Button } from "react-native";


const HomeScreen = () => {
  return (
  <View>
    <Text style={styles.text}>Hey!</Text>
    <Button title='Go components demo'/>
  </View>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 30,
  },
});

export default HomeScreen;

My strings are wrapped within a Text component and the error message persists. Any typo am i not seeing or doing anything wrong?

CodePudding user response：

Your error is likely somewhere else in your app. one way to test this is to comment out the component inside of your App component or wherever your Homescreen component is being called. It's more likely that wherever you're mounting HomeScreen, there is extraneous text. Perhaps something you missed when deleting the boilerplate code.

CodePudding user response：

Give some width and height to your view ,or try give a flex of 1 : Hope it helps.

 <View style = {{flex:1}}>
    <Text style={styles.text}>Hey!</Text>
    <Button title='Go components demo'/>
  </View>

 <View style = {{width:'100%',height:'100%'}}>
    <Text style={styles.text}>Hey!</Text>
    <Button title='Go components demo'/>
  </View>