textComponents vs rawTextWrapperComponents in react-doctor: Configuration Reference

textComponents suppresses all rn-no-raw-text rule violations for designated components unconditionally, while rawTextWrapperComponents only suppresses warnings when the component contains purely string children with no mixed JSX elements.

When configuring the rn-no-raw-text ESLint rule in millionco/react-doctor, understanding the distinction between textComponents and rawTextWrapperComponents is essential for accurate React Native linting. These two configuration arrays in your react-doctor.config.json control how the rule identifies legitimate text containers versus potentially unsafe raw text placements.

Understanding textComponents and rawTextWrapperComponents

The rn-no-raw-text rule enforces that raw strings in React Native must be wrapped in <Text> elements. However, custom components complicate this validation. According to the source code in packages/react-doctor/src/types.ts, React Doctor provides two distinct escape hatches to handle these scenarios with different levels of strictness.

textComponents: The Broad Escape Hatch

The textComponents array defines components that act as native text containers. When specified in your configuration, any component listed here is treated identically to React Native's built-in <Text> component.

In src/types.ts (lines 236-247), this option is described as the "broader escape hatch" that suppresses all rn-no-raw-text diagnostics for the specified components, regardless of what their children contain. This means nested JSX elements inside a designated text component will not trigger linting errors.

Use this for custom typography components that directly render <Text> elements internally:

// react-doctor.config.json
{
  "textComponents": ["Typography", "NativeTabs.Trigger.Label"]
}

rawTextWrapperComponents: The Conditional Wrapper

The rawTextWrapperComponents array (defined in src/types.ts, lines 38-48) serves a more specific purpose. This option identifies components that safely route string-only children through a React Native <Text> element internally, but may not handle mixed content safely.

The critical distinction implemented in the source code: suppression only occurs when the wrapper contains purely string children. If the component contains mixed children (strings alongside JSX elements), the rn-no-raw-text rule still reports a diagnostic to prevent false negatives where the wrapper cannot safely handle raw text alongside other elements.

Consider a Button component that stringifies its label before rendering:

// ✅ Suppressed - string-only child
<Button>Save</Button>

// ❌ Still reported - mixed children
<Button>
  Save <Icon />
</Button>

Implementation Details in filter-diagnostics.ts

The runtime logic that applies these rules resides in packages/react-doctor/src/utils/filter-diagnostics.ts. Lines 193-200 implement the filtering mechanism that checks component names against both configuration arrays and evaluates child content to determine whether to suppress specific diagnostics.

According to the source code, the tool differentiates between these categories to protect against false negatives: a component listed under rawTextWrapperComponents that receives mixed children cannot safely guarantee that all raw text is properly routed through a <Text> element, so the diagnostic remains active.

Configuration Best Practices

When setting up your react-doctor.config.json, follow these guidelines to target the appropriate level of suppression:

• Use textComponents for components that are text elements (like custom typography systems that always wrap content in <Text>)
• Use rawTextWrapperComponents for components that conditionally wrap text but might receive mixed content (like buttons that can contain icons alongside labels)

Complete configuration example:

{
  "textComponents": ["Typography", "Heading", "Caption"],
  "rawTextWrapperComponents": ["Button", "Badge", "Label"]
}

Summary

• textComponents provides blanket suppression of rn-no-raw-text violations for designated text container components, as defined in src/types.ts lines 236-247
• rawTextWrapperComponents offers conditional suppression only for string-only children (lines 38-48), exposing potential issues with mixed JSX content that the wrapper cannot safely handle
• The filtering logic is implemented in packages/react-doctor/src/utils/filter-diagnostics.ts (lines 193-200)
• Configure textComponents for true text elements and rawTextWrapperComponents for string-wrapping utilities that might receive mixed children

Frequently Asked Questions

Can I list the same component in both textComponents and rawTextWrapperComponents?

No, this creates overlapping logic that leads to inconsistent linting behavior. Choose textComponents if your component always renders text content safely, or rawTextWrapperComponents if it only handles string children safely. The TypeScript definitions in src/types.ts treat these as mutually exclusive categories with different validation rules applied by the filter in src/utils/filter-diagnostics.ts.

Why does my Button component still trigger rn-no-raw-text warnings after configuration?

If you have configured Button under rawTextWrapperComponents but still see warnings, verify that you are not passing mixed children. As implemented in src/utils/filter-diagnostics.ts lines 193-200, this configuration only suppresses diagnostics for string-only children. Passing JSX elements alongside strings—such as <Button>Save <Icon /></Button>—will still trigger the rule because the wrapper cannot guarantee safe text routing.

How do I handle third-party UI library components in react-doctor?

Add the specific component names from the library to the appropriate array based on their internal behavior. If the third-party component acts like a <Text> element (e.g., Typography from a design system), add it to textComponents. If it wraps text conditionally (like a Button that might contain icons), add it to rawTextWrapperComponents according to the intent definitions in src/types.ts.

What is the default behavior if I configure neither option?

React Doctor applies the rn-no-raw-text rule strictly to all components, flagging any raw text not explicitly wrapped in React Native <Text> elements or configured custom text components. This ensures maximum safety but may produce false positives for well-tested custom wrappers that safely handle text internally.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}