Text strings must be rendered within a <Text> component

React Native
1

Hello Everyone,

I’m doing the React Native Fundamentals course and am stuck at Input Components - Lesson 3.

Am facing an error message which I have no idea where is it located, let alone know how to troubleshoot. Screenshot of the error message is below.

Here are my codes for App.js (hastebin), and AppTextInput.js(hastebin).

Any help will be much appreciated. Thanks!

Error Message
Error Message680×1402 110 KB

2

Your code looks pretty clean. I noticed one thing you might try. In line 11, try adding ( ) around the MaterialCommunityIcon component:
{icon && ()}

The compiler parser might be getting confused with that line of JSX.

3

Thanks @dpickut for reaching out.

I’ve wrapped the component in ().

{icon && (<MaterialCommunityIcons name={icon} /> )}

However, the error message is still the same.

4

Sorry that didn’t work. The error message is saying that the parser is somehow encountering something to be rendered that it sees as a text string – but not inside a component.

If you can’t find a a syntax error in your code, you might try doing a restart of the dev server, then reload the code in the Expo app in the simulator. (That’s worked for me a few times throughout this course.)

5

I found the cause of the error… and it was a very silly mistake from me.

There was a ; in the return statement.

return (
  <Screen>
      <AppTextInput />;  
  </Screen>
  )

Thanks again @dpickut for following up with my thread, and explaining what the error meant :+1:. Now my AppTextInput works.

Rectified Error Message
Rectified Error Message704×1420 58.9 KB

6

Glad you got it solved! I’ve made the same mistake myself – more than once. :grin:

1 Like
7

Thank you, I have make the same mistake,and now it solved.