Skip to content

React Native errorReact Native: “Text strings must be rendered within a <Text> component”

A screen crashes with a red box: Text strings must be rendered within a <Text> component. Somewhere a piece of text, sometimes just a 0 or a space, sits directly inside a View. Code written for the web, or generated by an AI tool, often does this because browsers allow it. Often it only shows up once real data arrives, such as an empty list. Here is the rule in React Native’s words, the usual places the stray text hides, and the fix, or hand it over at a fixed price.

Short answer

Wrap every piece of text in <Text>. Then look for {count && <Something />} where count can be 0: React renders the 0 as text. Change it to {count > 0 && <Something />}. Also check for a stray space, semicolon or // comment between tags inside a View. The red box’s component stack names the component to look in.

Where the stray text hides, and the fix

  1. 01

    React Native is stricter than the web

    “In React Native, we are more strict about it: you must wrap all the text nodes inside of a <Text> component.” React Native, Text

    In a browser, text can sit anywhere. In React Native every string, number or space that renders must be inside a <Text>. Code moved from a web app, or written by an AI tool from web examples, breaks this rule easily.

    // crashes
    <View>Some text</View>
    
    // works
    <View>
      <Text>Some text</Text>
    </View>
  2. 02

    A number on the left of &&

    “Don't put numbers on the left side of &&.” React, Conditional rendering

    The most common hidden cause. {items.length && <List items={items} />} renders 0 when the list is empty, and that 0 is text inside a View. It works while there is data, which is why it often appears only for new users or empty states. Compare against zero, or use a ternary:

    // crashes when items is empty
    {items.length && <List items={items} />}
    
    // works
    {items.length > 0 && <List items={items} />}
    {items.length ? <List items={items} /> : null}
  3. 03

    A stray space, semicolon or comment between tags

    “You cannot have a text node directly under a <View>.” React Native, Text

    A {' '} spacer, a semicolon left after a closing tag, or a comment written as // inside JSX all render as text. Inside a View they trigger the same error. Write comments inside JSX as {/* comment */} and move spacing into styles.

  4. 04

    Find the component

    The red box lists the component stack: the first of your own components in it is where the text is. If the message only appears in a release build, open the device logs, or reproduce the same data in development, such as an empty list or a missing name.

Checked against the vendor’s docs on : React Native docs: Text (text must be inside a <Text>); React docs: Conditional rendering (numbers on the left of &&).

Rather hand it over?

Fixed scope, fixed price, paid upfront. The work happens in writing; no call needed.

Related: Expo and React Native “Unable to resolve module” · Expo app crashes in production · React Native “Unable to load script” · Expo native module cannot be null

Questions

More on this error

Why does it only crash for some users?

The stray text usually depends on data. A count of 0, an empty list or a missing field renders text only for the users who have it, so the screen works for you and crashes for a new account.

Does it crash the app in production too?

Yes. In development you see a red box; in a release build the app usually closes, unless an error boundary catches the error. Check your crash reports for the same message.

Can you fix it for me?

If one bug is the whole problem, the App Fix Ticket covers it: a written diagnosis first, then the fix. If the app has more going on, the Launch Check is a written check of the whole app. Each issue found is rated critical, high, medium or low, with where it is and how it was confirmed. No issues worth fixing, no charge. If the Launch Check finds nothing rated medium or higher, Simon refunds the full $450. You keep the report either way. This applies to the first 10 Launch Checks bought after October 30, 2026.

A different error?

Describe it and get a written quote

Send the error and what you were doing. You get a written scope, a fixed price and a timeline; Simon replies by email, usually within one business day.