Text strings must be rendered within a <Text> component issue in React Native

Question

I'm using react-native-cli version 2.0.1 and react-native version 0.57.8. I am learning React native, and have encountered an issue when trying to render two different child components (Header and AlbumList) in the main App component.

Issue

The error disappears if I remove the <View> tags and AlbumList component in the index.js file (meaning only show one component). I have looked through threads like this, but am still unable to identify how I'm using the <View> tag incorrectly.

index.js

import React from 'react';
import { View, Text, AppRegistry } from 'react-native';
import Header from './src/components/Header';
import AlbumList from './src/components/AlbumList';

//>Create a component
const App = () => (
<View> <Header headerName={'Albums'} /> 
<AlbumList />
</View>

);


//>Render component on device
AppRegistry.registerComponent('albums', ()=> App);

AlbumList.js

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

const AlbumList = () => {
return (
  <View><Text> Album List </Text></View>
);
};

export default AlbumList;

I think the issue isn't anything to do with the Header.js file, but sharing code nonetheless.

Header.js

import React from 'react';
import { Text, View } from 'react-native'; // The view tag allows us to position and wrap elements

// Make a component
const Header = (props) => {

  const { textStyle, viewStyle } = styles;

  return (
    <View style = {viewStyle}>
      <Text style = {textStyle}> {props.headerName}</Text>
    </View>
  );
};

const styles = {
  viewStyle: {
      backgroundColor: '#F8F8F8',
      alignItems: 'center',
      justifyContent: 'center',
      height: 60
  },

  textStyle: {
    fontSize: 20
  }
};

export default Header;

Help is appreciated. Thanks in advance!

I have an index.js in the root, and its contents are in the post. — keshinpoint
– keshinpoint, Commented Dec 27, 2018 at 4:17

Farid Ansari · Accepted Answer · 2018-12-28 06:03:01Z

5

in your index.js file, replace App function with below,

//Create a component
const App = () => (
  <View><Header headerName={'Albums'} /><AlbumList /></View>
);

there should be no space between components here

while using react native components, try to put each element in a new line, in this way you don't have to worry about spaces

const App = () => (
      <View>
        <Header headerName={'Albums'} />
        <AlbumList />
      </View>
    );

Let me know if it works

edited Dec 28, 2018 at 6:03

answered Dec 27, 2018 at 4:46

Farid Ansari

8415 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

keshinpoint Over a year ago

Thank you so much! Do you know what the syntax would be if I didnt want to worry about spaces? I tried this and it didnt work - const App = () => { return ( <View> <Header headerName={'Albums'} /> <AlbumList /> </View> ); };

Farid Ansari Over a year ago

@KeshavVasudevan, I updated the answer with the preferred syntax. Check it out.

keshinpoint Over a year ago

Thanks a ton @farid!

Muteshi · Accepted Answer · 2021-04-19 18:16:38Z

2

In my case i had a misplaced semicolon as shown and it was giving me so much headache

 <Screen>
        <RestaurantScreen />; //Make sure you have no misplaced semicolon like in my case here
      </Screen>

answered Apr 19, 2021 at 18:16

Muteshi

1,4081 gold badge16 silver badges33 bronze badges

Collectives™ on Stack Overflow

Text strings must be rendered within a <Text> component issue in React Native

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related