Add Animated.Text to allowed rules list

[ahartzog]

No description provided.

[ahartzog]

PR for #225

[Intellicode]

Thanks @ahartzog!

[mjmasn]

@Intellicode @ahartzog this doesn't seem to work for me, looks like elementName(node) is always returning false for <X.Y>Text</X.Y> but works fine for names without a dot e.g. <X>Text</X>. Any ideas? Have tried with my own components as well as Animated.Text and eslint still marks it as an error.

[ahartzog]

Aww shucks. I left my rule in my .eslintrc in place, which I why I thought it worked when I tested it. I am ashamed.

Confirmed that this does not work as intended, thanks @mjmasn. I'll try to look into solutions today, but nothing is readily apparent. Maybe some sort of string includes rule instead of a strict comparison?

[mjmasn]

@ahartzog what I'm not really understanding is why <X> is named X but <X.Y> doesn't have a name. Is that likely to be a babel/JSX bug?

[mjmasn]

Would something like this (edit: but with some recursion for <X.Y.Z /> type components) work to replace https://github.com/Intellicode/eslint-plugin-react-native/blob/master/lib/rules/no-raw-text.js#L11-L16?

const elementName = node => {
  if (node.openingElement && node.openingElement.name) {
    if (node.openingElement.name.type === 'JSXIdentifier') {
      return node.openingElement.name.name    
    } else if (node.openingElement.name.type === 'JSXMemberExpression' && node.openingElement.name.object.name && openingElement.name.property.name) {
      return `${node.openingElement.name.object.name}.${node.openingElement.name.property.name}`;
    }
  }
};

Based on my (limited) understanding of this AST for the code:

// @flow
const React = require('react');
const {Animated} = require('react-native');

class Test extends React.Component {
  render() {
    return <Animated.Text>XXX</Animated.Text>;
  }
}

Partial AST:

{
  "type": "ReturnStatement",
  "start": 140,
  "end": 182,
  "loc": {"start": {"line": 7, "column": 4}, "end": {"line": 7, "column": 46}},
  "argument": {
    "type": "JSXElement",
    "start": 147,
    "end": 181,
    "loc": {"start": {"line": 7, "column": 11}, "end": {"line": 7, "column": 45}},
    "openingElement": {
      "type": "JSXOpeningElement",
      "start": 147,
      "end": 162,
      "loc": {"start": {"line": 7, "column": 11}, "end": {"line": 7, "column": 26}},
      "name": {
        "type": "JSXMemberExpression",
        "start": 148,
        "end": 161,
        "loc": {"start": {"line": 7, "column": 12}, "end": {"line": 7, "column": 25}},
        "object": {
          "type": "JSXIdentifier",
          "start": 148,
          "end": 156,
          "loc": {"start": {"line": 7, "column": 12}, "end": {"line": 7, "column": 20}},
          "name": "Animated"
        },
        "property": {
          "type": "JSXIdentifier",
          "start": 157,
          "end": 161,
          "loc": {"start": {"line": 7, "column": 21}, "end": {"line": 7, "column": 25}},
          "name": "Text"
        }
      },
      "attributes": [],
      "selfClosing": false
    },
    "closingElement": {
      "type": "JSXClosingElement",
      "start": 165,
      "end": 181,
      "loc": {"start": {"line": 7, "column": 29}, "end": {"line": 7, "column": 45}},
      "name": {
        "type": "JSXMemberExpression",
        "start": 167,
        "end": 180,
        "loc": {"start": {"line": 7, "column": 31}, "end": {"line": 7, "column": 44}},
        "object": {
          "type": "JSXIdentifier",
          "start": 167,
          "end": 175,
          "loc": {"start": {"line": 7, "column": 31}, "end": {"line": 7, "column": 39}},
          "name": "Animated"
        },
        "property": {
          "type": "JSXIdentifier",
          "start": 176,
          "end": 180,
          "loc": {"start": {"line": 7, "column": 40}, "end": {"line": 7, "column": 44}},
          "name": "Text"
        }
      }
    },
    "children": [
      {
        "type": "JSXText",
        "start": 162,
        "end": 165,
        "loc": {"start": {"line": 7, "column": 26}, "end": {"line": 7, "column": 29}},
        "extra": {"rawValue": "XXX", "raw": "XXX"},
        "value": "XXX"
      }
    ]
  }
}

[fmorau]

@mjmasn what should I do then for "Animated.x" components ?)

[Intellicode]

@ahartzog Any chance you could fix this or shall we revert the PR due to the reported issues?