useReactNativePlatformComponents

JavaScript (and super languages)

Summary

Rule available since: v2.4.13
Diagnostic Category: lint/nursery/useReactNativePlatformComponents
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- reactNative
Sources:
- Inspired from react-native/split-platform-components

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useReactNativePlatformComponents": "error"
6
      }
7
    }
8
  }
9
}

Description

Ensure that platform-specific React Native components are only imported in files named for that platform.

Some React Native components only work on one platform. For example, ProgressBarAndroid is Android-only and ActivityIndicatorIOS is iOS-only. These components should live in files with a matching platform suffix such as .android.js or .ios.js, so the React Native bundler can ship the right code to each platform.

This rule reports an error when a platform-specific component is imported in a file that does not have the matching suffix, or when both Android and iOS components are imported in the same file.

Examples

Invalid

Importing an Android component in a non-Android file:

1
import { ProgressBarAndroid } from "react-native";

code-block.js:1:10 lint/nursery/useReactNativePlatformComponents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Android component ProgressBarAndroid is used outside of an Android-specific file.
  
  > 1 │ import { ProgressBarAndroid } from “react-native”;
      │          ^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Platform-specific components produce incorrect bundles when imported in shared files.
  
  ℹ Move this import to a file with an Android-specific suffix (e.g. .android.js).
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Importing an iOS component in a non-iOS file:

1
import { ActivityIndicatorIOS } from "react-native";

code-block.js:1:10 lint/nursery/useReactNativePlatformComponents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ iOS component ActivityIndicatorIOS is used outside of an iOS-specific file.
  
  > 1 │ import { ActivityIndicatorIOS } from “react-native”;
      │          ^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Platform-specific components produce incorrect bundles when imported in shared files.
  
  ℹ Move this import to a file with an iOS-specific suffix (e.g. .ios.js).
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
import { View } from "react-native";

Options

`androidPathPatterns`

A list of glob patterns to identify Android-specific files.

Default: ["**/*.android.{js,jsx,ts,tsx}"]

In the following example, Android files use .droid.jsx as their suffix instead of the default .android.js:

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useReactNativePlatformComponents": {
6
          "options": {
7
            "androidPathPatterns": [
8
              "**/*.droid.jsx"
9
            ]
10
          }
11
        }
12
      }
13
    }
14
  }
15
}

1
import { ProgressBarAndroid } from "react-native";

1
import { ProgressBarAndroid } from "react-native";

/Button.android.jsx:1:10 lint/nursery/useReactNativePlatformComponents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Android component ProgressBarAndroid is used outside of an Android-specific file.
  
  > 1 │ import { ProgressBarAndroid } from “react-native”;
      │          ^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Platform-specific components produce incorrect bundles when imported in shared files.
  
  ℹ Move this import to a file with an Android-specific suffix (e.g. .android.js).
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

`iosPathPatterns`

A list of glob patterns to identify iOS-specific files.

Default: ["**/*.ios.{js,jsx,ts,tsx}"]

In the following example, iOS files use .apple.jsx as their suffix instead of the default .ios.js:

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useReactNativePlatformComponents": {
6
          "options": {
7
            "iosPathPatterns": [
8
              "**/*.apple.jsx"
9
            ]
10
          }
11
        }
12
      }
13
    }
14
  }
15
}

1
import { ActivityIndicatorIOS } from "react-native";

1
import { ActivityIndicatorIOS } from "react-native";

/Button.ios.jsx:1:10 lint/nursery/useReactNativePlatformComponents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ iOS component ActivityIndicatorIOS is used outside of an iOS-specific file.
  
  > 1 │ import { ActivityIndicatorIOS } from “react-native”;
      │          ^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Platform-specific components produce incorrect bundles when imported in shared files.
  
  ℹ Move this import to a file with an iOS-specific suffix (e.g. .ios.js).
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.