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