Showing error 'Text strings must be rendered within a <Text> component'

[saikiranoptisol]

After creating .apk file and install in my android device i got this error 'Text strings must be rendered with in a text component'. I have used the patch that is in the document before creating offline bundle. Still the issue is happening and the app continuosuly crashes in IOS. Any work around for this issue.

[yasirdev]

+1

[Balasnest]

Facing this exact issue in react native 0.57. @iyegoroff any workaround for this? Please help. Got stuck badly on this.

[rkdavidson]

+1, using "react-native": "0.57.7" and seeing this error even when using exact usage instructions:

Using:

<LinearTextGradient
  style={{ fontWeight: 'bold', fontSize: 72 }}
  locations={[0, 1]}
  colors={['red', 'blue']}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 0 }}
>
  THIS IS TEXT GRADIENT
</LinearTextGradient>

Produces:

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

This error is located at:
    in RNLinearTextGradient (at create-text-gradient-class.js:140)
    in TouchableTextGradient (at create-text-gradient-class.js:265)
    in RCTView (at View.js:45)
    in RCTView (at View.js:45)
    in RCTView (at View.js:45)
    in RCTView (at View.js:45)
    in CoreActionCard (at core-action-card.stories.js:44)
...

[rkdavidson]

Update to my comment above

Hey @Balasnest @yasirdev @saikiranoptisol , follow the instructions in the readme for applying the patch: https://github.com/iyegoroff/react-native-text-gradient#usage-with-rn--0560

I got it to work, albeit with the temporary patch workaround. I bumped @iyegoroff 's PR #13211 against react codebase to hopefully get this truly fixed soon.

Couple things to double check:

1. Make sure you've run react-native link react-native-text-gradient (or followed the manual instructions)
2. Run the temporary patch: node node_modules/react-native-text-gradient/patch-rn.js

[Balasnest]

@yasirdev @saikiranoptisol @rkdavidson And the better way is to add it in the package.json file rather than executing manually after npm install. We might forget to do this later whenever we remove node_modules.

postinstall:"node node_modules/react-native-text-gradient/patch-rn.js"

[saikiranoptisol]

During development it works fine for me. But my problem is when i create offline bundle for Andorid and IOS it is coming for me that error. After creating offiline bundle i cant do npm install or patch also

[rkdavidson]

@Balasnest Good tip 👍

@saikiranoptisol You could fork the repo and manually apply the patch in an npm scoped way, i.e. @saikiranoptisol/react-native-text-gradient, until facebook's PR is merged.

[Balasnest]

@saikiranoptisol Exactly. Not working on release build. Did you do any workaround for this?

During development it works fine for me. But my problem is when i create offline bundle for Andorid and IOS it is coming for me that error. After creating offiline bundle i cant do npm install or patch also

[Balasnest]

@rkdavidson How to do this? Any idea? My release is got stuck due to this 😞

@iyegoroff could you help us, please! How can we make it work in a release build?

[rkdavidson]

@Balasnest Haven't tried release build yet or verified on Android — this is part of an experimental side branch on my project, so has been a bit isolated from user-facing stuff. I'll report back though as this is coming up again.

To anyone reading this thread, the onus is on the react maintainers to merge this PR: https://github.com/facebook/react/pull/13211

So maybe it will help to bump that thread?

[elyngved]

Hi! Trying to use this in my app as well. Is there a possible workaround to pass the text via a prop instead?

[iyegoroff]

@elyngved I'm not sure if this will work and don't think that changing API in this way is a good idea, because rntg is meant to be a "drop-in replacement for standard Text component". Probably the right way to resolve this issue is to investigate why the patch script doesn't work for you as intended.

[jchenx2]

@saikiranoptisol Exactly. Not working on release build. Did you do any workaround for this?

During development it works fine for me. But my problem is when i create offline bundle for Andorid and IOS it is coming for me that error. After creating offiline bundle i cant do npm install or patch also

is there any idea for release build

[iyegoroff]

I just updated react-native to 0.58.6 version in example app and generated release apk with Docker. The patch script worked as intended and I didn't get any errors while running the app. Until https://github.com/facebook/react/pull/13211/ is merged there is no other way to avoid this error except patching react-native. If the script doesn't work for your environment for some reason - you have to fix it or patch your react-native sources manually.

[bony06aug]

still, issue exists of Invariant Violation: Text strings must be rendered within a component.

[rkdavidson]

@jchenx2 @bony06aug If you add this line to your package.json, patching becomes an automatic part of builds:

postinstall:"node node_modules/react-native-text-gradient/patch-rn.js"

(Or modify your existing postinstall script)

[kevinpiske]

Still happens, the patch doesn't work anymore

[kevinpiske]

Using the Text component around the string works on Android. On iOS the gradient wasn't rendered, I'm not sure if it was due to this change.

<LinearTextGradient
  style={{ fontWeight: 'bold', fontSize: 72 }}
  locations={[0, 1]}
  colors={['red', 'blue']}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 0 }}
>
  <Text>THIS IS TEXT GRADIENT</Text>
</LinearTextGradient>

[tomhagen]

Using the Text component around the string works on Android. On iOS the gradient wasn't rendered, I'm not sure if it was due to this change.

<LinearTextGradient
  style={{ fontWeight: 'bold', fontSize: 72 }}
  locations={[0, 1]}
  colors={['red', 'blue']}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 0 }}
>
  <Text>THIS IS TEXT GRADIENT</Text>
</LinearTextGradient>

DO YOU HAVE ANY UPDATE ON THIS ? I still face this problem exactly as you said

[kevinpiske]

@tomhagen,

I abandoned the gradient texts, but you can try other approaches. You can use the react-native-svg or react-native-masked-view libraries. You can also directly use an image with the gradient text.

https://github.com/react-native-community/react-native-svg https://github.com/react-native-community/react-native-masked-view