CODEWITHSUNDEEP
javascriptreact-native
keshinpoint
keshinpoint

Reputation: 1001

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

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

enter image description here

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!

Upvotes: 2

Views: 12999

Answers (2)

Muteshi
Muteshi

Reputation: 1308

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>

Upvotes: 2

Farid Ansari
Farid Ansari

Reputation: 841

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

Upvotes: 5

Related Questions