no-raw-text fails on line breaks

[jasonschock]

I don't expect no-raw-text to fail in this case according to the tests, but it does for me.

import React from "react";
import { View, Text } from "react-native";

export default class Test extends React.Component {
  constructor() {
    super();
    this.state = {};
  }

  render() {
    return (
      <View>
        <Text>Some text.</Text>
      </View>
    );
  }
}

Run eslint:

/myproject/src/components/Test.js
  12:13  error  Whitespace(s) cannot be used outside of a <Text> tag  react-native/no-raw-text
  13:40  error  Whitespace(s) cannot be used outside of a <Text> tag  react-native/no-raw-text

It's specifically complaining at the line endings. 🤔

Ideas? Editor line endings are \n. Here's the relevant config:

.eslintrc

{
  "parserOptions": {
    "ecmaVersion": 2018,
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": [
    "react",
    "react-native",
    "prettier"
  ],
  "env": {
    "react-native/react-native": true
  },
  "extends": [
    "airbnb",
    "plugin:react-native/all",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": "error",
    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }]
  }
}

package.json:

{
  "name": "empty-project-template",
  "main": "./index.js",
  "private": true,
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject",
    "prettier": "prettier src/{,**/}*.js --write",
    "eslint": "eslint src/"
  },
  "dependencies": {
    "expo": "^30.0.1",
    "prop-types": "^15.6.2",
    "react": "16.3.1",
  },
  "devDependencies": {
    "eslint": "^5.9.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^3.3.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-prettier": "^3.0.0",
    "eslint-plugin-react": "^7.11.1",
    "eslint-plugin-react-native": "^3.5.0",
    "prettier": "^1.15.3"
  }
}

Thanks!

[AleksandrZhukov]

will check it

[donovanhiland]

I'm getting the same thing. Something I can do to help look at this?

[gxsshallot]

+1

[donovanhiland]

#208 dupe?

[AleksandrZhukov]

@jasonschock @donovanhiland can't reproduce the issue 😞 can you create a gist with your code?

[jdrorrer]

I'm seeing this same issue. It looks like it's related to: https://github.com/Intellicode/eslint-plugin-react-native/issues/208

[AleksandrZhukov]

@jdrorrer pls describe your environment

[donovanhiland]

I’ll see if I can get a repo up today with the issue

[donovanhiland]

@AleksandrZhukov https://github.com/donovanhiland/eslint-plugin-react-native-210

yarn install
yarn test

should give you the errors

  25:38  error  Raw text (this is bad) cannot be used outside of a <Text> tag  react-native/no-raw-text
  27:69  error  Whitespace(s) cannot be used outside of a <Text> tag           react-native/no-raw-text
  28:78  error  Whitespace(s) cannot be used outside of a <Text> tag           react-native/no-raw-text
  29:64  error  Whitespace(s) cannot be used outside of a <Text> tag           react-native/no-raw-text

The first is expected, the other 3 is the issue

[AleksandrZhukov]

@donovanhiland thanks a lot, your repo was very useful PR with fix is here https://github.com/Intellicode/eslint-plugin-react-native/pull/220

[AleksandrZhukov]

@Intellicode can you create a new release? 🙏

[Intellicode]

@AleksandrZhukov done, sorry for the wait, but had to fix npm audit issues :)

[st-sloth]

@AleksandrZhukov thank you for the fix! As of 3.7.0, the rule works just fine. It seems that this issue can be closed?

[AleksandrZhukov]

seems you're right, it can be closed

[se22as]

I am having the same issue with my application which is not using typescript. I am using ".js" file extensions for all my components. I am on eslint-plugin-react-native version 3.8.1

package.json

devDependencies": { "@babel/core": "7.9.6", "@babel/runtime": "7.9.6", "@react-native-community/eslint-config": "0.0.5", "babel-jest": "24.9.0", "eslint": "^6.8.0", "eslint-config-airbnb": "^18.1.0", "eslint-plugin-import": "^2.20.2", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.20.0", "eslint-plugin-react-hooks": "^2.5.1", "eslint-plugin-react-native": "^3.8.1", "jest": "24.9.0", "metro-react-native-babel-preset": "0.58.0", "react-test-renderer": "16.11.0" },

eslintrc.json

{ "env": { "react-native/react-native": true, "browser": true, "es6": true }, "extends": [ "airbnb", "plugin:react-native/all", "plugin:react/recommended" ], "globals": { "Atomics": "readonly", "SharedArrayBuffer": "readonly" }, "parserOptions": { // .jsx extension cannot be used with React Native //"ecmaFeatures": { // "jsx": true //}, "ecmaVersion": 11, "sourceType": "module" }, "plugins": [ "react", "react-native" ], "rules": { "no-console": "off", // .jsx extension cannot be used with React Native // https://github.com/airbnb/javascript/issues/982 "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }]
} }

Component: Welcome.js

const Welcome = () => ( <View> <Text>Hello</Text> <Text>How are you</Text>
</View> );

It complains with "Whitespace(s) cannot be used outside of a <Text> tag" on every line. I should be permitted to have different elements on different lines not everything on one line.