Skip to content

False positive for rn-no-raw-text with children inside custom component #788

@jerone

Description

@jerone

According to the documentation and to the unit-tests should usage of children inside an custom component that forwards this to Text-element considered fine.

(2) the parent is a custom component that itself renders its children inside a — text-rendering wrappers such as 'PrimaryButton','SecondaryButton','LinkButton','Chip','Badge','Pill','MenuItem','Tab','ListItem','Button' — these pass the raw string into their own internal
https://www.react.doctor/docs/rules/react-doctor/rn-no-raw-text

However, React Doctor is telling me it found a bug:

  ✖ Bugs: Raw text outside a Text component ×10
    Your users hit a crash when raw "Test Chip" renders outside
    a <Text> component on React Native.
    → Text outside a `<Text>` component crashes on React
    Native. Wrap it like `<Text>{value}</Text>`.

    __tests__/shared/components/Chip.test.tsx:8
    ┌──────────────────────────────────────────────────────────────┐
    │   7 |   test("renders correctly with default props", () => { │
    │ > 8 |     render(<Chip>Test Chip</Chip>);                    │
    │     |                  ^                                     │
    │   9 |                                                        │
    └──────────────────────────────────────────────────────────────┘

Component code:

import { type PropsWithChildren } from "react";
import {
  StyleSheet,
  Text,
  type TextStyle,
  View,
  type ViewStyle,
} from "react-native";

import Icon from "@/shared/components/Icon";
import { useTheme } from "@/shared/hooks/useTheme";
import { type SvgViewProps } from "*.svg";

export type ChipType =
  | "primary"
  | "primary-pressed"
  | "secondary"
  | "success"
  | "warning"
  | "error";

interface ChipProps {
  type?: ChipType;
  IconSvg?: React.ComponentType<SvgViewProps>;
  testID?: string;
}

export default function Chip(props: Readonly<PropsWithChildren<ChipProps>>) {
  const { children, type = "secondary", IconSvg, testID = "Chip" } = props;
  const theme = useTheme();

  const viewStyle = theme[`chip.${type}`] as ViewStyle;
  const textStyle = theme[`chip.${type}`] as TextStyle;

  return (
    <View
      testID={testID}
      style={[
        styles.chip,
        viewStyle,
      ]}
    >
      <Text style={textStyle}>{children}</Text>
      {IconSvg && <Icon Svg={IconSvg} size={16} color={textStyle.color} />}
    </View>
  );
}

react-doctor@0.5.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions