
- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to handle the error “Text strings must be rendered within a <Text> component” in ReactNative?
While developing your app you can come across the error as stated above. Here is the code that gives the error −
Example
import React from "react"; import { Image , Text, View, StyleSheet } from "react-native"; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Image style={styles.stretch} source={{ uri: 'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png ', }} /> </View> ); } } const styles = StyleSheet.create({ container: { paddingTop: 50, paddingLeft: 50, }, stretch: { width: 200, height: 200, resizeMode: 'stretch', }, });
The error displayed on the screen is as follows −
The error comes for the following reasons. Make sure you avoid those mistakes while coding in your app.
The first cause for the error is because of bad indentation. It is very necessary that each component is indented properly. The child elements are indented properly inside the parent component.
The second case is because of spaces left at the end of each component. Remove the spaces from the end of the screen and compile again. It will work fine. Please be careful when copy pasting the code from another source. You will encounter this error mostly in those cases.
Let us now correct the code and check the output again.
Example
import React from "react"; import { Image , Text, View, StyleSheet } from "react-native"; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Image style={styles.stretch} source={{uri: 'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png '}} /> </View> ); } } const styles = StyleSheet.create({ container: { paddingTop: 50, paddingLeft: 50, }, stretch: { width: 200, height: 200, resizeMode: 'stretch', } });
Output
- Related Questions & Answers
- Text manipulation of strings containing “The ”? in MySQL
- How to find the Strings within a text file in Java?
- How to deal with error “Error in shapiro.test(…) : sample size must be between 3 and 5000” in R?
- How to find an element using the “Link Text/Partial Link Text” in Selenium?
- How exactly does <script defer=“defer”> work?
- How to represent text that must be isolated from its surrounding for bidirectional text formatting in HTML?
- How to handle touches in ReactNative?
- How to set text in <strong> tag with JavaScript?
- Extract the value of the <text> to a variable using JavaScript?
- Explain ReactNative SwitchSelector Component
- Difference between <ion-list> and <div class=“list”> in Ionic framework?
- HTML5 <input type=“file” accept=“image/*” capture=“camera”> display as image rather than “choose file” button
- How do I wrap text in a <pre> tag in HTML?
- PHP How to display array values with text “even” to be displayed for even index values
- Explain VirtualizedList component usage in ReactNative?