Intellicode / eslint-plugin-react-native

React Native plugin for ESLint
MIT License
722 stars 130 forks source link

no raw text rule fail #266

Closed tomdyqin closed 4 years ago

tomdyqin commented 4 years ago
{
  code: `
    export default class MyComponent extends Component {
      render() {
        const styles = StyleSheet.create({})
        return (<View>
          <Text>text1</Text>
          <Text style={styles.a}>text2</Text>
        </View>);
      }
    }
  `,
},

this is my test code, line text1 is ok, but text2 use style props is fail 1

Intellicode commented 4 years ago

Did this happen after the latest release?

alexisbronchart commented 4 years ago

Did this happen after the latest release?

Same issue here. Indeed after upgrading to 3.9.0

adrianocola commented 4 years ago

This seems to be related with #247 .

This PR was created to allow components that use dot notation to work (ie: Animated.Text). This rule works by checking if the component name is in a list of allowed components that can contain text. But the function used to get the component name now is also appending the prop names to the component name.

This happens in this function: https://github.com/Intellicode/eslint-plugin-react-native/blob/886999a1d3b068a32fc273b08dbef3fcad713a08/lib/rules/no-raw-text.js#L10-L24

Changing this section fixes the problem:

      traverse(element, {
        JSXIdentifier({ node: identifier }) {
          if (identifier.parent.type === 'JSXOpeningElement' || identifier.parent.type === 'JSXMemberExpression') {
            identifiers.push(identifier.name);
          }
        },
      }, scope);

I'll make some more tests and send a new PR to fix this issue.