Rule to detect JSX text not in a Text component

[jer-sen]

In some components such as View, text can not be placed directly inside (it must be wrapped with a Text component).

Could you add a rule for this ? Ideally list of standard component forbidding direct use of text could be completed with a rule configuration.

[Intellicode]

Excellent idea! I'll see if I can have a go at it

[AleksandrZhukov]

Added this new rule https://github.com/Intellicode/eslint-plugin-react-native/pull/201

[lefloh]

Awesome! I was just searching for a rule like that. One question: Will this also prevent the following example:

const foo = ''
...
foo && <Component />

React Native does not evaluate foo as falsy but tries to render an empty string here.

[AleksandrZhukov]

no, this one is the only case that can't be handled or I didn't understand how 😄 just use !!foo or foo.lenght > 0 for your case

[lefloh]

Yes, I know. Problem is to not forget about that while writing code... Would be great if eslint could remind you ;) Thanks anyways!

[dantman]

Needs the ability to configure it. i.e. So you can add 'CustomStyledText' to valid text nodes if you use a Text wrapper to provide standardized text styles through your app.

Sadly even with that this quickly falls apart for me because I use styled.Text a lot to provide locally styled Text components. And there are a few outliers like react-native-paper providing a <Button> that accepts text.

[AleksandrZhukov]

can you provide a code example?

yeah, seems this rule doesn't support styled components, but need to investigate

[dantman]

Styled example:

const ContentText = styled.Text`
	${material.body1Object}
	color: ${colors.primaryText};
`;

Example of a "standard" <Text> wrapper: https://github.com/material-native/material-native/blob/master/src/MaterialText.js

<MaterialText body1>Foo</MaterialText>

Or a port of MUI's Typography: https://material-ui.com/style/typography/

[AleksandrZhukov]

@dantman Fixed here https://github.com/Intellicode/eslint-plugin-react-native/pull/205

PS. Quite funny that you call your library as standard 😄

[dantman]

Standardized within an app, anyone can make their own with the typography rules for their app. That's just an example of an old one I made to wrap Text with Material Design typography classes.

[asmeikal]

#205 only works with styled components if the styled Text component is called StyledText, does not work if several StyledText are defined, unless each of them is skipped...

[the0ffh]

@dantman Fixed here #205

PS. Quite funny that you call your library as standard 😄

Quite funny that you call it a fix 😄

[pagkt2]

Awesome! I was just searching for a rule like that. One question: Will this also prevent the following example:

const foo = ''
...
foo && <Component />

React Native does not evaluate foo as falsy but tries to render an empty string here.

I am using eslint-plugin-jsx-expressions to manage this issue. Cf. https://github.com/yannickcr/eslint-plugin-react/issues/2073#issuecomment-945025341