Question 33553 in React native Question posted in
The official React Native documentation can be found here.

Why is my text not being rendered within text components? – React native

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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>

    or

     <View style = {{width:'100%',height:'100%'}}>
    <Text style={styles.text}>Hey!</Text>
    <Button title='Go components demo'/>
  </View>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search