Quick Tip: Configure ESLint to Allow the Expo StatusBar "style" Prop

I recently started an Expo project in my Nx workspace. Unlike the Expo CLI, the @nx/expo plugin generates projects completely configured with ESLint and Prettier our of the box. As such, the style prop error I encountered may not be very common.

If you're not familiar with Nx or how it can streamline your overall development efforts, stay tuned as I will be providing a lot more information about Nx and monorepo development strategies in future articles.

The expo-status-bar package is automatically included in the app generated by Nx and I was confused when I received the following lint warning the first time I set the style prop on the StatusBar.

// warn: Style prop value must be an object eslint(react/style-prop-object)
<StatusBar style="light" animated />

First, I'm still not sure why the Expo team deviated from the standard barStyle prop name as that would have avoided the linting error altogether. Thankfully, for anyone who has encountered this lint error, the react/style-prop-object rule offers a convenient allow option that clears the warning:

"react/style-prop-object": [
  "warn",
  {
    "allow": ["StatusBar"]
  }
]

I added this override to the .eslintrc.json at the root of my Nx workspace although you could choose to configure only the specific projects that require it. My (almost) complete configuration looks like this:

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nx"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {
        ...
        "react/style-prop-object": [
          "warn",
          {
            "allow": ["StatusBar"]
          }
        ]
      }
    },
    ...
  ]
}

If you're not using Nx, your ESLint configuration may look a little different although the same concept should apply. If you're not using a linter, you should consider taking the time to configure ESLint or similar in your project. Linting offers a streamlined way to analyze your code for potential errors, enforce coding standards and best practices, and improves the overall code quality of your project.