[RFC]: remove no-raw-text rule

[pierrezimmermannbam]

Why?

The first reason is that I find this rule useless. For instance, this isn't caught:

const name = 'toto';

return (<View>{name}<View/>);

The only cases that would be caught are the following:

<View>{`${variable} ${variable2}`}</View>
<View> . </View>

The thing is your app will crash instantly if you do that and we never do that. The only case where it would be useful is when you do (number that could be 0) && in JSX but this doesn't catch it either. Personally I have never seen this rule be useful. Usually this rule only errors in cheatcodes where you don't translate stuff which is not great.

The second reason is that it's a pain to maintain. If it just did nothing it would be fine. For each component that returns a Text, you have to config the rule so that it allows that component:

'react-native/no-raw-text': ['error', { skip: ['Typography.Title'] }],

So it breaks very often and you always have to update the config, which may not be easy to do if you haven't heard about this rule before. I have stopped counting how many andons I have received because of this rule.

If you use emotion you could also have problems if you rename stuff, like

const Label = styled(Typography.P1Regular)

<Label>{`${variable} ${variable2}`}</Label>

What do you do then, eslint-ignore? Or add Label to the config even though it's just used once?

So overall I find this rule adds very little if no value and is quite costly to maintain, therefore I propose to remove it from the eslint plugin (both from recommended and from every selection)

Rule Documentation 📜

https://github.com/Intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-raw-text.md

Config Selection 🛠

recommended

(Optional) Additional Details 📝

No response