- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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 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 Articles
- How to handle touches in ReactNative?
- How to find the Strings within a text file in Java?
- Explain ReactNative SwitchSelector Component
- Explain VirtualizedList component usage in ReactNative?
- How to handle errors while working with Navigation in ReactNative?
- How to handle Assertion Error in Java?
- How to handle jQuery AJAX error?
- How to handle a python exception within a loop?
- How to handle errors within WaitGroups in Golang?
- How to deal with error “Error in shapiro.test(…) : sample size must be between 3 and 5000” in R?
- How to raise an error within MySQL?
- How to display a large component within a smaller display area in Java?
- How to handle error object in JSP using JSTL tags?
- How to represent text that must be isolated from its surrounding for bidirectional text formatting in HTML?
- How to handle SSL certificate error using Selenium WebDriver?
