Component Exception: Text strings must be rendered within a <Text> component

Question

Bare with me, I am very new to React Native. I recently had to scrap a project and start from scratch. I wrote this simple code to make sure everything is up and running and to my surprise an exception was thrown. I have been searching for a solution for a long time. I put this code into Snack.expo.io and it works when the Web tab is selected, but on Android and IOS the code does not run. Let me know if you need any further information to help me. This is an Expo project. I found a similar situation and someone recommended to delete npm modules folder > run npm install > npm start (in my case yarn start). I did this and there was no change. Thank you so much.

App.js

import 'react-native-gesture-handler';
import * as React from 'react';
import { View } from "react-native";
import { registerRootComponent } from 'expo';

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

export default class App extends React.Component {
    render() {
        return (
            <View>
                <Welcome name="Sara" />
                <Welcome name="Cahal" />
                <Welcome name="Edite" />
            </View>
        );
    }
}

registerRootComponent(App);

norbitrial · Accepted Answer · 2020-10-19 19:05:25Z

1

You can try to declare you <Welcome /> component as the following instead:

function Welcome(props) {
    return <Text>Hello, {props.name}</Text>;
}

See the difference from <h1> to <Text> as the error message suggest.

Read further about <Text> in the documentation:

Text supports nesting, styling, and touch handling.

So probably you can apply you styling there instead of using <h1>.

+1 addition:

Don't forget to import <Text> as:

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

answered Oct 19, 2020 at 19:05

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

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

1 Comment

Semolski Over a year ago

Ahh...So being new to this, I wanted to ensure I had every line correct, so this code is actually an example shown on the React website, and then I realized my mistake, the documentation I was looking at wasn't for React Native.

nazmul · Accepted Answer · 2020-10-19 19:06:45Z

1

h1 is a web syntex, try to replace it with text. Before using import it from react native.

answered Oct 19, 2020 at 19:06

nazmul

4653 silver badges14 bronze badges

Collectives™ on Stack Overflow

Component Exception: Text strings must be rendered within a <Text> component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related