@oxy.so/bloom 2.11.0 → 2.12.0

package/src/date-picker/types.ts

@@ -1,4 +1,4 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 /** An inclusive range of calendar days. Both ends are local-midnight `Date`s. */
 export interface DateRange {
@@ -126,8 +126,14 @@ export interface MeetingSchedulerValue {
   time: string | null;
 }
 
-/** The hour-format toggle. */
-export type MeetingSchedulerHourFormat = '12h' | '24h';
+/**
+ * How a time of day is drawn. The VALUE is always a 24h `"HH:mm"` string —
+ * this decides only what the reader sees.
+ */
+export type HourFormat = '12h' | '24h';
+
+/** The hour-format toggle. An alias of {@link HourFormat}. */
+export type MeetingSchedulerHourFormat = HourFormat;
 
 /** Fixed strings, overridable for localisation. */
 export interface MeetingSchedulerLabels {
@@ -169,3 +175,46 @@ export interface MeetingSchedulerProps extends CalendarConstraintProps {
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
+
+/** `small` is a 32-tall field with body-2 text; `medium` (default) 38 with body. */
+export type TimeFieldSize = 'small' | 'medium';
+
+export interface TimeFieldProps {
+  /**
+   * The time as a 24h `"HH:mm"` string, or `null` while the field is empty.
+   * Fully controlled. The same shape `MeetingScheduler` uses, so a value drops
+   * straight into one of its `timeSlots`.
+   */
+  value: string | null;
+  /**
+   * Called with the committed time — on blur, on submit, or on an arrow key.
+   * `null` when the field has been emptied. Never called while typing.
+   */
+  onChange: (value: string | null) => void;
+  /** Earliest time, 24h `"HH:mm"`. A typed time before it is pulled up to it. */
+  min?: string;
+  /** Latest time, 24h `"HH:mm"`. A typed time after it is pulled back to it. */
+  max?: string;
+  /**
+   * Minutes one arrow press moves, and the grid a typed time snaps to. Default
+   * `1` (no snapping); pass `15` or `30` for a booking grid. Counted from
+   * midnight, so 15 always means :00 :15 :30 :45.
+   */
+  step?: number;
+  /** How the time is DRAWN. Default `'24h'`; the value stays 24h either way. */
+  hourFormat?: HourFormat;
+  /** Default `medium`. */
+  size?: TimeFieldSize;
+  disabled?: boolean;
+  /**
+   * The NAME of the time ("Viewing time", "Check-in"). Required: the field
+   * draws no label of its own, and `"--:--"` names nothing.
+   */
+  accessibilityLabel: string;
+  /** The text while empty. Default `"--:--"`, or `"--:-- --"` in 12h. */
+  placeholder?: string;
+  /** Fixed width. Default: 104 at `medium`, 96 at `small`. */
+  width?: number;
+  style?: StyleProp<TextStyle>;
+  testID?: string;
+}

package/src/index.ts

@@ -292,8 +292,15 @@ export type { BottomSheetRef, BottomSheetProps } from './bottom-sheet';
 // Data display
 export * from './card';
 export * from './badge';
-export { Rating, RatingBar } from './rating';
-export type { RatingBarProps, RatingCountStyle, RatingProps, RatingSize } from './rating';
+export { Rating, RatingBar, RatingInput } from './rating';
+export type {
+  RatingBarProps,
+  RatingCountStyle,
+  RatingInputProps,
+  RatingInputSize,
+  RatingProps,
+  RatingSize,
+} from './rating';
 export {
   ExplicitBadge,
   formatDuration,

package/src/index.web.ts

@@ -297,8 +297,15 @@ export type { BottomSheetRef, BottomSheetProps } from './bottom-sheet/index.web'
 // Data display
 export * from './card';
 export * from './badge';
-export { Rating, RatingBar } from './rating';
-export type { RatingBarProps, RatingCountStyle, RatingProps, RatingSize } from './rating';
+export { Rating, RatingBar, RatingInput } from './rating';
+export type {
+  RatingBarProps,
+  RatingCountStyle,
+  RatingInputProps,
+  RatingInputSize,
+  RatingProps,
+  RatingSize,
+} from './rating';
 export {
   ExplicitBadge,
   formatDuration,

package/src/listing-card/ListingCard.tsx

@@ -48,6 +48,7 @@ import {
   LISTING_CARD_STYLE_ID,
   PHOTO_ASPECT_RATIO,
   PHOTO_RADIUS,
+  PHOTO_ZOOM_SCALE,
   resolveListingCardPaint,
   locationText,
   resolvePhoto,
@@ -91,6 +92,21 @@ import type { ListingCardLayout, ListingCardProps } from './types';
  *
  * The overlay repeats the photo's geometry (the same width share and aspect
  * ratio) rather than measuring it, so it is right on the first frame.
+ *
+ * `hoverZoom` scales the photo to {@link PHOTO_ZOOM_SCALE} while a pointer is
+ * over the card — a CSS transform on the photo inside the clipping tile, WEB
+ * ONLY (`@media (any-hover: hover)`, so a touch screen that reports a hover it
+ * cannot deliver is excluded) and nothing at all under reduced motion. It is
+ * off by default: a card that grows under the pointer is a decision an app
+ * makes, not one Bloom makes for every app that already ships this card. The
+ * compact density ignores it — a 112px thumbnail has nothing to come forward
+ * from.
+ *
+ * `onLongPress` and `onContextMenu` are the shortcut to a sheet or a menu, and
+ * they carry `MessageBubble`'s contract verbatim: a long press on native (and
+ * on a web touch screen), right-click on web with the event defaulted. Neither
+ * has a keyboard spelling, so whatever they reach must be reachable another
+ * way.
  */
 
 const TEXT_GAP = 12;
@@ -198,6 +214,7 @@ function PhotoTrack({
                     source={{ uri }}
                     resizeMode="cover"
                     accessibilityIgnoresInvertColors
+                    {...webDataSet({ bloomListingCardPhoto: '' })}
                     style={{ width: '100%', height: '100%' }}
                   />
                 ) : null}
@@ -623,6 +640,9 @@ function ListingCardComponent(props: ListingCardProps) {
     favorite = false,
     onFavoriteChange,
     onPress,
+    onLongPress,
+    onContextMenu,
+    hoverZoom = false,
     href,
     loading = false,
     layout = 'vertical',
@@ -727,6 +747,17 @@ function ListingCardComponent(props: ListingCardProps) {
     role: href ? ('link' as const) : onPress ? ('button' as const) : undefined,
     accessibilityLabel: name,
     onPress: onPress || (!IS_WEB && href) ? handlePress : undefined,
+    onLongPress,
+    // Same shape as `MessageBubble`'s: the event is defaulted here, so the
+    // browser's own menu does not open over the card's shortcut.
+    ...(IS_WEB && onContextMenu !== undefined
+      ? {
+          onContextMenu: (event: { preventDefault?: () => void }) => {
+            event.preventDefault?.();
+            onContextMenu();
+          },
+        }
+      : null),
     testID: testID ? `${testID}-link` : undefined,
   };
 
@@ -752,7 +783,9 @@ function ListingCardComponent(props: ListingCardProps) {
 
   return (
     <View
-      {...webDataSet({ bloomListingCard: layout })}
+      {...webDataSet(
+        hoverZoom ? { bloomListingCard: layout, bloomListingCardZoom: '' } : { bloomListingCard: layout },
+      )}
       style={[{ position: 'relative' }, style]}
       testID={testID}
     >

package/src/listing-card/WishlistCard.tsx

@@ -22,15 +22,22 @@ import type { WishlistCardProps } from './types';
  * A saved collection of stays.
  *
  *   cover   a square, radius 16, 2px seams in the page colour:
+ *             0 photos  the placeholder square, holding `empty` centred
  *             1 photo   fills it
  *             2         side by side
  *             3         one tall photo left, two stacked right
  *             4+        a 2×2 (the first four)
- *   text    12 below: the name body-semibold, the description body-regular
- *           text-secondary
+ *   text    12 below: `icon` at 16 (in `color`), the name body-semibold, then
+ *           the description body-regular text-secondary
  *
  * A link on web with `href` (a real `<a>`), otherwise a button with `onPress`;
  * its name is "name, description".
+ *
+ * `icon` is DECORATIVE and sits beside the name rather than inside it — a glyph
+ * put in the `name` string is read out as its character, and cannot be coloured
+ * or sized. `color` paints that glyph and tints the empty cover; it is the
+ * caller's colour, not a token, because a collection's colour is the person's
+ * choice and Bloom has no ramp for it.
  */
 
 const SEAM = 2;
@@ -57,6 +64,9 @@ function WishlistCardComponent({
   photoVariant,
   onPress,
   href,
+  icon: Icon,
+  color,
+  empty,
   accessibilityLabel,
   style,
   testID,
@@ -67,10 +77,25 @@ function WishlistCardComponent({
   const resolver = useImageResolver();
   const uris = photos.slice(0, 4).map((photo) => resolvePhoto(photo, resolver, photoVariant));
   const count = Math.max(1, uris.length);
+  const isEmpty = uris.length === 0;
 
   const fill: ViewStyle = { flex: 1 };
   let cover: React.ReactNode;
-  if (count === 1) {
+  if (isEmpty) {
+    cover = (
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: color ?? paint.photoPlaceholder,
+        }}
+        testID={testID ? `${testID}-empty` : undefined}
+      >
+        {empty ?? null}
+      </View>
+    );
+  } else if (count === 1) {
     cover = <Tile uri={uris[0]} paint={paint} style={fill} />;
   } else if (count === 2) {
     cover = (
@@ -133,9 +158,20 @@ function WishlistCardComponent({
         {cover}
       </View>
       <View style={{ marginTop: 12, gap: 2 }}>
-        <Text variant="body-semibold" numberOfLines={1} style={{ color: paint.text }}>
-          {name}
-        </Text>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+          {Icon ? (
+            <View aria-hidden style={{ flexShrink: 0 }} testID={testID ? `${testID}-icon` : undefined}>
+              <Icon width={16} height={16} fill={color ?? paint.textSecondary} />
+            </View>
+          ) : null}
+          <Text
+            variant="body-semibold"
+            numberOfLines={1}
+            style={{ flexShrink: 1, minWidth: 0, color: paint.text }}
+          >
+            {name}
+          </Text>
+        </View>
         {description ? (
           <Text variant="body-regular" numberOfLines={1} style={{ color: paint.textSecondary }}>
             {description}

package/src/listing-card/shared.ts

@@ -20,6 +20,13 @@ export const MAX_DOTS = 5;
 export const DOT_SIZE = 6;
 /** A dot at a window edge that has more photos beyond it. */
 export const DOT_EDGE_SIZE = 4;
+/**
+ * How far `hoverZoom` scales the photo under a pointer. 1.06 — enough to read
+ * as the photo coming forward, small enough that the crop barely moves and a
+ * face near an edge is not pushed out of frame. The tile clips, so nothing
+ * overflows the card.
+ */
+export const PHOTO_ZOOM_SCALE = 1.06;
 
 export interface ListingCardPaint {
   /** The placeholder behind a photo that has not loaded, and the mosaic gaps' tiles. */
@@ -209,6 +216,7 @@ export const LISTING_CARD_STYLE_ID = 'bloom-listing-card-web-css';
 const CARD = '[data-bloom-listing-card]';
 const LINK = '[data-bloom-listing-card-link]';
 const TRACK = '[data-bloom-listing-card-track]';
+const PHOTO = '[data-bloom-listing-card-photo]';
 const ARROW = '[data-bloom-listing-card-arrow]';
 const DOT = '[data-bloom-listing-card-dot]';
 const FAVORITE = '[data-bloom-favorite-button]';
@@ -262,9 +270,23 @@ ${FAVORITE}:focus-visible {
   outline: 2px solid var(--bloom-listing-card-ring, currentColor);
   outline-offset: 0;
 }
+${CARD}[data-bloom-listing-card-zoom] ${PHOTO} {
+  transition: transform 400ms cubic-bezier(0.2, 0, 0.2, 1);
+  transform-origin: center;
+}
+@media (any-hover: hover) {
+  ${CARD}[data-bloom-listing-card-zoom]:hover ${PHOTO} {
+    transform: scale(${PHOTO_ZOOM_SCALE});
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   ${ARROW}, ${DOT} {
     transition: none;
   }
+  ${CARD}[data-bloom-listing-card-zoom] ${PHOTO},
+  ${CARD}[data-bloom-listing-card-zoom]:hover ${PHOTO} {
+    transition: none;
+    transform: none;
+  }
 }
 `;

package/src/listing-card/types.ts

@@ -128,6 +128,26 @@ export interface ListingCardProps {
   onFavoriteChange?: (favorite: boolean) => void;
   /** Called when the card is pressed. */
   onPress?: () => void;
+  /**
+   * A long press on the card — a shortcut to a sheet or a menu ("save to a
+   * folder"). A long press has no keyboard equivalent and no name to announce,
+   * so whatever it reaches must be reachable another way too.
+   */
+  onLongPress?: () => void;
+  /**
+   * Web only — right-click, the pointer's spelling of the same shortcut. The
+   * event is defaulted for you, so the browser's own menu ("open in a new tab")
+   * does not appear on the card while this is set. Same contract as
+   * `MessageBubble`'s.
+   */
+  onContextMenu?: () => void;
+  /**
+   * Zooms the photo a little while the pointer is over the card (WEB ONLY —
+   * there is no hover on a touch screen, and no reduced-motion-safe way to do
+   * it on native). Default `false`. Skipped under
+   * `prefers-reduced-motion: reduce`.
+   */
+  hoverZoom?: boolean;
   /**
    * The stay's URL. On web the card is a real `<a href>` (open in a new tab,
    * copy link); with `onPress` too the default navigation is prevented so a
@@ -206,6 +226,23 @@ export interface WishlistCardProps {
   onPress?: () => void;
   /** The collection's URL; a real `<a href>` on web, like `ListingCard`. */
   href?: string;
+  /**
+   * A glyph left of the name, 16px — what the collection IS ("Coast weekends"
+   * beside a heart, "Viewings booked" beside a calendar). Decorative: the name
+   * beside it is what a screen reader reads.
+   */
+  icon?: BloomIconComponent;
+  /**
+   * The `icon`'s colour, and the tint of the cover while the collection is
+   * empty. Default: the secondary text colour, and the plain placeholder.
+   */
+  color?: string;
+  /**
+   * What the cover shows while `photos` is empty — a glyph, a line of text, an
+   * "Add your first save" affordance. Without it an empty collection draws the
+   * plain placeholder square it draws today.
+   */
+  empty?: ReactNode;
   /** Replaces the composed name ("Coast weekends, 12 saved"). */
   accessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;

package/src/rating/RatingInput.tsx

@@ -0,0 +1,214 @@
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { Platform, Pressable, View } from 'react-native';
+
+import { resolveButtonRamps } from '../button/shared';
+import { RiStarFill } from '../icons/remix/RiStarFill';
+import { RiStarLine } from '../icons/remix/RiStarLine';
+import { focusRingShadow, interactiveWebCss, useInteractiveWebCss } from '../styles/interactive-web-css';
+import { useRingOffsetStyle } from '../styles/surface-levels';
+import { DISABLED_OPACITY } from '../styles/tokens';
+import { webDataSet } from '../styles/web-data';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import type { RatingInputProps, RatingInputSize } from './types';
+
+/**
+ * The star PICKER — `Rating`'s counterpart for a review form. `Rating` draws a
+ * rating that exists; this one is how a rating comes to exist.
+ *
+ *              star   gap
+ *   small      24     4
+ *   medium     32     6
+ *   large      40     8
+ *
+ * Chosen stars are filled with the ACCENT, the rest are outlines in the
+ * neutral ramp — the same reasoning as `RatingBar`'s fill: a chosen star is a
+ * choice the person made, and text-primary reads as ink rather than as an
+ * answer. Under a pointer the stars up to the hovered one fill as a preview,
+ * which never touches `value`.
+ *
+ * Accessibility: a `radiogroup` named by `accessibilityLabel`, holding one
+ * `radio` per star named by `formatStarLabel` ("4 stars"). Exactly one of N is
+ * what a rating is, so `radio` is the role rather than a `slider` — it is also
+ * the only one that gives each star its own touch target and its own name.
+ * Roving tab stop: the chosen star (the first when nothing is chosen) is the
+ * one in the tab order, and ArrowRight/Up, ArrowLeft/Down, Home and End move
+ * AND choose, which is how an ARIA radio group behaves. The focus ring is drawn
+ * on the star itself.
+ *
+ * **No half stars, and no clearing.** Half a star doubles the keyboard stops
+ * and halves the target — 16px of a 32px star, under any touch floor — and the
+ * icon set has no half-star glyph, so the state could not be drawn honestly
+ * either. Clearing is left out for the reason `Radio` re-choosing is a no-op: a
+ * radio has no "off", and a form that needs "no rating yet" holds `null` and
+ * does not render a cleared state the group cannot express. `Rating` still
+ * DISPLAYS fractional values — a display has no target and no keyboard.
+ */
+
+const SIZE_CONFIG: Record<RatingInputSize, { star: number; gap: number }> = {
+  small: { star: 24, gap: 4 },
+  medium: { star: 32, gap: 6 },
+  large: { star: 40, gap: 8 },
+};
+
+const IS_WEB = Platform.OS === 'web';
+
+const HIT_SLOP = { top: 6, bottom: 6, left: 2, right: 2 } as const;
+
+const STYLE_ID = 'bloom-rating-input-web-css';
+const STAR = '[data-bloom-rating-star]';
+
+const BLOOM_RATING_INPUT_CSS = interactiveWebCss({
+  selector: STAR,
+  varPrefix: 'bloom-rating-input',
+  // A star is a `View`-based press target, not a `<button>`: the button reset's
+  // `inline-flex` changes an RNW `View`'s layout.
+  reset: 'none',
+  base: 'border-radius: 6px;',
+  transition: 'box-shadow 120ms ease',
+  disabled: { opacity: null },
+  extraRules: `${STAR}:focus-visible {
+  outline: none;
+  box-shadow: ${focusRingShadow('--bloom-rating-input-ring')};
+}`,
+});
+
+/** `1 star`, `4 stars`. English — `formatStarLabel` replaces it. */
+export function defaultStarLabel(value: number): string {
+  return value === 1 ? '1 star' : `${value} stars`;
+}
+
+function RatingInputComponent({
+  value,
+  onChange,
+  max = 5,
+  size = 'medium',
+  disabled = false,
+  accessibilityLabel,
+  formatStarLabel = defaultStarLabel,
+  style,
+  testID,
+}: RatingInputProps) {
+  const theme = useTheme();
+  const ringOffset = useRingOffsetStyle();
+  useInteractiveWebCss(STYLE_ID, BLOOM_RATING_INPUT_CSS);
+  const { accent, neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
+  const config = SIZE_CONFIG[size];
+  const [hovered, setHovered] = useState<number | null>(null);
+
+  const total = Math.max(1, Math.round(max));
+  const chosen = value == null ? null : Math.min(total, Math.max(1, Math.round(value)));
+  // The hover preview never survives a disabled group.
+  const shown = disabled ? chosen : (hovered ?? chosen);
+
+  const choose = useCallback(
+    (next: number) => {
+      if (disabled) return;
+      const clamped = Math.min(total, Math.max(1, next));
+      // Re-choosing the chosen star is a no-op, as on `Radio`: firing would
+      // report a change that did not happen.
+      if (clamped === chosen) return;
+      onChange(clamped);
+    },
+    [disabled, total, chosen, onChange],
+  );
+
+  const onKeyDown = useCallback(
+    (e: { key: string; preventDefault: () => void }) => {
+      const from = chosen ?? 0;
+      switch (e.key) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+          e.preventDefault();
+          choose(Math.min(total, from + 1));
+          break;
+        case 'ArrowLeft':
+        case 'ArrowDown':
+          e.preventDefault();
+          choose(Math.max(1, from - 1));
+          break;
+        case 'Home':
+          e.preventDefault();
+          choose(1);
+          break;
+        case 'End':
+          e.preventDefault();
+          choose(total);
+          break;
+        default:
+          break;
+      }
+    },
+    [chosen, total, choose],
+  );
+
+  // The roving tab stop: the chosen star, or the first one while nothing is
+  // chosen, so a keyboard reaches the group in one Tab either way.
+  const tabStop = chosen ?? 1;
+  const emptyColor = theme.isDark ? neutral[600] : neutral[300];
+
+  const starStyle: WebCssStyle = {
+    padding: 2,
+    borderRadius: 6,
+    '--bloom-rating-input-ring': accent[500],
+    ...ringOffset,
+  };
+
+  return (
+    <View
+      testID={testID}
+      accessibilityRole="radiogroup"
+      accessibilityLabel={accessibilityLabel}
+      aria-label={accessibilityLabel}
+      aria-disabled={disabled || undefined}
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: config.gap,
+          opacity: disabled ? DISABLED_OPACITY : 1,
+        },
+        style,
+      ]}
+    >
+      {Array.from({ length: total }, (_, index) => {
+        const star = index + 1;
+        const filled = shown != null && star <= shown;
+        const Glyph = filled ? RiStarFill : RiStarLine;
+        const name = formatStarLabel(star, total);
+        const webProps: Record<string, unknown> = IS_WEB
+          ? { tabIndex: disabled || star !== tabStop ? -1 : 0, onKeyDown }
+          : {};
+        return (
+          <Pressable
+            key={star}
+            accessibilityRole="radio"
+            // `aria-checked`, not `accessibilityState`: react-native-web never
+            // reads the latter. React Native folds this one back, so it is the
+            // spelling both platforms honour.
+            aria-checked={star === chosen}
+            accessibilityLabel={name}
+            disabled={disabled}
+            onPress={() => choose(star)}
+            onHoverIn={() => setHovered(star)}
+            onHoverOut={() => setHovered((current) => (current === star ? null : current))}
+            hitSlop={HIT_SLOP}
+            {...webProps}
+            {...webDataSet({ bloomRatingStar: '' })}
+            testID={testID ? `${testID}-star-${star}` : undefined}
+            style={starStyle}
+          >
+            <Glyph
+              width={config.star}
+              height={config.star}
+              fill={filled ? accent[500] : emptyColor}
+            />
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+export const RatingInput = memo(RatingInputComponent);
+RatingInput.displayName = 'RatingInput';

package/src/rating/index.ts

@@ -1,3 +1,11 @@
 export { Rating } from './Rating';
 export { RatingBar } from './RatingBar';
-export type { RatingBarProps, RatingCountStyle, RatingProps, RatingSize } from './types';
+export { RatingInput } from './RatingInput';
+export type {
+  RatingBarProps,
+  RatingCountStyle,
+  RatingInputProps,
+  RatingInputSize,
+  RatingProps,
+  RatingSize,
+} from './types';

package/src/rating/types.ts

@@ -32,6 +32,39 @@ export interface RatingProps {
   testID?: string;
 }
 
+/** `small` is a 24px star, `medium` (default) 32, `large` 40. */
+export type RatingInputSize = 'small' | 'medium' | 'large';
+
+export interface RatingInputProps {
+  /**
+   * The chosen rating, `1..max`, or `null` while nothing is chosen. Fully
+   * controlled — the component keeps no value of its own.
+   */
+  value: number | null;
+  /** Called with the chosen rating. Never called with the value already chosen. */
+  onChange: (value: number) => void;
+  /** How many stars. Default `5`. */
+  max?: number;
+  /** Default `medium`. */
+  size?: RatingInputSize;
+  /** Disables the whole group: no press, no keyboard, dimmed. */
+  disabled?: boolean;
+  /**
+   * The NAME of what is being rated ("Overall rating", "Cleanliness").
+   * Required: the group draws nothing but stars, so nothing else can tell a
+   * screen reader which of several ratings this one is.
+   */
+  accessibilityLabel: string;
+  /**
+   * Each star's own name, which is English by default (`"1 star"`,
+   * `"4 stars"`). Pass a translated formatter.
+   */
+  formatStarLabel?: (value: number, max: number) => string;
+  style?: StyleProp<ViewStyle>;
+  /** Derives `-star-<n>` for each star. */
+  testID?: string;
+}
+
 export interface RatingBarProps {
   /** What the row measures ("Cleanliness", "5 stars"). Also the bar's accessible name. */
   label: string;