False positives for react-native/no-raw-text

[sudo-suhas]

What version of TypeScript are you using?
v3.1.6

What version of typescript-eslint-parser are you using?
v21.0.1

What code were you trying to parse?

import React from 'react';
import { TextInput, View } from 'react-native';

export const Foo = () => (
    <View>
        <TextInput />
    </View>
);

What did you expect to happen?
No errors should be reported. The code if formatted by prettier.

What happened?

➜ ./node_modules/.bin/eslint ./components/t.tsx

{prj_path}/components/t.tsx
  5:11  error  Whitespace(s) cannot be used outside of a <Text> tag  react-native/no-raw-text
  6:22  error  Whitespace(s) cannot be used outside of a <Text> tag  react-native/no-raw-text

✖ 2 problems (2 errors, 0 warnings)

My eslint config:

env:
  node: true
  browser: true
  es6: true
  react-native/react-native: true
parser: typescript-eslint-parser
parserOptions:
  jsx: true
extends:
  - airbnb
  - prettier
plugins:
  - prettier
  - typescript
  - react-native
settings:
  import/parser:
    typescript-eslint-parser: [ .ts, .tsx ]
  import/resolver:
    typescript: {}
  import/extensions:
    - .js
    - .jsx
    - .ts
    - .tsx
rules:
  no-console: off
  no-undef: off
  no-unused-vars: off
  no-use-before-define: [ error, { functions: true, classes: true, variables: false }]
  lines-between-class-members: [ error, always, { exceptAfterSingleLine: true } ]
  quotes: [ warn, single, { avoidEscape: true } ]
  prettier/prettier: error
  import/prefer-default-export: off
  react/jsx-filename-extension:
    - error
    - extensions:
      - .js
      - .jsx
      - .tsx
  react/jsx-indent: off
  react/jsx-indent-props: off
  react/jsx-closing-tag-location: off
  react/jsx-one-expression-per-line: off
  react/destructuring-assignment: off
  react/sort-comp:
    - error
    - order:
      - static-methods
      - type-annotations
      - instance-variables
      - lifecycle
      - "/^on.+$/"
      - getters
      - setters
      - "/^(get|set)(?!(InitialState$|DefaultProps$|ChildContext$)).+$/"
      - instance-methods
      - everything-else
      - rendering
      groups:
        lifecycle:
        - displayName
        - propTypes
        - contextTypes
        - childContextTypes
        - mixins
        - statics
        - defaultProps
        - constructor
        - getDefaultProps
        - getInitialState
        - state
        - getChildContext
        - componentWillMount
        - componentDidMount
        - componentWillReceiveProps
        - shouldComponentUpdate
        - componentWillUpdate
        - componentDidUpdate
        - componentWillUnmount
        rendering:
        - "/^render.+$/"
        - render
  # https://github.com/Intellicode/eslint-plugin-react-native#configuration
  react-native/no-unused-styles: error
  react-native/no-color-literals: error
  react-native/no-raw-text: [ error, { skip: [ RBText ] } ]
  # https://github.com/nzakas/eslint-plugin-typescript#supported-rules
  typescript/adjacent-overload-signatures: error
  typescript/class-name-casing: error
  typescript/member-ordering: error
  typescript/no-angle-bracket-type-assertion: error
  typescript/no-array-constructor: error
  typescript/no-empty-interface: error
  typescript/no-inferrable-types: error
  typescript/no-namespace: [ error, { allowDefinitionFiles: true } ]
  typescript/no-parameter-properties: error
  typescript/no-triple-slash-reference: error
  typescript/no-unused-vars: error
  typescript/no-var-requires: error
  typescript/prefer-namespace-keyword: error

I double checked and the false positives do not occur with typescript-eslint-parser@v20.1.1.

[mysticatea]

Thank you for this issue.

However, it doesn't look like an issue in this parser. Since v21.0.0, the parser creates ESLint v5 AST and I suspect that the rule doesn't support the new AST.

[sudo-suhas]

Hey @mysticatea thank you for the quick response. I was not aware of this change. Should I close this issue and follow it up with eslint-plugin-react-native? There is no possibility of handling this issue in the scope of the parser right?

[mysticatea]

I'm not 100% sure :)

Would you try useJSXTextNode: false option in parserOptions? If the option fixed this issue, my guessing is correct.

https://github.com/eslint/typescript-eslint-parser#configuration

[sudo-suhas]

Yes, on setting the parser option, there are no false positives.

[mysticatea]

Thank you!

So, please open an issue on eslint-plugin-react-native repo.
I'm closing this issue.

[sudo-suhas]

I am fairly sure I am the one who should be thanking you 😄