React-native: Text Strings must be rendered within a <Text> component

Created on 3 Mar 2019  路  9Comments  路  Source: facebook/react-native

i am total newbie help me out.

Invariant Violation: Text strings must be rendered within a component.

This error is located at:
in RCTView (at View.js:45)
in View (at header.js:9)
in Header (at scripts/index.js:7)
in App (at renderApplication.js:34)
in RCTView (at View.js:45)
in View (at AppContainer.js:98)
in RCTView (at View.js:45)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:33)
createTextInstance
index.delta?platform=android&dev=true&minify=false:10741:18
completeWork
index.delta?platform=android&dev=true&minify=false:17119:64
completeUnitOfWork
index.delta?platform=android&dev=true&minify=false:19096:44
performUnitOfWork
index.delta?platform=android&dev=true&minify=false:19259:36
workLoop
index.delta?platform=android&dev=true&minify=false:19269:47
renderRoot
index.delta?platform=android&dev=true&minify=false:19340:21
performWorkOnRoot
index.delta?platform=android&dev=true&minify=false:20058:23
performWork
index.delta?platform=android&dev=true&minify=false:19985:30
performSyncWork
index.delta?platform=android&dev=true&minify=false:19961:20
requestWork
index.delta?platform=android&dev=true&minify=false:19840:26
scheduleWork
index.delta?platform=android&dev=true&minify=false:19712:22
scheduleRootUpdate
index.delta?platform=android&dev=true&minify=false:20229:21
updateContainerAtExpirationTime
index.delta?platform=android&dev=true&minify=false:20254:34
updateContainer
index.delta?platform=android&dev=true&minify=false:20322:47
render
index.delta?platform=android&dev=true&minify=false:20697:26
renderApplication
index.delta?platform=android&dev=true&minify=false:71162:59
run
index.delta?platform=android&dev=true&minify=false:70845:28
runApplication
index.delta?platform=android&dev=true&minify=false:70895:28
__callFunction
index.delta?platform=android&dev=true&minify=false:4452:49

index.delta?platform=android&dev=true&minify=false:4209:31
__guard
index.delta?platform=android&dev=true&minify=false:4406:15
callFunctionReturnFlushedQueue
index.delta?platform=android&dev=true&minify=false:4208:21

Ran Commands Locked Invalid

Most helpful comment

Bug:

{var &&
<MyComponent />} 

The fix is change conditions to make sure it's
Boolean expression like:
{var !== 0 && <MyComponent/ >}

All 9 comments

@ArshvirSingh can you post an example the code causing this issue?

Normally this issue means you have some text inside JSX that's outside a Text component. Can be a pain to find, but from the error just look inside a View inside your Header file and you should see it soon enough


We are automatically closing this issue because it does not appear to follow any of the provided issue templates.

馃憠 Click here if you want to report a reproducible bug or regression in React Native.

Bug:

{var &&
<MyComponent />} 

The fix is change conditions to make sure it's
Boolean expression like:
{var !== 0 && <MyComponent/ >}

,

This above code is giving this error, can anyone help me with this?

@prabakarviji Is this all your code?? There were a few issues I can see

  1. Your code is missing closing tag for View and Text
  2. Your inline style needs to be wrapped in {}.
  3. you have , after closing tag for the icon. Need to remove it.

Please read https://facebook.github.io/react-native/docs/style for reference

@CatapultJesse you are brilliant

the problem was that I had put a comment between one component and another; When removing the comment, everything returned to normal:

 <Text>Hello</Text>
//! Comment..
<Text>Salut</Text>

`

Was this page helpful?
0 / 5 - 0 ratings