Text Strings must be rendered within a <Text> component

[ArshvirSingh]

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

[ericlewis]

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

[CatapultJesse]

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

[react-native-bot]

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.

[kelset]

Please refer to this -> #20764

[gshoanganh]

Bug:

{var &&
<MyComponent />} 

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

[prajwalbhatia]

<View style={{marginHorizontal : RFValue(10) , flexDirection : 'row'}}>
<Ionicons style={{marginHorizontal : RFValue(5)}} name="ios-arrow-back" size={RFValue(11)} color = '#434343'/>,
<Text fontSize : RFValue(16) , color : 'white' , alignSelf : 'center' , marginHorizontal : RFValue(10)}}>{navigation.state.routeName}

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

[PA55ION]

@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

[Mnabawy]

@CatapultJesse you are brilliant

[NelsoMart]

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>

`