I am working on making a React Native app and I am getting the error:

Unexpected text node: . A text node cannot be a child of a <View>.

I cannot figure out what text node this error refers to. My goal is to render an array of views.

Here is a minimal code snippet reproducing the error:

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


function fun() {
  const views = [];

  const style = {backgroundColor: 'red', height: 100, width: 100};

  for (let i=0; i<3; i++) {
    views.push(
      <View key={i} style={style}/>
    )
  }

  return views;
}

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      
      <View> {fun()} </View>
      
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

I am working on making a React Native app and I am getting the error:

Unexpected text node: . A text node cannot be a child of a <View>.

I cannot figure out what text node this error refers to. My goal is to render an array of views.

Here is a minimal code snippet reproducing the error:

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


function fun() {
  const views = [];

  const style = {backgroundColor: 'red', height: 100, width: 100};

  for (let i=0; i<3; i++) {
    views.push(
      <View key={i} style={style}/>
    )
  }

  return views;
}

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      
      <View> {fun()} </View>
      
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

• javascript
• react-native
• textview
• jsx

4 Answers 4

The problem is that a function that is supposed to be a JSX ponent, or in this case return a JSX ponent, must be single JSX element and not an array of JSX elements.

Hence, you need to add a top level ponent which could be just a fragment.

function fun() {
  const views = []

  const style = { backgroundColor: "red", height: 100, width: 100 }

  for (let index = 0; index < 3; index++) {
    views.push(<View key={index} style={style} />)
  }
  return <>{views}</>
}

You are returning an array of views. You must return views as the children. Try something like:

function fun() {
  const style = { backgroundColor: "red", height: 100, width: 100 };

  return [0, 1, 2].map(() => <View key={i} style={style} />);
}

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>

      <View> {fun()} </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Check out the React Native documentation https://reactnative.dev/docs/0.65/text

"You cannot have a text node directly under a <View>."

try

<View>
   <MyAppText>
     Text styled with the default font for the entire application
   </MyAppText>
   <MyAppHeaderText>Text styled as a header</MyAppHeaderText>
</View>

actually i solve mine ..... this give me error because of space between View and Text
so i remove All spaces between View and Text .. error gone