CODEWITHSUNDEEP
javascriptreactjsreact-nativejsx
Semolski
Semolski

Reputation: 15

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

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);

Upvotes: 1

Views: 368

Answers (2)

nazmul
nazmul

Reputation: 435

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

Upvotes: 1

norbitrial
norbitrial

Reputation: 15166

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';

Upvotes: 1

Related Questions