Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

no-raw-text fails on line breaks

See original GitHub issue

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!

Issue Analytics

State:
Created 5 years ago
Reactions:6
Comments:15 (7 by maintainers)

Top GitHub Comments

1reaction

Intellicodecommented, Apr 24, 2019

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

1reaction

donovanhilandcommented, Mar 6, 2019

@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