no-raw-text does not properly consider Animated.Text

[holden-caulfield]

The following code:

<Animated.Text>Some Text</Animated.Text>

Triggers this error:

 error  Raw text Some Text cannot be used outside of a <Text> tag  react-native/no-raw-text

This should not create an error as Animated.Text is a Text tag

[ahartzog]

You can add this to your .eslintrc for a short term fix @holden-caulfield

'react-native/no-raw-text': [
2,
{
skip: ['H1', 'H2', 'H3', 'Animated.Text'],
},
],

I use NativeBase so the h1, h2, h3 also fit this

I agree the rule needs to be adjusted to fix these by default rather than needing the skip setup though.

[holden-caulfield]

Thanks!!

[Intellicode]

I think the issue should be relatively easy to fix, so if anyone wants to give it a shot :)

[ahartzog]

PR is up. I also considered adding the H1, H2, H3 tags but since those are library specific I wasn't sure if it would be appropriate.

#226

[njdancer]

I know this change has already been merged so maybe this should be brought up in a new issue but, am I the only one who would like some kind of wildcard matching?

Ideally I'd like an option to suppress errors if the component name ends with Text. There are a number of places in my code where I will use styled to create various Text components with different styling. The names can vary but generally always end with Text. There may be reasons why this shouldn't be the default behaviour but as an opt-in I can't see it causing any pain. Another option would be to allow regex to be passed to skip.

Happy to have a look at implementing this if it's likely to get merged.

[bmitchinson]

The above merge should be reverted. See comments of the PR, it was never actually fixed.

[fmorau]

You can add this to your .eslintrc for a short term fix @holden-caulfield

'react-native/no-raw-text': [
2,
{
skip: ['H1', 'H2', 'H3', 'Animated.Text'],
},
],

I use NativeBase so the h1, h2, h3 also fit this

I agree the rule needs to be adjusted to fix these by default rather than needing the skip setup though.

Does not work for me.

"react-native/no-raw-text": [
      2, 
      { 
        "skip": [
          "Button", 
          "Link", 
          "NButton",
          "H1", "H2", "H3",
          "Animated.Text",
        ]
      } 
    ],

[alexbchr]

I have a similar issue, I have a custom component called List.Item and even if I add it to the skip list it still triggers an error.

I have plenty of other components in there, and working well with this rule, however none of them has a . separator.

[AZatsepa]

In my case, with

<BodyText style={styles.resultText}>
      Your phone needed&nbsp;
      <Text style={styles.hilight}>{roundsNumber}</Text>
      &nbsp;rounds to guess the number&nbsp;
      <Text style={styles.hilight}>{userNumber}</Text>
    </BodyText>

I used

"react-native/no-raw-text": [
            2,
            {
                "skip": [
                    "BodyText",
                    "BodyText.Text.Text"
                ]
            }
        ],

And it worked OK.

[bombillazo]

Any update on this Issue? I'm using react-native-paper and the rule fails when using the Button component:

<Button
        mode="outlined"
        onPress={() => props.navigation.navigate('SignUp')}
        color={COLORS.primaryGreen}
        style={[styles.button, { borderColor: COLORS.primaryGreen, borderWidth: 3, backgroundColor: COLORS.white }]}
      >
        Sign Up
</Button>

error:
ESLint: Couldn't find a Program Occurred while linting /home/user/project-repo/src/screens/SignInScreen.js:57. Please see the 'ESLint' output channel for details.

I add this to the eslint rules to no avail:

'react-native/no-raw-text': [
      2,
      {
        skip: [ 'Button',  'Button.Text' ]
      }
    ],

[merrywhether]

I hit a similar Couldn't find a Program error and it appears to be triggered when I add an anonymous function as a prop value to my skip-listed components (which I see @bombillazo also had in onPress).

For example:

// eslintjs
{ skip: [ 'MyCoolButton'] }

// JSX

<MyCoolButton>This works</MyCoolButton>
<MyCoolButton onPress={onPress}>This also works</MyCoolButton>
<MyCoolButton onPress={() => { onPress() }}>This errors</MyCoolButton>

The first two variations work fine, but the third one errors. It seems like the lint rule may not be accounting for some valid AST variations in its logic?

[KilianB]

@merrywhether this case should be covered here #270