@coinbase/cds-mcp-server 8.21.8 → 8.22.2

package/mcp-docs/mobile/components/ReferenceLine.txt

@@ -10,34 +10,74 @@ import { ReferenceLine } from '@coinbase/cds-mobile-visualization'
 
 ## Examples
 
-### Basic Example
+### Basics
 
-ReferenceLine can be used to add important details to a chart, such as a reference price or date.
+ReferenceLine can be used to add important details to a chart, such as a reference price or date. You can create horizontal lines using `dataY` or vertical lines using `dataX`.
+
+#### Simple Reference Line
+
+A minimal reference line without labels, useful for marking key thresholds:
 
 ```jsx
-<LineChart
-  height={150}
-  series={[
-    {
-      id: 'prices',
-      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
-    },
-  ]}
-  inset={0}
-  curve="monotone"
-  showArea
->
-  <ReferenceLine
-    dataX={5}
-    label="Vertical Reference Line"
-    labelProps={{ horizontalAlignment: 'left', dx: 8 }}
-  />
-  <ReferenceLine
-    dataY={50}
-    label="Horizontal Reference Line"
-    labelProps={{ verticalAlignment: 'bottom', dy: -8, horizontalAlignment: 'right' }}
-  />
-</LineChart>
+function SimpleReferenceLineExample() {
+  const theme = useTheme();
+
+  return (
+    <LineChart
+      showArea
+      height={150}
+      series={[
+        {
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+          color: theme.color.fgPositive,
+        },
+      ]}
+    >
+      <ReferenceLine
+        LineComponent={(props) => <DottedLine {...props} dashIntervals={[0, 16]} strokeWidth={3} />}
+        dataY={10}
+        stroke={theme.color.fg}
+      />
+    </LineChart>
+  );
+}
+```
+
+#### With Labels
+
+You can add text labels to reference lines and position them using alignment and offset props:
+
+```jsx
+function WithLabelsExample() {
+  return (
+    <LineChart
+      height={150}
+      series={[
+        {
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+        },
+      ]}
+      inset={0}
+      showArea
+    >
+      <ReferenceLine
+        dataX={5}
+        label="Vertical Reference Line"
+        labelDx={8}
+        labelHorizontalAlignment="left"
+      />
+      <ReferenceLine
+        dataY={50}
+        label="Horizontal Reference Line"
+        labelDy={-8}
+        labelHorizontalAlignment="right"
+        labelVerticalAlignment="bottom"
+      />
+    </LineChart>
+  );
+}
 ```
 
 ### Data Values
