@boostdev/design-system-react-native 0.4.0 → 0.5.1

package/src/components/interaction/form/Slider/Slider.tsx

@@ -1,13 +1,6 @@
 import { useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  GestureResponderEvent,
-  LayoutChangeEvent,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { StyleSheet, View, GestureResponderEvent, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../../native/ScaledText';
 import { spacing, font, lineHeight } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';

package/src/components/interaction/form/Textarea/Textarea.spec.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '../../../../native/ThemeContext';
 import { Textarea } from './Textarea';
+import { cornerRadii } from '../../../../test/cornerRadii';
 
 function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
@@ -47,4 +48,9 @@ describe('Textarea (native)', () => {
     const inputs = container.querySelectorAll('textarea, [style*="opacity"]');
     expect(inputs.length).toBeGreaterThan(0);
   });
+
+  it('gives the bordered field box the medium border radius', () => {
+    renderWithTheme(<Textarea label="Message" name="message" />);
+    expect(cornerRadii(screen.getByRole('textbox'))).toEqual(['16px', '16px', '16px', '16px']);
+  });
 });

package/src/components/interaction/form/Textarea/Textarea.tsx

@@ -1,11 +1,6 @@
 import { ReactNode, useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  TextInput,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { ScaledTextInput as TextInput } from '../../../../native/ScaledText';
 import { spacing, font, border, lineHeight } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';
@@ -38,7 +33,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.s,
     paddingVertical: spacing.xs,
     borderWidth: 1,
-    borderRadius: border.radius.xs,
+    borderRadius: border.radius.m,
     minHeight: 100,
     textAlignVertical: 'top',
   },

package/src/components/interaction/form/atoms/Label.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { Text, StyleProp, TextStyle } from 'react-native';
+import { StyleProp, TextStyle } from 'react-native';
+import { ScaledText as Text } from '../../../../native/ScaledText';
 import { font, lineHeight } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 

package/src/components/interaction/form/atoms/Message.tsx

@@ -1,4 +1,5 @@
-import { StyleSheet, Text, StyleProp, TextStyle } from 'react-native';
+import { StyleSheet, StyleProp, TextStyle } from 'react-native';
+import { ScaledText as Text } from '../../../../native/ScaledText';
 import { font, lineHeight } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 

package/src/components/layout/SectionHeader/SectionHeader.tsx

@@ -1,4 +1,5 @@
-import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Accordion/Accordion.tsx

@@ -1,15 +1,6 @@
 import { ReactNode, useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  Pressable,
-  LayoutAnimation,
-  Platform,
-  UIManager,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { StyleSheet, View, Pressable, LayoutAnimation, Platform, UIManager, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Alert/Alert.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Avatar/Avatar.tsx

@@ -1,4 +1,5 @@
-import { StyleSheet, View, Text, Image, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, Image, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { font, border } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Badge/Badge.spec.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import type React from 'react';
 import { ThemeProvider } from '../../../native/ThemeContext';
 import { Badge } from './Badge';
 
@@ -6,6 +7,23 @@ function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
 }
 
+// Mocks react-native's Text to expose maxFontSizeMultiplier as a data attribute
+// (react-native-web drops it from the DOM).
+vi.mock('react-native', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('react-native')>();
+  return {
+    ...actual,
+    Text: ({
+      children,
+      maxFontSizeMultiplier,
+    }: Record<string, unknown> & { children?: React.ReactNode }) => (
+      <span data-testid="text" data-max-font-scale={String(maxFontSizeMultiplier)}>
+        {children}
+      </span>
+    ),
+  };
+});
+
 describe('Badge (native)', () => {
   it('renders children text', () => {
     renderWithTheme(<Badge>New</Badge>);
@@ -42,4 +60,14 @@ describe('Badge (native)', () => {
     renderWithTheme(<Badge style={{ marginTop: 10 }}>Styled</Badge>);
     expect(screen.getByText('Styled')).toBeInTheDocument();
   });
+
+  it('caps its text at a multiplier of 2 by default', () => {
+    renderWithTheme(<Badge>3</Badge>);
+    expect(screen.getByText('3')).toHaveAttribute('data-max-font-scale', '2');
+  });
+
+  it('uses the override multiplier when given', () => {
+    renderWithTheme(<Badge maxFontSizeMultiplier={1}>3</Badge>);
+    expect(screen.getByText('3')).toHaveAttribute('data-max-font-scale', '1');
+  });
 });

package/src/components/ui/Badge/Badge.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 
@@ -9,6 +10,11 @@ interface BadgeProps {
   children: ReactNode;
   variant?: BadgeVariant;
   style?: StyleProp<ViewStyle>;
+  /**
+   * Overrides the ceiling on how far the text grows with the OS text size (default: from its
+   * font size, see `maxFontScaleFor`). Pass `1` for a count on a fixed shape.
+   */
+  maxFontSizeMultiplier?: number;
 }
 
 const styles = StyleSheet.create({
@@ -29,7 +35,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export function Badge({ children, variant = 'primary', style }: BadgeProps) {
+export function Badge({ children, variant = 'primary', style, maxFontSizeMultiplier }: BadgeProps) {
   const { colors } = useTheme();
 
   const variantColors: Record<BadgeVariant, { bg: string; text: string }> = {
@@ -44,7 +50,7 @@ export function Badge({ children, variant = 'primary', style }: BadgeProps) {
 
   return (
     <View style={[styles.badge, { backgroundColor: bg }, style]}>
-      <Text style={[styles.text, { color: text }]}>{children}</Text>
+      <Text style={[styles.text, { color: text }]} maxFontSizeMultiplier={maxFontSizeMultiplier}>{children}</Text>
     </View>
   );
 }

package/src/components/ui/Breadcrumb/Breadcrumb.tsx

@@ -1,4 +1,5 @@
-import { AccessibilityRole, StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { AccessibilityRole, StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Calendar/Calendar.tsx

@@ -1,12 +1,6 @@
 import { useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  Pressable,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Carousel/Carousel.tsx

@@ -1,16 +1,6 @@
 import { ReactNode, useCallback, useRef, useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  Pressable,
-  ScrollView,
-  NativeSyntheticEvent,
-  NativeScrollEvent,
-  Dimensions,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { StyleSheet, View, Pressable, ScrollView, NativeSyntheticEvent, NativeScrollEvent, Dimensions, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, border } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Collapsible/Collapsible.spec.tsx

@@ -23,7 +23,7 @@ describe('Collapsible (native)', () => {
       </Collapsible>,
     );
     const chevron = screen.getByTestId('bds-collapsible-chevron');
-    expect(chevron).toHaveStyle({ borderRightWidth: 2 });
+    expect(chevron).toHaveStyle({ borderRightWidth: '1.5px' });
     expect(chevron).not.toHaveTextContent('▸');
   });
 

package/src/components/ui/Collapsible/Collapsible.tsx

@@ -1,18 +1,9 @@
 import { ReactNode, useCallback, useRef, useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  Pressable,
-  Animated,
-  LayoutAnimation,
-  Platform,
-  UIManager,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { StyleSheet, View, Pressable, Animated, LayoutAnimation, Platform, UIManager, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
+import { Chevron } from '../../../native/Chevron';
 
 if (
   Platform.OS === 'android' &&
@@ -58,12 +49,6 @@ const styles = StyleSheet.create({
     lineHeight: lineHeight.body,
   },
   chevron: {
-    // Border-box chevron (no glyph font dependency): a small square with two
-    // adjacent borders, rotated to form a crisp "›" / "⌄" disclosure indicator.
-    width: 8,
-    height: 8,
-    borderRightWidth: 2,
-    borderBottomWidth: 2,
     marginStart: spacing.xs,
   },
   content: {
@@ -127,11 +112,11 @@ export function Collapsible({
         style={({ pressed }) => [styles.header, pressed && styles.pressed]}
       >
         <Text style={[styles.summaryText, { color: colors.colorOnBg }]}>{summary}</Text>
-        <Animated.View
+        <Chevron
           testID="bds-collapsible-chevron"
-          style={[styles.chevron, { borderColor: colors.colorOnBgSubtle, transform: [{ rotate }] }]}
-          importantForAccessibility="no"
-          accessibilityElementsHidden={true}
+          color={colors.colorOnBgSubtle}
+          rotate={rotate}
+          style={styles.chevron}
         />
       </Pressable>
       {isOpen && (

package/src/components/ui/DescriptionList/DescriptionList.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { AccessibilityRole, StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import { AccessibilityRole, StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Link/Link.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { StyleSheet, Text, Pressable, Linking, StyleProp, TextStyle } from 'react-native';
+import { StyleSheet, Pressable, Linking, StyleProp, TextStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { font } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/NotificationBanner/NotificationBanner.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Pagination/Pagination.tsx

@@ -1,4 +1,5 @@
-import { AccessibilityRole, StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { AccessibilityRole, StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Progress/Progress.tsx

@@ -1,4 +1,5 @@
-import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/ProgressCircle/ProgressCircle.tsx

@@ -1,4 +1,5 @@
-import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { font } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Table/Table.tsx

@@ -1,13 +1,6 @@
 import { ReactNode } from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  ScrollView,
-  Pressable,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { StyleSheet, View, ScrollView, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Tabs/Tabs.tsx

@@ -1,14 +1,6 @@
 import { ReactNode, useState } from 'react';
-import {
-  AccessibilityRole,
-  StyleSheet,
-  View,
-  Text,
-  Pressable,
-  ScrollView,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { AccessibilityRole, StyleSheet, View, Pressable, ScrollView, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Tooltip/Tooltip.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, useState } from 'react';
-import { StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Typography/Typography.mdx

@@ -49,6 +49,8 @@ import { Typography } from '@boostdev/design-system-components';
 | `variant` | `"h1" \| "h2" \| "h3" \| "body" \| "body_s"` | `"body"` | Typographic scale |
 | `children` | `ReactNode` | — | Text content |
 | `style` | `StyleProp<TextStyle>` | — | Override text styles |
+| `maxFontSizeMultiplier` | `number` | — | Overrides the ceiling on how far the text grows with the OS text size (default: from its font size, see `maxFontScaleFor`). `1` keeps the text at its own size. |
+| `numberOfLines` | `number` | — | Truncates the text with an ellipsis after this many lines. |
 
 ## Accessibility
 

package/src/components/ui/Typography/Typography.spec.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import type React from 'react';
 import { ThemeProvider } from '../../../native/ThemeContext';
 import { Typography } from './Typography';
 
@@ -6,6 +7,37 @@ function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
 }
 
+// Mocks react-native's Text to expose maxFontSizeMultiplier/numberOfLines as data attributes
+// (react-native-web drops them from the DOM). `accessibilityRole` is mapped to `role` the same
+// way react-native-web does ("header" -> "heading") so the heading-role tests above keep working
+// once this mock is in effect for the whole file.
+vi.mock('react-native', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('react-native')>();
+  const accessibilityRoleToWebRole: Record<string, string> = { header: 'heading' };
+  return {
+    ...actual,
+    Text: ({
+      children,
+      maxFontSizeMultiplier,
+      numberOfLines,
+      adjustsFontSizeToFit,
+      minimumFontScale,
+      accessibilityRole,
+    }: Record<string, unknown> & { children?: React.ReactNode; accessibilityRole?: string }) => (
+      <span
+        data-testid="text"
+        role={accessibilityRole ? accessibilityRoleToWebRole[accessibilityRole] : undefined}
+        data-max-font-scale={String(maxFontSizeMultiplier)}
+        data-lines={String(numberOfLines)}
+        data-fit={String(adjustsFontSizeToFit)}
+        data-min-scale={String(minimumFontScale)}
+      >
+        {children}
+      </span>
+    ),
+  };
+});
+
 describe('Typography (native)', () => {
   it('renders children text', () => {
     renderWithTheme(<Typography>Hello world</Typography>);
@@ -47,3 +79,30 @@ describe('Typography (native)', () => {
     expect(screen.getByText('Styled')).toBeInTheDocument();
   });
 });
+
+describe('Typography text size', () => {
+  it('caps h1 at a multiplier of 1.3 (32 pt)', () => {
+    renderWithTheme(<Typography variant="h1">Heading</Typography>);
+    expect(screen.getByText('Heading')).toHaveAttribute('data-max-font-scale', '1.3');
+  });
+
+  it('caps body at a multiplier of 2', () => {
+    renderWithTheme(<Typography variant="body">Body</Typography>);
+    expect(screen.getByText('Body')).toHaveAttribute('data-max-font-scale', '2');
+  });
+
+  it('caps a large custom font size at a multiplier of 1', () => {
+    renderWithTheme(<Typography style={{ fontSize: 88 }}>Big</Typography>);
+    expect(screen.getByText('Big')).toHaveAttribute('data-max-font-scale', '1');
+  });
+
+  it('uses the override multiplier when given', () => {
+    renderWithTheme(<Typography maxFontSizeMultiplier={1}>Body</Typography>);
+    expect(screen.getByText('Body')).toHaveAttribute('data-max-font-scale', '1');
+  });
+
+  it('passes numberOfLines through to truncate the text', () => {
+    renderWithTheme(<Typography numberOfLines={1}>Body</Typography>);
+    expect(screen.getByText('Body')).toHaveAttribute('data-lines', '1');
+  });
+});

package/src/components/ui/Typography/Typography.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { StyleSheet, Text, StyleProp, TextStyle } from 'react-native';
+import { StyleSheet, StyleProp, TextStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { font, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 
@@ -9,6 +10,13 @@ interface TypographyProps {
   variant?: TypographyVariant;
   children: ReactNode;
   style?: StyleProp<TextStyle>;
+  /**
+   * Overrides the ceiling on how far the text grows with the OS text size (default: from its
+   * font size, see `maxFontScaleFor`). `1` keeps the text at its own size.
+   */
+  maxFontSizeMultiplier?: number;
+  /** Truncates the text with an ellipsis after this many lines. */
+  numberOfLines?: number;
 }
 
 const styles = StyleSheet.create({
@@ -52,12 +60,20 @@ const accessibilityRoles: Record<TypographyVariant, 'header' | 'text'> = {
   body_s: 'text',
 };
 
-export function Typography({ variant = 'body', children, style }: TypographyProps) {
+export function Typography({
+  variant = 'body',
+  children,
+  style,
+  maxFontSizeMultiplier,
+  numberOfLines,
+}: TypographyProps) {
   const { colors } = useTheme();
   return (
     <Text
       accessibilityRole={accessibilityRoles[variant]}
       style={[styles.base, styles[variant], { color: colors.colorOnBg }, style]}
+      maxFontSizeMultiplier={maxFontSizeMultiplier}
+      numberOfLines={numberOfLines}
     >
       {children}
     </Text>

package/src/index.ts

@@ -14,6 +14,8 @@ export type {
   ReactNavigationFontStyle,
   CreateReactNavigationThemeOptions,
 } from './native/ReactNavigationTheme';
+export { ScaledText, ScaledTextInput, maxFontScaleForStyle } from './native/ScaledText';
+export { maxFontScaleFor } from './native/fontScale';
 
 // UI
 export { Typography } from './components/ui/Typography/Typography';

package/src/native/Chevron.spec.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import { Chevron } from './Chevron';
+
+describe('Chevron', () => {
+  it('draws an open V from two adjacent borders, without a glyph', () => {
+    render(<Chevron color="#123456" testID="chevron" />);
+    const chevron = screen.getByTestId('chevron');
+    expect(chevron).toHaveStyle({ borderRightWidth: '1.5px', borderBottomWidth: '1.5px' });
+    expect(chevron).toBeEmptyDOMElement();
+  });
+
+  it('strokes the V in the given colour', () => {
+    render(<Chevron color="#123456" testID="chevron" />);
+    expect(screen.getByTestId('chevron')).toHaveStyle({
+      borderRightColor: 'rgb(18, 52, 86)',
+      borderBottomColor: 'rgb(18, 52, 86)',
+    });
+  });
+
+  it('points down by default', () => {
+    render(<Chevron color="#123456" testID="chevron" />);
+    expect(getComputedStyle(screen.getByTestId('chevron')).transform).toMatch(/rotate\(45deg\)/);
+  });
+
+  it('takes another rotation', () => {
+    render(<Chevron color="#123456" rotate="-45deg" testID="chevron" />);
+    expect(getComputedStyle(screen.getByTestId('chevron')).transform).toMatch(/rotate\(-45deg\)/);
+  });
+
+  it('is hidden from assistive technology', () => {
+    render(<Chevron color="#123456" testID="chevron" />);
+    expect(screen.getByTestId('chevron')).toHaveAttribute('aria-hidden', 'true');
+  });
+});

package/src/native/Chevron.tsx

@@ -0,0 +1,50 @@
+import { Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+
+/** Edge of the bordered square. Rotated 45deg, the V is about 11pt wide: body-text size. */
+const SIZE = 8;
+const STROKE = 1.5;
+/**
+ * The V's ink sits in the bordered corner of the square, not on its centre. Shifting the
+ * square back along its own diagonal (before the rotation) centres the ink on the layout
+ * box whichever way the chevron points: (SIZE - STROKE) / 4 on each axis.
+ */
+const CENTRE_SHIFT = -(SIZE - STROKE) / 4;
+
+const styles = StyleSheet.create({
+  chevron: {
+    // Border-box chevron (no glyph font dependency): a small square with two
+    // adjacent borders, rotated to form a crisp "›" / "⌄" indicator.
+    width: SIZE,
+    height: SIZE,
+    borderRightWidth: STROKE,
+    borderBottomWidth: STROKE,
+  },
+});
+
+export interface ChevronProps {
+  color: string;
+  /** '45deg' points down (the default), '-45deg' points right. Takes an Animated interpolation. */
+  rotate?: string | Animated.AnimatedInterpolation<string>;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Decorative open "V", hidden from assistive technology. Internal: not part of the public API. */
+export function Chevron({ color, rotate = '45deg', testID, style }: Readonly<ChevronProps>) {
+  return (
+    <Animated.View
+      testID={testID}
+      style={[
+        styles.chevron,
+        {
+          borderColor: color,
+          transform: [{ rotate }, { translateX: CENTRE_SHIFT }, { translateY: CENTRE_SHIFT }],
+        },
+        style,
+      ]}
+      aria-hidden
+      importantForAccessibility="no-hide-descendants"
+      accessibilityElementsHidden
+    />
+  );
+}