Search code examples
javascripttypescriptreact-nativeeslintreact-native-stylesheet

How to disallow StyleSheet creation in ESLint?


For certain folders I would like to enable StyleSheet.create() whereas for other folder I would like to disallow them.

Now I figured out how to override ESLint rules per folder, but how do I disallow StyleSheet.create()?


Solution

  • A way that I used is to restrict the import of StyleSheet. It is even possible to provide a message with the ESLint warning.

    enter image description here

    "no-restricted-imports": ["warn", {
      "paths": [
        {
          "name": "react-native",
          "importNames": ["StyleSheet"],
          "message": "Please import StyleSheet only in *.styles.ts files within the components folder."
        }
      ],
    }],
    

    Then for the override:

    overrides: [
      {
        files: [
          'app/components/**/*.styles.ts',
        ],
        rules: {
          "no-restricted-imports": ["error", {}]
        }
      }
    ],