Text strings must be rendered within a <Text> component. ReactNative

Watch out for this messy bug if you’re new to react native.

Photo by Shahadat Rahman on Unsplash

Text should be rendered inside <Text> component:

While the error may seem obvious, probably you tried using plain text without wrapping it in a <Text></Text> component like so:

const myApp = () => {
return <>hello there!</> // throws an error❌
};

But what if you did every thing right? Let’s go deeper and see how you could shoot yourself in the foot by just this mistake alone.

You randomly uncomment out commented code and by mistake leave text comment in the component as code. Yikes

{/* This is my comment*/}
// your other code

But after randomly uncommenting:

This is my comment
/// your other code

This is will be executed and an error will be thrown.

Second scenario:

You have some form of conditional rendering for example a list component of contacts that shows empty state and state with all contacts.

const const myContacts = () => {
return (
<>
{
 contacts?.length && <MyListComponent/>
}</>)
};

As much as it logically looks okay i.e`0 && <some truthy condition>` returns false. But what if your contacts list at first is undefined or null? This expression will be evaluated to null and cause the entire application to break.

Empty string scenario:

Let’s say one of your variables you’re trying to use for conditional rendering evaluates to an empty state. Guess what will happen?

{
emptyStateWithEmptyString && <MyContactList/>
 }

An the same error will be thrown because any comparison of and operator with strings evaluates to a string.

The correct way / Solution:

Use ternary condition expressions or use a bang-bang operator to negate or make expression positive.

For conditional expressions that involve &&. Use ! for falsey expressions and !! (bang-bang) for positive expressions. The example below shows how to evaluate negative and positive expressions respectively.

const const myContacts = () => {
return (
<>
{
 !contacts?.length && <MyListComponent/>
}
{
 !!contacts?.length && <MyListComponent/>
}
</>)
};

The other way is to use a ternary operator to conditionally render your component. We’ll use the same component as previous examples, just with a little bit of refactoring.

const const myContacts = () => {
return (
<>
{
 contacts?.length ? <MyListComponent/>: null
}
</>)
};

Final words

I hope this helped, I joined a startup a 3 months back to pay the bills but I also run my own startups as indieHacker. Working with big startups has exposed to cool new stuff CI/CD, tests, and remote collaboration in general. However, I realised my break-things mentality won’t help me as the startup I work for demands real production ready stuff. So I’ve decided to document everything about the tech stack in short articles. My mission is to use writing to re-enforce what I’ve learned, and learn enough to be dangerous 😂 so that I finish my day job tasks so that I can focus on my startup.