React native 0.60.5 version error

[ewu-tarun]

@iyegoroff, When I used the react-native-text-gradient library. it shows this error "Text strings must be rendered within a component". it was working fine in the previous react-native version library. when I update the react-native version it shows this error. note I run the patch-rn.js command.

[iyegoroff]

When I used rntg last time - my rn version was 0.59.10. So there is a chance that patch-rn.js script will fail to patch latest versions of react native sources.

[imimoises]

not working for me either, It says "Text strings must be rendered within a component"

yet If I don't include a text string as children in the component, it says "No component found for view with name "RNLinearTextGradient""

[ewu-tarun]

@iyegoroff is there any possibility to update this library?

[iyegoroff]

@TarunDas005, sure! If you have fixed this issue for yourself - you can submit a PR to this repo.

[karengharibyan]

create js file , put this inside

#!/usr/bin/env node

const { writeFile, readFile, readdir } = require('fs');
const { promisify } = require('util');
const path = require('path');

const folder = 'node_modules/react-native/Libraries/Renderer/oss/';

const pattern = new RegExp(
'throw ReactError'+
'\('+'[\s\S]{0,20}' +
'"Text strings must be rendered within a component\."[\s\S]{0,20}' +
'\)[;,]'
);

const patchFile = async (file) => {
const content = (await promisify(readFile)(file)).toString();
const patched = content.replace(pattern,'');
await promisify(writeFile)(file, patched);
};

const patchAll = async () => {
const files = await promisify(readdir)(folder);
await Promise.all(files.map(file => path.join(folder, file)).map(patchFile));
};

patchAll();

and run

[pragneshpj]

same error in 60.5.
this package is working properly before.
@iyegoroff can you please update package with rn 60.5

[ChrisCodeCole]

create js file , put this inside

#!/usr/bin/env node

const { writeFile, readFile, readdir } = require('fs');
const { promisify } = require('util');
const path = require('path');

const folder = 'node_modules/react-native/Libraries/Renderer/oss/';

const pattern = new RegExp(
'throw ReactError'+
'('+'[\s\S]{0,20}' +
'"Text strings must be rendered within a component."[\s\S]{0,20}' +
')[;,]'
);

const patchFile = async (file) => {
const content = (await promisify(readFile)(file)).toString();
const patched = content.replace(pattern,'');
await promisify(writeFile)(file, patched);
};

const patchAll = async () => {
const files = await promisify(readdir)(folder);
await Promise.all(files.map(file => path.join(folder, file)).map(patchFile));
};

patchAll();

and run

It does look like the patch needs to be updated with rn 60.0+ since all the files in this directory did get updated (node_modules/react-native/Libraries/Renderer/oss/)

This patch posted here didn't work for me, the regex doesn't match. The regex string should include at least a "<Text>" in it. I tried looking at it for awhile and couldn't get the regex to match so that I can update these files. I also haven't used NodeJS so I'm wondering if there is a better way.

Pattern I was using that doesn't work below:
const pattern = new RegExp(
'throw ReactError'+
'([\s\S]{0,20}' +
'"Text strings must be rendered within a <Text> component."[\s\S]{0,20}' +
')[;,]'
);

Example of string I'm trying to match below:
throw ReactError(
"Text strings must be rendered within a <Text> component."
);

Edit: I see now that you have to escape the < with a "\" in GitHub for the text to be visible, so <Text> was probably included in the patch mentioned above at some point. Maybe there were other escaped characters missing in that post?

[L-x-C]

create js file , put this inside

#!/usr/bin/env node

const { writeFile, readFile, readdir } = require('fs');
const { promisify } = require('util');
const path = require('path');

const folder = 'node_modules/react-native/Libraries/Renderer/oss/';

const pattern = new RegExp(
'throw ReactError'+
'('+'[\s\S]{0,20}' +
'"Text strings must be rendered within a component."[\s\S]{0,20}' +
')[;,]'
);

const patchFile = async (file) => {
const content = (await promisify(readFile)(file)).toString();
const patched = content.replace(pattern,'');
await promisify(writeFile)(file, patched);
};

const patchAll = async () => {
const files = await promisify(readdir)(folder);
await Promise.all(files.map(file => path.join(folder, file)).map(patchFile));
};

patchAll();

and run

there is no oss/ in RN 0.61.1

[ChrisCodeCole]

create js file , put this inside
#!/usr/bin/env node
const { writeFile, readFile, readdir } = require('fs');
const { promisify } = require('util');
const path = require('path');
const folder = 'node_modules/react-native/Libraries/Renderer/oss/';
const pattern = new RegExp(
'throw ReactError'+
'('+'[\s\S]{0,20}' +
'"Text strings must be rendered within a component."[\s\S]{0,20}' +
')[;,]'
);
const patchFile = async (file) => {
const content = (await promisify(readFile)(file)).toString();
const patched = content.replace(pattern,'');
await promisify(writeFile)(file, patched);
};
const patchAll = async () => {
const files = await promisify(readdir)(folder);
await Promise.all(files.map(file => path.join(folder, file)).map(patchFile));
};
patchAll();
and run

there is no oss/ in RN 0.61.1

You're correct. The files that are being used to throw the text string error are within "node_modules\react-native\Libraries\Renderer\implementations" now in 0.61. I'm still not able to find the error with the regex.

[L-x-C]

