Crashing when using style prop that is a string

Here is the crashing error:

ESLint: 7.20.0
TypeError: Cannot read property 'type' of undefined
Occurred while linting /myuser/myapp/src/screens/Walkthrough.tsx:82
    at JSXAttribute (/myuser/myapp/node_modules/eslint-plugin-react-native/lib/rules/no-single-element-style-arrays.js:40:35)
    at /myuser/myapp/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/myuser/myapp/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/myuser/myapp/node_modules/eslint/lib/linter/node-event-generator.js:256:26)
    at NodeEventGenerator.applySelectors (/myuser/myapp/node_modules/eslint/lib/linter/node-event-generator.js:285:22)
    at NodeEventGenerator.enterNode (/myuser/myapp/node_modules/eslint/lib/linter/node-event-generator.js:299:14)
    at CodePathAnalyzer.enterNode (/myuser/myapp/node_modules/eslint/lib/linter/code-path-analysis/code-path-analyzer.js:711:23)
    at /myuser/myapp/node_modules/eslint/lib/linter/linter.js:954:32
    at Array.forEach (<anonymous>)

This is caused because the StatusBar component from Expo has a style prop that can be auto, inverted, light, or dark. Here is the snippet where is crashing:

<StatusBar style="light" backgroundColor={COLORS.PRIMARY[500]} animated />

This, is not:

<StatusBar style={"light"} backgroundColor={COLORS.PRIMARY[500]} animated />

[Intellicode]

@AlanSl, just made a release, hope it works! If it breaks let me know.

[andre-m5v]

As a temporary workaround you could assign the style string to a variable:

const statusBarStyle = 'light';

and then use that as your style:

<StatusBar style={ statusBarStyle } />

This will prevent eslint from crashing. Then ofc you will get the react/style-prop-object rule error, but you can fix this by adding StatusBar as an exception in your rules.