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',
  },
});

CodePudding user response：

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',
  },
});

CodePudding user response：

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

Hence, you need to add a top level component 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}</>
}