noReactNativeRawText

Esta página aún no está disponible en tu idioma.

JSX and TSX

Summary

Diagnostic Category: lint/nursery/noReactNativeRawText
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- reactNative
Sources:
- Same as react-native/no-raw-text

How to configure

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

Description

Disallow raw text outside <Text> components in React Native.

In React Native, every string rendered in the UI must be wrapped in a <Text> component. Rendering text directly inside containers such as <View> throws at runtime on native platforms.

By default, the following element names are treated as valid text containers: Text, TSpan, StyledText, and Animated.Text. Additional components can be whitelisted through the skip option.

Examples

Invalid

1
<View>some text</View>

code-block.jsx:1:7 lint/nursery/noReactNativeRawText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Raw text (some text) cannot be used outside of a <Text> tag.
  
  > 1 │ <View>some text</View>
      │       ^^^^^^^^^
    2 │ 
  
  ℹ In React Native, strings must be rendered within a <Text> component, otherwise the application throws at runtime.
  
  ℹ Wrap the text in a <Text> component, or add the containing component to the skip option.
  
  ℹ 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.

1
<View>{'some text'}</View>

code-block.jsx:1:7 lint/nursery/noReactNativeRawText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Raw text (some text) cannot be used outside of a <Text> tag.
  
  > 1 │ <View>{‘some text’}</View>
      │       ^^^^^^^^^^^^^
    2 │ 
  
  ℹ In React Native, strings must be rendered within a <Text> component, otherwise the application throws at runtime.
  
  ℹ Wrap the text in a <Text> component, or add the containing component to the skip option.
  
  ℹ 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.

1
const text = 'some text';
2
<View>{`${text}`}</View>

code-block.jsx:2:7 lint/nursery/noReactNativeRawText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Raw text (TemplateLiteral: text) cannot be used outside of a <Text> tag.
  
    1 │ const text = ‘some text’;
  > 2 │ <View>{`${text}`}</View>
      │       ^^^^^^^^^^^
    3 │ 
  
  ℹ In React Native, strings must be rendered within a <Text> component, otherwise the application throws at runtime.
  
  ℹ Wrap the text in a <Text> component, or add the containing component to the skip option.
  
  ℹ 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
<View><Text>some text</Text></View>

1
<View><Text>{'some text'}</Text></View>

Options

`skip`

An array of additional component names that are allowed to contain raw text.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noReactNativeRawText": {
6
          "options": {
7
            "skip": [
8
              "Title"
9
            ]
10
          }
11
        }
12
      }
13
    }
14
  }
15
}

1
const Title = ({ children }) => <Text>{children}</Text>;
2
<Title>This is the title</Title>;