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
According to the documentation and to the unit-tests should usage of
childreninside an custom component that forwards this toText-element considered fine.However, React Doctor is telling me it found a bug:
Component code:
react-doctor@0.5.1