create js file , put this inside
#!/usr/bin/env node
const { writeFile, readFile, readdir } = require('fs');
const { promisify } = require('util');
const path = require('path');
const folder = 'node_modules/react-native/Libraries/Renderer/oss/';
const pattern = new RegExp(
'throw ReactError'+
'('+'[\s\S]{0,20}' +
'"Text strings must be rendered within a component."[\s\S]{0,20}' +
')[;,]'
);
const patchFile = async (file) => {
const content = (await promisify(readFile)(file)).toString();
const patched = content.replace(pattern,'');
await promisify(writeFile)(file, patched);
};
const patchAll = async () => {
const files = await promisify(readdir)(folder);
await Promise.all(files.map(file => path.join(folder, file)).map(patchFile));
};
patchAll();
and run

there is no oss/ in RN 0.61.1

You're correct. The files that are being used to throw the text string error are within "node_modules\react-native\Libraries\Renderer\implementations" now in 0.61. I'm still not able to find the error with the regex.

const pattern = new RegExp(
  'throw ReactError[\\s\\S]{0,80}Text strings must be rendered within a <Text> component[\\s\\S]{0,80}[^()]\\)[;,]'
, 'gm');

this will work!

[ChrisCodeCole]

thanks, that did it for me :D. hopefully they add in the fix some day to the actual react native project..

[ChrisCodeCole]

@L-x-C had to change the replace function a bit, since it worked in development but not release..
going to put this here in case someone else comes across this issue:

const patched = content.replace(pattern,() => {
        //dev files just need an empty string
        //every other file (production & profiling) needs {} to scope IF statements in order to work
        const fileRegEx = new RegExp('dev');
        
        if(fileRegEx.test(file))
            return ''
        else
            return '{}';
    });

[anagar23]

@L-x-C , @ChrisCodeCole I tried the solution but it doesn't work.

[Suraj-Tiwari]

solutions are divided in multiple comments, so here is a complete solution thanks to @ChrisCodeCole and @L-x-C

i'm on react-native v0.61.2 that's why my directory path is :
node_modules/react-native/Libraries/Renderer/implementations/
for older versions it's :
node_modules/react-native/Libraries/Renderer/oss/

#!/usr/bin/env node

const {writeFile, readFile, readdir} = require('fs');
const {promisify} = require('util');
const path = require('path');

const folder = 'node_modules/react-native/Libraries/Renderer/implementations/';

const pattern = new RegExp(
    'throw ReactError[\\s\\S]{0,80}Text strings must be rendered within a <Text> component[\\s\\S]{0,80}[^()]\\)[;,]'
    , 'gm');

const patchFile = async (file) => {
    const content = (await promisify(readFile)(file)).toString();
    const patched = content.replace(pattern, () => {
        const fileRegEx = new RegExp('dev');
        if (fileRegEx.test(file))
            return '';
        else
            return '{}';
    });
    await promisify(writeFile)(file, patched);
};

const patchAll = async () => {
    const files = await promisify(readdir)(folder);

    await Promise.all(files.map(file => path.join(folder, file)).map(patchFile));
};

patchAll();

[rewdt]

solutions are divided in multiple comments, so here is a complete solution thanks to @ChrisCodeCole and @L-x-C

i'm on react-native v0.61.2 that's why my directory path is :
node_modules/react-native/Libraries/Renderer/implementations/
for older versions it's :
node_modules/react-native/Libraries/Renderer/oss/

#!/usr/bin/env node

const {writeFile, readFile, readdir} = require('fs');
const {promisify} = require('util');
const path = require('path');

const folder = 'node_modules/react-native/Libraries/Renderer/implementations/';

const pattern = new RegExp(
    'throw ReactError[\\s\\S]{0,80}Text strings must be rendered within a <Text> component[\\s\\S]{0,80}[^()]\\)[;,]'
    , 'gm');

const patchFile = async (file) => {
    const content = (await promisify(readFile)(file)).toString();
    const patched = content.replace(pattern, () => {
        const fileRegEx = new RegExp('dev');
        if (fileRegEx.test(file))
            return '';
        else
            return '{}';
    });
    await promisify(writeFile)(file, patched);
};

const patchAll = async () => {
    const files = await promisify(readdir)(folder);

    await Promise.all(files.map(file => path.join(folder, file)).map(patchFile));
};

patchAll();

This is not working for rn-0.61.4. I am now getting an error saying "No component found for view with name RNLinearTextGradient after applying the patch. Has anybody solved this ?

[vonbarnekowa]

Any updates?

[fukemy]

still got this problem with newest react native, decided to removed this lib

[KrishEnacton]

Simply you can use this

// GradientText.js
import React from 'react';
import {Text} from 'react-native';
import MaskedView from '@react-native-community/masked-view';
import LinearGradient from 'react-native-linear-gradient';

const GradientText = ({colors, ...rest}) => {
  return (
    <MaskedView maskElement={<Text {...rest} />}>
      <LinearGradient colors={colors} start={{x: 0, y: 0}} end={{x: 1, y: 0}}>
        <Text {...rest} style={[rest.style, {opacity: 0}]} />
      </LinearGradient>
    </MaskedView>
  );
};

export default GradientText;

// App.js
import React from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';
import GradientText from './GradientText';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <GradientText colors={['#cc2b5e', '#753a88']} style={styles.text}>
        GRADIENT TEXT
      </GradientText>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 35,
    fontFamily: 'Gill Sans',
    fontWeight: 'bold',
  },
});

export default App;