no-raw-text doesn't work for custom styled components

[vjsingh]

Unless I'm doing something wrong, the no-raw-text rule doesn't seem to work when using styled-components. This makes it largely useless I think? Would be nice to be able to use this rule but not sure how to do so when using styled-components.

import styled from 'styled-components/native';

let view = () => (
  <MyText>This doesn't work</MyText>
);

const MyText = styled(Text)`
  font-size: 16;
`;

[LauraBeatris]

Same problem... My codebase is using a lot of Typograph components made with styled-components and unfortunately, I had to disable this rule

[adibas03]

+1

[adibas03]

First, @vjsingh You should rename the issue to 'no-raw-text doesn't work for custom styled components', as the rule actually works, but not for custom components.

Been doing some investigation into what it would take to implement this. At present, I am yet to get a direct reference to the type of StyledComponent from within the babel nodes which are passed into the rule checking function; only the Customized name of the component show up, so far. If anyone has some pointers or comment, that could help, I'd appreciate, so I can set up a PR, to fix this, once and for all

Previous issue: https://github.com/Intellicode/eslint-plugin-react-native/issues/204 Feature PR https://github.com/Intellicode/eslint-plugin-react-native/pull/201

[mattpetrie]

Also running into this. One possible option to fix it would be to change the skip option to accept a regex instead of (or in addition to) an array of strings, so that you could do, for example:

'react-native/no-raw-text': ['error', {skip: '/Text$/'}]

to skip any component that is suffixed with Text.

[adibas03]

@mattpetrie That is actually a valid suggestion, we just need to consider the possible loopholes or drawbacks I was attempting to identify the styled -component component type, but not been able to get it from the babel generated resource for the lint checks

[fredlemieux]

/Text$/

This does not work for me. I.e. I have a styled component called <SummaryText> if I add skip: ['SummaryText'] the error goes away so the rule is working. But /Text$/ doesn't work (nor did /^Text/ work for <TextSummary>). I've also tried does variations on this, ie. /Text.*/ /.Text../ Any suggestions?

This is the rule I have: 'react-native/no-raw-text': ['error', { skip: ['/Text$/'] }], I've also tried without the array.

Thanks in advance, sorry if I'm missing something simple.

[ManAnRuck]

RegEx does not work for me with version: v3.10.0 String does work

[bombillazo]

Regex isnt implemented, @mattpetrie was simply giving a suggestion.

[janpe]

Hi. How are you all currently working around this problem?

[PauloLuan]

Hi. How are you all currently working around this problem?

You need to put the same tag name as the one you're using in the code, without the regex, something like:

// your styled components:
const Text = styled.Text``
const AnotherText = styled.Text``

// your rule:
'react-native/no-raw-text': [
          'error',
          {
            skip: [
              'Text',
              'AnotherText'
            ],
          },
        ],