# textComponents vs rawTextWrapperComponents in react-doctor: Configuration Reference

> Understand the difference between textComponents and rawTextWrapperComponents in react-doctor. Learn how to configure component rules to suppress rn-no-raw-text violations.

- Repository: [Million Software, Inc./react-doctor](https://github.com/millionco/react-doctor)
- Tags: api-reference
- Published: 2026-05-12

---

**`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`](https://github.com/millionco/react-doctor/blob/main/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`](https://github.com/millionco/react-doctor/blob/main/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`](https://github.com/millionco/react-doctor/blob/main/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:

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

```

### rawTextWrapperComponents: The Conditional Wrapper

The `rawTextWrapperComponents` array (defined in [`src/types.ts`](https://github.com/millionco/react-doctor/blob/main/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:

```tsx
// ✅ 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`](https://github.com/millionco/react-doctor/blob/main/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`](https://github.com/millionco/react-doctor/blob/main/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:

```json
{
  "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`](https://github.com/millionco/react-doctor/blob/main/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`](https://github.com/millionco/react-doctor/blob/main/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`](https://github.com/millionco/react-doctor/blob/main/src/types.ts) treat these as mutually exclusive categories with different validation rules applied by the filter in [`src/utils/filter-diagnostics.ts`](https://github.com/millionco/react-doctor/blob/main/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`](https://github.com/millionco/react-doctor/blob/main/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`](https://github.com/millionco/react-doctor/blob/main/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.