@@ -47,6 +87,7 @@ ReferenceLine relies on `dataX` or `dataY` to position the line. Passing in `dat
 ```jsx
 function DataValuesExample() {
   const theme = useTheme();
+
   return (
     <LineChart
       showArea
@@ -65,32 +106,144 @@ function DataValuesExample() {
       <ReferenceLine
         dataY={10000}
         label="10,000"
+        labelDy={-4}
         labelPosition="left"
-        labelProps={{ verticalAlignment: 'bottom', dy: -4 }}
+        labelVerticalAlignment="bottom"
       />
       <ReferenceLine
         dataY={100000}
         label="100,000"
+        labelDy={-4}
         labelPosition="left"
-        labelProps={{ verticalAlignment: 'bottom', dy: -4 }}
+        labelVerticalAlignment="bottom"
       />
     </LineChart>
   );
 }
 ```
 
-### Customization
+### Labels
 
-#### Label Style
+#### Customization
 
-You can adjust the style of the label using the `labelProps` prop.
+You can customize label appearance using `labelFont`, `labelDx`, `labelDy`, `labelHorizontalAlignment`, and `labelVerticalAlignment` props.
+
+```jsx
+function LabelCustomizationExample() {
+  return (
+    <LineChart
+      height={150}
+      series={[
+        {
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+        },
+      ]}
+      showArea
+    >
+      <ReferenceLine
+        dataY={50}
+        label="Target Price"
+        labelDy={-8}
+        labelFont="legal"
+        labelHorizontalAlignment="right"
+        labelPosition="right"
+        labelVerticalAlignment="bottom"
+      />
+      <ReferenceLine
+        dataX={7}
+        label="Midpoint"
+        labelDx={8}
+        labelFont="label1"
+        labelHorizontalAlignment="left"
+        labelPosition="top"
+      />
+    </LineChart>
+  );
+}
+```
+
+#### Bounds
+
+Use `labelBoundsInset` to prevent labels from getting too close to chart edges.
+
+```jsx
+function BoundsExample() {
+  return (
+    <LineChart
+      height={150}
+      inset={{ left: 0, right: 0 }}
+      series={[
+        {
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+        },
+      ]}
+      showArea
+    >
+      <ReferenceLine
+        dataX={0}
+        label="No Bounds Inset"
+        labelBoundsInset={0}
+        labelDy={0}
+        labelPosition="top"
+      />
+      <ReferenceLine
+        dataX={13}
+        label="12px Bounds Inset"
+        labelBoundsInset={{ left: 12, right: 12 }}
+        labelDy={0}
+        labelPosition="top"
+      />
+    </LineChart>
+  );
+}
+```
+
+#### Custom Component
+
+You can adjust the style of the label using a custom `LabelComponent`.
 
 ```jsx
 function LabelStyleExample() {
   const theme = useTheme();
+
+  const LiquidationLabel = useMemo(
+    () =>
+      memo((props) => (
+        <DefaultReferenceLineLabel
+          {...props}
+          background={theme.color.accentSubtleYellow}
+          borderRadius={4}
+          color={`rgb(${theme.color.accentSubtleYellow})`}
+          dx={12}
+          font="label1"
+          horizontalAlignment="left"
+          inset={{ top: 4, bottom: 4, left: 8, right: 8 }}
+        />
+      )),
+    [theme.color.accentSubtleYellow],
+  );
+
+  const PriceLabel = useMemo(
+    () =>
+      memo((props) => (
+        <DefaultReferenceLineLabel
+          {...props}
+          background={theme.color.bg}
+          borderRadius={4}
+          color={`rgb(${theme.color.yellow70})`}
+          dx={-12}
+          font="label1"
+          horizontalAlignment="right"
+          inset={{ top: 2, bottom: 2, left: 4, right: 4 }}
+        />
+      )),
+    [theme.color.bg, theme.color.yellow70],
+  );
+
   return (
     <LineChart
-      curve="monotone"
       height={150}
       inset={{ right: 4 }}
       series={[
@@ -101,33 +254,17 @@ function LabelStyleExample() {
       ]}
     >
       <ReferenceLine
+        LabelComponent={LiquidationLabel}
         dataY={25}
         label="Liquidation"
         labelPosition="left"
-        labelProps={{
-          horizontalAlignment: 'left',
-          dx: 12,
-          borderRadius: 4,
-          inset: { top: 4, bottom: 4, left: 8, right: 8 },
-          color: `rgb(${theme.color.accentSubtleYellow})`,
-          background: theme.color.accentSubtleYellow,
-          font: 'label1',
-        }}
         stroke={theme.color.bgWarning}
       />
       <ReferenceLine
+        LabelComponent={PriceLabel}
         dataY={25}
         label="$25"
         labelPosition="right"
-        labelProps={{
-          horizontalAlignment: 'right',
-          dx: -12,
-          borderRadius: 4,
-          inset: { top: 2, bottom: 2, left: 4, right: 4 },
-          color: `rgb(${theme.color.yellow70})`,
-          background: theme.color.bg,
-          font: 'label1',
-        }}
         stroke="transparent"
       />
     </LineChart>
@@ -139,14 +276,20 @@ function LabelStyleExample() {
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
+| `LabelComponent` | `ReferenceLineLabelComponent` | No | `DefaultReferenceLineLabel` | Component to render the label. |
 | `LineComponent` | `LineComponent` | No | `DottedLine` | Component to render the line. |
-| `dataX` | `number` | No | `-` | X-value for vertical reference line (data index). |
-| `dataY` | `number` | No | `-` | Y-value for horizontal reference line (data value). |
-| `label` | `null \| string \| number \| ReactElement<TSpanProps, TSpan> \| ReactElement<TextPathProps, TextPath> \| ValidChartTextChildElements[]` | No | `-` | Label content to display near the reference line. Can be a string or ReactNode for rich formatting. |
+| `dataX` | `number \| { value: number; }` | No | `-` | X-value for vertical reference line (data index). |
+| `dataY` | `number \| { value: number; }` | No | `-` | Y-value for horizontal reference line (data value). |
+| `label` | `string \| SkParagraph \| { value: string \| SkParagraph; }` | No | `-` | Label content to display near the reference line. Can be a string or ReactNode for rich formatting. |
+| `labelBoundsInset` | `number \| ChartInset` | No | `{ top: 4, bottom: 20, left: 12, right: 12 } when labelElevated is true, otherwise none` | Bounds inset for the label to prevent cutoff at chart edges. Especially useful when labelElevated is true to prevent shadow clipping. Can be a number (applied to all sides) or a ChartInset object. |
+| `labelDx` | `number` | No | `-` | Horizontal offset for the label in pixels. |
+| `labelDy` | `number` | No | `-` | Vertical offset for the label in pixels. |
+| `labelElevated` | `boolean` | No | `-` | Whether to elevate the label with a shadow. When true, applies elevation and automatically adds bounds to keep label within chart area. |
+| `labelFont` | `display1 \| display2 \| display3 \| title1 \| title2 \| title3 \| title4 \| headline \| body \| label1 \| label2 \| caption \| legal` | No | `-` | Font style for the label text. |
+| `labelHorizontalAlignment` | `left \| right \| center` | No | `-` | Horizontal alignment of the label text. |
 | `labelPosition` | `TextHorizontalAlignment \| TextVerticalAlignment` | No | `'right' 'top'` | Position of the label along the horizontal line. Position of the label along the vertical line. |
-| `labelProps` | `ReferenceLineLabelProps` | No | `-` | Props for the label rendering. Consolidates styling and positioning options for the ChartText component. Alignment defaults are set based on line orientation and can be overridden here. |
+| `labelVerticalAlignment` | `top \| bottom \| middle` | No | `-` | Vertical alignment of the label text. |
 | `stroke` | `string` | No | `theme.color.bgLine` | The color of the line. |
-| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
 | `yAxisId` | `string` | No | `-` | The ID of the y-axis to use for positioning. Defaults to defaultAxisId if not specified. |
 
 

package/mcp-docs/mobile/components/RollingNumber.txt

@@ -692,7 +692,7 @@ ValueSection
 | `bottom` | `string \| number` | No | `-` | - |
 | `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Base text color token. When {@link colorPulseOnUpdate } is true, the color briefly pulses to a positive or negative mid color before returning to this base color. Defaults to {@code fg}. |
 | `colorPulseOnUpdate` | `boolean` | No | `-` | Enables color pulsing on positive or negative changes. |
-| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `dangerouslySetBackground` | `string \| OpaqueColorValue` | No | `-` | - |
 | `dangerouslySetColor` | `string \| OpaqueColorValue` | No | `-` | - |
 | `dataDetectorType` | `link \| none \| all \| email \| phoneNumber \| null` | No | `-` | Determines the types of data converted to clickable URLs in the text element. By default no data types are detected. |
@@ -714,7 +714,7 @@ ValueSection
 | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
 | `format` | `(Omit<NumberFormatOptions, notation> & { notation?: compact \| standard; }) \| undefined` | No | `-` | Intl.NumberFormat options applied when formatting the value. Scientific and engineering notation are not supported. |
 | `formattedValue` | `string` | No | `-` | Preformatted value rendered instead of formatting {@link value }. {@link value } is still used to determine numeric deltas. |
-| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `height` | `string \| number` | No | `-` | - |
 | `id` | `string` | No | `-` | Used to reference react managed views from native code. |
 | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
@@ -724,13 +724,13 @@ ValueSection
 | `lineBreakStrategyIOS` | `none \| standard \| hangul-word \| push-out` | No | `-` | Set line break strategy on iOS. |
 | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
 | `locale` | `string \| Locale \| readonly (string \| Locale)[]` | No | `-` | Locale used for formatting. Defaults to the locale from {@link LocaleProvider }. |
-| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
-| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
-| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
-| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
-| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
-| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
-| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginStart` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginTop` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginX` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
 | `maxFontSizeMultiplier` | `number \| null` | No | `-` | Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values: - null/undefined (default): inherit from the parent node or the global default (0) - 0: no max, ignore parent/global default - >= 1: sets the maxFontSizeMultiplier of this node to this value |
 | `maxHeight` | `string \| number` | No | `-` | - |
 | `maxWidth` | `string \| number` | No | `-` | - |
@@ -750,20 +750,20 @@ ValueSection
 | `onTextLayout` | `((event: NativeSyntheticEvent<TextLayoutEventData>) => void)` | No | `-` | Invoked on Text layout |
 | `opacity` | `number \| AnimatedNode` | No | `-` | - |
 | `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
-| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
-| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
-| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
-| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
-| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
-| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
-| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
-| `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
+| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
 | `positivePulseColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Color token used for positive numeric changes. Defaults to {@code fgPositive}. |
 | `prefix` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content rendered before the formatted value. |
 | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
 | `renderEmptyNode` | `boolean` | No | `-` | - |
 | `right` | `string \| number` | No | `-` | - |
-| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `selectable` | `boolean` | No | `-` | Lets the user select text, to use the native copy and paste functionality. |
 | `selectionColor` | `string \| OpaqueColorValue` | No | `-` | The highlight color of the text. |
 | `style` | `false \| Value \| AnimatedInterpolation<string \| number> \| RegisteredStyle<TextStyle> \| WithAnimatedObject<TextStyle> \| WithAnimatedArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle> \| RecursiveArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle>> \| readonly (Falsy \| TextStyle \| RegisteredStyle<TextStyle>)[]> \| null` | No | `-` | - |