@coinbase/cds-mcp-server 8.17.3 → 8.17.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (284) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/mcp-docs/mobile/components/Accordion.txt +11 -12
  3. package/mcp-docs/mobile/components/AccordionItem.txt +5 -6
  4. package/mcp-docs/mobile/components/Alert.txt +21 -22
  5. package/mcp-docs/mobile/components/AreaChart.txt +118 -119
  6. package/mcp-docs/mobile/components/Avatar.txt +82 -83
  7. package/mcp-docs/mobile/components/AvatarButton.txt +103 -104
  8. package/mcp-docs/mobile/components/Banner.txt +100 -101
  9. package/mcp-docs/mobile/components/BarChart.txt +120 -121
  10. package/mcp-docs/mobile/components/Box.txt +65 -66
  11. package/mcp-docs/mobile/components/BrowserBar.txt +38 -39
  12. package/mcp-docs/mobile/components/Button.txt +78 -79
  13. package/mcp-docs/mobile/components/ButtonGroup.txt +10 -11
  14. package/mcp-docs/mobile/components/Carousel.txt +103 -104
  15. package/mcp-docs/mobile/components/CartesianChart.txt +107 -108
  16. package/mcp-docs/mobile/components/CellMedia.txt +15 -16
  17. package/mcp-docs/mobile/components/Checkbox.txt +35 -36
  18. package/mcp-docs/mobile/components/CheckboxCell.txt +73 -74
  19. package/mcp-docs/mobile/components/CheckboxGroup.txt +24 -25
  20. package/mcp-docs/mobile/components/Chip.txt +67 -68
  21. package/mcp-docs/mobile/components/Coachmark.txt +42 -43
  22. package/mcp-docs/mobile/components/Collapsible.txt +15 -16
  23. package/mcp-docs/mobile/components/ContainedAssetCard.txt +16 -17
  24. package/mcp-docs/mobile/components/ContentCard.txt +99 -100
  25. package/mcp-docs/mobile/components/ContentCardBody.txt +23 -24
  26. package/mcp-docs/mobile/components/ContentCardFooter.txt +19 -20
  27. package/mcp-docs/mobile/components/ContentCardHeader.txt +33 -34
  28. package/mcp-docs/mobile/components/ContentCell.txt +102 -103
  29. package/mcp-docs/mobile/components/ControlGroup.txt +106 -107
  30. package/mcp-docs/mobile/components/DatePicker.txt +121 -122
  31. package/mcp-docs/mobile/components/Divider.txt +31 -32
  32. package/mcp-docs/mobile/components/DotCount.txt +15 -16
  33. package/mcp-docs/mobile/components/DotStatusColor.txt +12 -13
  34. package/mcp-docs/mobile/components/DotSymbol.txt +21 -22
  35. package/mcp-docs/mobile/components/Fallback.txt +49 -50
  36. package/mcp-docs/mobile/components/FloatingAssetCard.txt +13 -14
  37. package/mcp-docs/mobile/components/HStack.txt +99 -100
  38. package/mcp-docs/mobile/components/HeroSquare.txt +11 -12
  39. package/mcp-docs/mobile/components/Icon.txt +16 -17
  40. package/mcp-docs/mobile/components/IconButton.txt +104 -105
  41. package/mcp-docs/mobile/components/InputChip.txt +62 -63
  42. package/mcp-docs/mobile/components/Interactable.txt +72 -73
  43. package/mcp-docs/mobile/components/LineChart.txt +117 -118
  44. package/mcp-docs/mobile/components/Link.txt +113 -114
  45. package/mcp-docs/mobile/components/ListCell.txt +149 -128
  46. package/mcp-docs/mobile/components/LogoMark.txt +8 -9
  47. package/mcp-docs/mobile/components/LogoWordMark.txt +7 -8
  48. package/mcp-docs/mobile/components/Lottie.txt +39 -40
  49. package/mcp-docs/mobile/components/LottieStatusAnimation.txt +11 -12
  50. package/mcp-docs/mobile/components/Modal.txt +36 -37
  51. package/mcp-docs/mobile/components/ModalBody.txt +5 -6
  52. package/mcp-docs/mobile/components/ModalFooter.txt +5 -6
  53. package/mcp-docs/mobile/components/ModalHeader.txt +5 -6
  54. package/mcp-docs/mobile/components/MultiContentModule.txt +107 -108
  55. package/mcp-docs/mobile/components/NavigationTitle.txt +13 -14
  56. package/mcp-docs/mobile/components/NavigationTitleSelect.txt +20 -21
  57. package/mcp-docs/mobile/components/NudgeCard.txt +20 -21
  58. package/mcp-docs/mobile/components/Numpad.txt +108 -109
  59. package/mcp-docs/mobile/components/Overlay.txt +45 -46
  60. package/mcp-docs/mobile/components/PageFooter.txt +57 -58
  61. package/mcp-docs/mobile/components/PageHeader.txt +79 -80
  62. package/mcp-docs/mobile/components/PeriodSelector.txt +98 -99
  63. package/mcp-docs/mobile/components/Pictogram.txt +11 -12
  64. package/mcp-docs/mobile/components/Point.txt +21 -22
  65. package/mcp-docs/mobile/components/PortalProvider.txt +7 -8
  66. package/mcp-docs/mobile/components/Pressable.txt +67 -68
  67. package/mcp-docs/mobile/components/ProgressBar.txt +18 -19
  68. package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +13 -14
  69. package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +13 -14
  70. package/mcp-docs/mobile/components/ProgressCircle.txt +22 -23
  71. package/mcp-docs/mobile/components/Radio.txt +35 -36
  72. package/mcp-docs/mobile/components/RadioCell.txt +73 -74
  73. package/mcp-docs/mobile/components/RadioGroup.txt +35 -36
  74. package/mcp-docs/mobile/components/ReferenceLine.txt +15 -16
  75. package/mcp-docs/mobile/components/RemoteImage.txt +47 -48
  76. package/mcp-docs/mobile/components/RemoteImageGroup.txt +11 -12
  77. package/mcp-docs/mobile/components/RollingNumber.txt +130 -131
  78. package/mcp-docs/mobile/components/Scrubber.txt +19 -20
  79. package/mcp-docs/mobile/components/SearchInput.txt +77 -78
  80. package/mcp-docs/mobile/components/SectionHeader.txt +16 -17
  81. package/mcp-docs/mobile/components/SegmentedTabs.txt +105 -106
  82. package/mcp-docs/mobile/components/Select.txt +35 -36
  83. package/mcp-docs/mobile/components/SelectChip.txt +143 -144
  84. package/mcp-docs/mobile/components/SelectOption.txt +26 -27
  85. package/mcp-docs/mobile/components/SlideButton.txt +128 -129
  86. package/mcp-docs/mobile/components/Spacer.txt +27 -28
  87. package/mcp-docs/mobile/components/Sparkline.txt +18 -19
  88. package/mcp-docs/mobile/components/SparklineGradient.txt +18 -19
  89. package/mcp-docs/mobile/components/SparklineInteractive.txt +37 -38
  90. package/mcp-docs/mobile/components/SparklineInteractiveHeader.txt +12 -13
  91. package/mcp-docs/mobile/components/Spinner.txt +15 -16
  92. package/mcp-docs/mobile/components/SpotIcon.txt +11 -12
  93. package/mcp-docs/mobile/components/SpotRectangle.txt +11 -12
  94. package/mcp-docs/mobile/components/SpotSquare.txt +11 -12
  95. package/mcp-docs/mobile/components/Stepper.txt +113 -114
  96. package/mcp-docs/mobile/components/SubBrandLogoMark.txt +8 -9
  97. package/mcp-docs/mobile/components/SubBrandLogoWordMark.txt +8 -9
  98. package/mcp-docs/mobile/components/Switch.txt +35 -36
  99. package/mcp-docs/mobile/components/TabIndicator.txt +12 -13
  100. package/mcp-docs/mobile/components/TabLabel.txt +28 -29
  101. package/mcp-docs/mobile/components/TabNavigation.txt +41 -42
  102. package/mcp-docs/mobile/components/TabbedChips.txt +38 -39
  103. package/mcp-docs/mobile/components/Tabs.txt +76 -77
  104. package/mcp-docs/mobile/components/Tag.txt +102 -103
  105. package/mcp-docs/mobile/components/Text.txt +91 -92
  106. package/mcp-docs/mobile/components/TextInput.txt +107 -108
  107. package/mcp-docs/mobile/components/ThemeProvider.txt +8 -9
  108. package/mcp-docs/mobile/components/Toast.txt +82 -83
  109. package/mcp-docs/mobile/components/Tooltip.txt +20 -21
  110. package/mcp-docs/mobile/components/TopNavBar.txt +55 -56
  111. package/mcp-docs/mobile/components/Tour.txt +18 -19
  112. package/mcp-docs/mobile/components/Tray.txt +43 -44
  113. package/mcp-docs/mobile/components/UpsellCard.txt +16 -17
  114. package/mcp-docs/mobile/components/VStack.txt +99 -100
  115. package/mcp-docs/mobile/components/XAxis.txt +25 -26
  116. package/mcp-docs/mobile/components/YAxis.txt +26 -27
  117. package/mcp-docs/mobile/getting-started/{mcp-server.txt → ai-overview.txt} +51 -37
  118. package/mcp-docs/mobile/getting-started/installation.txt +57 -0
  119. package/mcp-docs/mobile/getting-started/introduction.txt +3 -0
  120. package/mcp-docs/mobile/getting-started/playground.txt +3 -0
  121. package/mcp-docs/mobile/getting-started/styling.txt +84 -0
  122. package/mcp-docs/mobile/getting-started/theming.txt +286 -0
  123. package/mcp-docs/mobile/hooks/useDimensions.txt +27 -2
  124. package/mcp-docs/mobile/hooks/useEventHandler.txt +120 -0
  125. package/mcp-docs/mobile/hooks/useMergeRefs.txt +116 -0
  126. package/mcp-docs/mobile/hooks/useOverlayContentContext.txt +67 -2
  127. package/mcp-docs/mobile/hooks/usePreviousValue.txt +74 -0
  128. package/mcp-docs/mobile/hooks/useRefMap.txt +178 -0
  129. package/mcp-docs/mobile/hooks/useTheme.txt +213 -2
  130. package/mcp-docs/mobile/routes.txt +8 -1
  131. package/mcp-docs/web/components/Accordion.txt +12 -13
  132. package/mcp-docs/web/components/AccordionItem.txt +5 -6
  133. package/mcp-docs/web/components/Alert.txt +24 -25
  134. package/mcp-docs/web/components/AreaChart.txt +137 -138
  135. package/mcp-docs/web/components/Avatar.txt +91 -92
  136. package/mcp-docs/web/components/AvatarButton.txt +113 -114
  137. package/mcp-docs/web/components/Banner.txt +101 -102
  138. package/mcp-docs/web/components/BarChart.txt +367 -368
  139. package/mcp-docs/web/components/Box.txt +65 -66
  140. package/mcp-docs/web/components/Button.txt +81 -82
  141. package/mcp-docs/web/components/ButtonGroup.txt +10 -11
  142. package/mcp-docs/web/components/Calendar.txt +56 -57
  143. package/mcp-docs/web/components/Carousel.txt +116 -117
  144. package/mcp-docs/web/components/CartesianChart.txt +357 -358
  145. package/mcp-docs/web/components/CellMedia.txt +14 -15
  146. package/mcp-docs/web/components/Checkbox.txt +22 -23
  147. package/mcp-docs/web/components/CheckboxCell.txt +70 -71
  148. package/mcp-docs/web/components/CheckboxGroup.txt +15 -16
  149. package/mcp-docs/web/components/Chip.txt +67 -68
  150. package/mcp-docs/web/components/Coachmark.txt +69 -70
  151. package/mcp-docs/web/components/Collapsible.txt +15 -16
  152. package/mcp-docs/web/components/ContainedAssetCard.txt +108 -109
  153. package/mcp-docs/web/components/ContentCard.txt +101 -102
  154. package/mcp-docs/web/components/ContentCardBody.txt +23 -24
  155. package/mcp-docs/web/components/ContentCardFooter.txt +19 -20
  156. package/mcp-docs/web/components/ContentCardHeader.txt +33 -34
  157. package/mcp-docs/web/components/ContentCell.txt +85 -86
  158. package/mcp-docs/web/components/ControlGroup.txt +108 -109
  159. package/mcp-docs/web/components/DatePicker.txt +59 -60
  160. package/mcp-docs/web/components/Divider.txt +31 -32
  161. package/mcp-docs/web/components/DotCount.txt +17 -18
  162. package/mcp-docs/web/components/DotStatusColor.txt +12 -13
  163. package/mcp-docs/web/components/DotSymbol.txt +24 -25
  164. package/mcp-docs/web/components/Dropdown.txt +31 -32
  165. package/mcp-docs/web/components/Fallback.txt +49 -50
  166. package/mcp-docs/web/components/FloatingAssetCard.txt +108 -109
  167. package/mcp-docs/web/components/FullscreenAlert.txt +20 -21
  168. package/mcp-docs/web/components/FullscreenModal.txt +28 -29
  169. package/mcp-docs/web/components/FullscreenModalLayout.txt +19 -20
  170. package/mcp-docs/web/components/Grid.txt +106 -107
  171. package/mcp-docs/web/components/GridColumn.txt +96 -97
  172. package/mcp-docs/web/components/HStack.txt +101 -102
  173. package/mcp-docs/web/components/HeroSquare.txt +12 -13
  174. package/mcp-docs/web/components/Icon.txt +27 -28
  175. package/mcp-docs/web/components/IconButton.txt +117 -118
  176. package/mcp-docs/web/components/InputChip.txt +62 -63
  177. package/mcp-docs/web/components/Interactable.txt +75 -76
  178. package/mcp-docs/web/components/LineChart.txt +366 -367
  179. package/mcp-docs/web/components/Link.txt +114 -115
  180. package/mcp-docs/web/components/ListCell.txt +157 -136
  181. package/mcp-docs/web/components/LogoMark.txt +8 -9
  182. package/mcp-docs/web/components/LogoWordMark.txt +7 -8
  183. package/mcp-docs/web/components/Lottie.txt +44 -45
  184. package/mcp-docs/web/components/LottieStatusAnimation.txt +11 -12
  185. package/mcp-docs/web/components/MediaQueryProvider.txt +7 -8
  186. package/mcp-docs/web/components/Modal.txt +69 -66
  187. package/mcp-docs/web/components/ModalBody.txt +5 -6
  188. package/mcp-docs/web/components/ModalFooter.txt +5 -6
  189. package/mcp-docs/web/components/ModalHeader.txt +5 -6
  190. package/mcp-docs/web/components/MultiContentModule.txt +109 -110
  191. package/mcp-docs/web/components/NavigationBar.txt +18 -19
  192. package/mcp-docs/web/components/NavigationTitle.txt +7 -8
  193. package/mcp-docs/web/components/NavigationTitleSelect.txt +9 -10
  194. package/mcp-docs/web/components/NudgeCard.txt +61 -62
  195. package/mcp-docs/web/components/Overlay.txt +57 -58
  196. package/mcp-docs/web/components/PageFooter.txt +77 -78
  197. package/mcp-docs/web/components/PageHeader.txt +107 -108
  198. package/mcp-docs/web/components/Pagination.txt +115 -116
  199. package/mcp-docs/web/components/PeriodSelector.txt +158 -159
  200. package/mcp-docs/web/components/Pictogram.txt +13 -14
  201. package/mcp-docs/web/components/Point.txt +169 -170
  202. package/mcp-docs/web/components/PortalProvider.txt +6 -7
  203. package/mcp-docs/web/components/Pressable.txt +73 -74
  204. package/mcp-docs/web/components/ProgressBar.txt +20 -21
  205. package/mcp-docs/web/components/ProgressBarWithFixedLabels.txt +15 -16
  206. package/mcp-docs/web/components/ProgressBarWithFloatLabel.txt +15 -16
  207. package/mcp-docs/web/components/ProgressCircle.txt +24 -25
  208. package/mcp-docs/web/components/Radio.txt +22 -23
  209. package/mcp-docs/web/components/RadioCell.txt +83 -84
  210. package/mcp-docs/web/components/RadioGroup.txt +22 -23
  211. package/mcp-docs/web/components/ReferenceLine.txt +22 -23
  212. package/mcp-docs/web/components/RemoteImage.txt +49 -50
  213. package/mcp-docs/web/components/RemoteImageGroup.txt +11 -12
  214. package/mcp-docs/web/components/RollingNumber.txt +131 -132
  215. package/mcp-docs/web/components/Scrubber.txt +22 -23
  216. package/mcp-docs/web/components/SearchInput.txt +29 -30
  217. package/mcp-docs/web/components/SectionHeader.txt +98 -99
  218. package/mcp-docs/web/components/SegmentedTabs.txt +109 -110
  219. package/mcp-docs/web/components/Select.txt +22 -23
  220. package/mcp-docs/web/components/SelectChip.txt +134 -135
  221. package/mcp-docs/web/components/SelectOption.txt +31 -32
  222. package/mcp-docs/web/components/Sidebar.txt +109 -110
  223. package/mcp-docs/web/components/SidebarItem.txt +6 -7
  224. package/mcp-docs/web/components/SidebarMoreMenu.txt +5 -6
  225. package/mcp-docs/web/components/Spacer.txt +57 -58
  226. package/mcp-docs/web/components/Sparkline.txt +18 -19
  227. package/mcp-docs/web/components/SparklineGradient.txt +18 -19
  228. package/mcp-docs/web/components/SparklineInteractive.txt +34 -35
  229. package/mcp-docs/web/components/SparklineInteractiveHeader.txt +12 -13
  230. package/mcp-docs/web/components/Spinner.txt +15 -16
  231. package/mcp-docs/web/components/SpotIcon.txt +12 -13
  232. package/mcp-docs/web/components/SpotRectangle.txt +12 -13
  233. package/mcp-docs/web/components/SpotSquare.txt +12 -13
  234. package/mcp-docs/web/components/Stepper.txt +119 -120
  235. package/mcp-docs/web/components/SubBrandLogoMark.txt +8 -9
  236. package/mcp-docs/web/components/SubBrandLogoWordMark.txt +8 -9
  237. package/mcp-docs/web/components/Switch.txt +23 -24
  238. package/mcp-docs/web/components/TabIndicator.txt +12 -13
  239. package/mcp-docs/web/components/TabLabel.txt +28 -29
  240. package/mcp-docs/web/components/TabNavigation.txt +41 -42
  241. package/mcp-docs/web/components/TabbedChips.txt +38 -39
  242. package/mcp-docs/web/components/Table.txt +17 -18
  243. package/mcp-docs/web/components/TableBody.txt +9 -10
  244. package/mcp-docs/web/components/TableCaption.txt +13 -14
  245. package/mcp-docs/web/components/TableCell.txt +21 -22
  246. package/mcp-docs/web/components/TableCellFallback.txt +16 -17
  247. package/mcp-docs/web/components/TableFooter.txt +9 -10
  248. package/mcp-docs/web/components/TableHeader.txt +10 -11
  249. package/mcp-docs/web/components/TableRow.txt +13 -14
  250. package/mcp-docs/web/components/Tabs.txt +94 -95
  251. package/mcp-docs/web/components/Tag.txt +106 -107
  252. package/mcp-docs/web/components/Text.txt +110 -111
  253. package/mcp-docs/web/components/TextInput.txt +32 -33
  254. package/mcp-docs/web/components/ThemeProvider.txt +27 -28
  255. package/mcp-docs/web/components/TileButton.txt +37 -38
  256. package/mcp-docs/web/components/Toast.txt +82 -83
  257. package/mcp-docs/web/components/Tooltip.txt +22 -23
  258. package/mcp-docs/web/components/Tour.txt +21 -22
  259. package/mcp-docs/web/components/Tray.txt +23 -24
  260. package/mcp-docs/web/components/UpsellCard.txt +16 -17
  261. package/mcp-docs/web/components/VStack.txt +101 -102
  262. package/mcp-docs/web/components/XAxis.txt +25 -26
  263. package/mcp-docs/web/components/YAxis.txt +26 -27
  264. package/mcp-docs/web/getting-started/{mcp-server.txt → ai-overview.txt} +51 -37
  265. package/mcp-docs/web/getting-started/installation.txt +103 -0
  266. package/mcp-docs/web/getting-started/introduction.txt +3 -0
  267. package/mcp-docs/web/getting-started/playground.txt +3 -0
  268. package/mcp-docs/web/getting-started/styling.txt +161 -0
  269. package/mcp-docs/web/getting-started/templates.txt +121 -0
  270. package/mcp-docs/web/getting-started/theming.txt +426 -0
  271. package/mcp-docs/web/hooks/useBreakpoints.txt +30 -2
  272. package/mcp-docs/web/hooks/useDimensions.txt +61 -2
  273. package/mcp-docs/web/hooks/useEventHandler.txt +120 -0
  274. package/mcp-docs/web/hooks/useHasMounted.txt +22 -2
  275. package/mcp-docs/web/hooks/useIsoEffect.txt +18 -2
  276. package/mcp-docs/web/hooks/useMediaQuery.txt +22 -2
  277. package/mcp-docs/web/hooks/useMergeRefs.txt +116 -0
  278. package/mcp-docs/web/hooks/useOverlayContentContext.txt +64 -2
  279. package/mcp-docs/web/hooks/usePreviousValue.txt +74 -0
  280. package/mcp-docs/web/hooks/useRefMap.txt +178 -0
  281. package/mcp-docs/web/hooks/useScrollBlocker.txt +21 -2
  282. package/mcp-docs/web/hooks/useTheme.txt +261 -2
  283. package/mcp-docs/web/routes.txt +9 -1
  284. package/package.json +1 -1
@@ -4,21 +4,10 @@ A component to display a group of RemoteImage components in a stack.
4
4
 
5
5
  ## Import
6
6
 
7
- ```jsx
7
+ ```tsx
8
8
  import { RemoteImageGroup } from '@coinbase/cds-mobile/media/RemoteImageGroup'
9
9
  ```
10
10
 
11
- ## Props
12
-
13
- | Prop | Type | Required | Default | Description |
14
- | --- | --- | --- | --- | --- |
15
- | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Children content |
16
- | `max` | `number` | No | `4` | Indicates the number of remote image before it collapses |
17
- | `shape` | `rectangle \| circle \| squircle \| square \| hexagon` | No | `circle` | Shape of all RemoteImage children in the group |
18
- | `size` | `number \| AvatarSize` | No | `m` | Size of all RemoteImage children in the group. |
19
- | `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 |
20
-
21
-
22
11
  ## Examples
23
12
 
24
13
  ### Basic Usage
@@ -58,4 +47,14 @@ import { RemoteImageGroup } from '@coinbase/cds-mobile/media/RemoteImageGroup'
58
47
  </RemoteImageGroup>
59
48
  ```
60
49
 
50
+ ## Props
51
+
52
+ | Prop | Type | Required | Default | Description |
53
+ | --- | --- | --- | --- | --- |
54
+ | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Children content |
55
+ | `max` | `number` | No | `4` | Indicates the number of remote image before it collapses |
56
+ | `shape` | `rectangle \| circle \| squircle \| square \| hexagon` | No | `circle` | Shape of all RemoteImage children in the group |
57
+ | `size` | `number \| AvatarSize` | No | `m` | Size of all RemoteImage children in the group. |
58
+ | `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 |
59
+
61
60
 
@@ -4,140 +4,10 @@ A numeric display that animates value changes with rolling digits.
4
4
 
5
5
  ## Import
6
6
 
7
- ```jsx
7
+ ```tsx
8
8
  import { RollingNumber } from '@coinbase/cds-mobile/numbers/RollingNumber'
9
9
  ```
10
10
 
11
- ## Props
12
-
13
- | Prop | Type | Required | Default | Description |
14
- | --- | --- | --- | --- | --- |
15
- | `value` | `number` | Yes | `-` | Number to display. |
16
- | `RollingNumberAffixSectionComponent` | `RollingNumberAffixSectionComponent` | No | `-` | Component used to render prefix and suffix sections. |
17
- | `RollingNumberDigitComponent` | `RollingNumberDigitComponent` | No | `-` | Component used to render individual digits. |
18
- | `RollingNumberMaskComponent` | `RollingNumberMaskComponent` | No | `-` | Component used to render the mask container. |
19
- | `RollingNumberSymbolComponent` | `RollingNumberSymbolComponent` | No | `-` | Component used to render separators and other symbols. |
20
- | `RollingNumberValueSectionComponent` | `RollingNumberValueSectionComponent` | No | `-` | Component used to render the numeric sections. |
21
- | `accessibilityLabelPrefix` | `string` | No | `-` | Accessibility label prefix announced before the value. |
22
- | `accessibilityLabelSuffix` | `string` | No | `-` | Accessibility label suffix announced after the value. |
23
- | `adjustsFontSizeToFit` | `boolean` | No | `-` | Specifies whether font should be scaled down automatically to fit given style constraints. |
24
- | `align` | `end \| start \| center \| justify` | No | `start` | Specifies text alignment. On mobile, the value justify is only supported on iOS and fallbacks to start on Android. |
25
- | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
26
- | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
27
- | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
28
- | `allowFontScaling` | `boolean` | No | `-` | Specifies whether fonts should scale to respect Text Size accessibility settings. The default is true. |
29
- | `android_hyphenationFrequency` | `none \| normal \| full` | No | `-` | Hyphenation strategy |
30
- | `animated` | `boolean` | No | `-` | - |
31
- | `aspectRatio` | `string \| number` | No | `-` | - |
32
- | `background` | `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 | `-` | - |
33
- | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
34
- | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
35
- | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
36
- | `borderColor` | `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 | `-` | - |
37
- | `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
38
- | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
39
- | `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
40
- | `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
41
- | `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
42
- | `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
43
- | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
44
- | `bottom` | `string \| number` | No | `-` | - |
45
- | `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}. |
46
- | `colorPulseOnUpdate` | `boolean` | No | `-` | Enables color pulsing on positive or negative changes. |
47
- | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
48
- | `dangerouslySetBackground` | `string \| OpaqueColorValue` | No | `-` | - |
49
- | `dangerouslySetColor` | `string \| OpaqueColorValue` | No | `-` | - |
50
- | `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. |
51
- | `disabled` | `boolean` | No | `-` | Add disabled opacity style to text Specifies the disabled state of the text view for testing purposes. |
52
- | `display` | `flex \| none` | No | `-` | - |
53
- | `dynamicTypeRamp` | `title1 \| title2 \| title3 \| headline \| body \| caption2 \| caption1 \| footnote \| subheadline \| callout \| largeTitle` | No | `-` | The Dynamic Type scale ramp to apply to this element on iOS. |
54
- | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
55
- | `ellipsize` | `middle \| head \| tail \| clip` | No | `-` | Choose ellipsize mode. |
56
- | `ellipsizeMode` | `middle \| head \| tail \| clip` | No | `-` | This can be one of the following values: - head - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., ...wxyz - middle - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. ab...yz - tail - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., abcd... - clip - Lines are not drawn past the edge of the text container. The default is tail. numberOfLines must be set in conjunction with this prop. > clip is working only for iOS |
57
- | `enableSubscriptNotation` | `boolean` | No | `-` | Enables subscript notation for leading zeros in the fractional part (for example, {@code 0.00009 => 0.0₄9}). |
58
- | `flexBasis` | `string \| number` | No | `-` | - |
59
- | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
60
- | `flexGrow` | `number` | No | `-` | - |
61
- | `flexShrink` | `number` | No | `-` | - |
62
- | `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
63
- | `font` | `inherit \| FontFamily` | No | `body` | Set text font family. |
64
- | `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
65
- | `fontSize` | `inherit \| FontSize` | No | `-` | - |
66
- | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
67
- | `format` | `(Omit<NumberFormatOptions, notation> & { notation?: compact \| standard; }) \| undefined` | No | `-` | Intl.NumberFormat options applied when formatting the value. Scientific and engineering notation are not supported. |
68
- | `formattedValue` | `string` | No | `-` | Preformatted value rendered instead of formatting {@link value }. {@link value } is still used to determine numeric deltas. |
69
- | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
70
- | `height` | `string \| number` | No | `-` | - |
71
- | `id` | `string` | No | `-` | Used to reference react managed views from native code. |
72
- | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
73
- | `key` | `Key \| null` | No | `-` | - |
74
- | `left` | `string \| number` | No | `-` | - |
75
- | `lineBreakMode` | `middle \| head \| tail \| clip` | No | `-` | Line Break mode. Works only with numberOfLines. clip is working only for iOS |
76
- | `lineBreakStrategyIOS` | `none \| standard \| hangul-word \| push-out` | No | `-` | Set line break strategy on iOS. |
77
- | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
78
- | `locale` | `string \| Locale \| readonly (string \| Locale)[]` | No | `-` | Locale used for formatting. Defaults to the locale from {@link LocaleProvider }. |
79
- | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
80
- | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
81
- | `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
82
- | `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
83
- | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
84
- | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
85
- | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
86
- | `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 |
87
- | `maxHeight` | `string \| number` | No | `-` | - |
88
- | `maxWidth` | `string \| number` | No | `-` | - |
89
- | `minHeight` | `string \| number` | No | `-` | - |
90
- | `minWidth` | `string \| number` | No | `-` | - |
91
- | `minimumFontScale` | `number` | No | `-` | Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). |
92
- | `mono` | `boolean` | No | `-` | Use monospace font family. |
93
- | `nativeID` | `string` | No | `-` | Used to reference react managed views from native code. |
94
- | `negativePulseColor` | `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 negative numeric changes. Defaults to {@code fgNegative}. |
95
- | `noWrap` | `boolean` | No | `false` | Set text to be in a single line. |
96
- | `numberOfLines` | `number` | No | `-` | Truncates text after wrapping to a defined number of lines. Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. This prop is commonly used with ellipsizeMode. |
97
- | `onLayout` | `((event: LayoutChangeEvent) => void)` | No | `-` | Invoked on mount and layout changes with {nativeEvent: { layout: {x, y, width, height}}}. |
98
- | `onLongPress` | `((event: GestureResponderEvent) => void)` | No | `-` | This function is called on long press. e.g., onLongPress={this.increaseSize}> |
99
- | `onPress` | `((event: GestureResponderEvent) => void)` | No | `-` | This function is called on press. Text intrinsically supports press handling with a default highlight state (which can be disabled with suppressHighlighting). |
100
- | `onPressIn` | `((event: GestureResponderEvent) => void)` | No | `-` | - |
101
- | `onPressOut` | `((event: GestureResponderEvent) => void)` | No | `-` | - |
102
- | `onTextLayout` | `((event: NativeSyntheticEvent<TextLayoutEventData>) => void)` | No | `-` | Invoked on Text layout |
103
- | `opacity` | `number \| AnimatedNode` | No | `-` | - |
104
- | `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
105
- | `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
106
- | `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
107
- | `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
108
- | `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
109
- | `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
110
- | `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
111
- | `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
112
- | `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
113
- | `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}. |
114
- | `prefix` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content rendered before the formatted value. |
115
- | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
116
- | `renderEmptyNode` | `boolean` | No | `-` | - |
117
- | `right` | `string \| number` | No | `-` | - |
118
- | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
119
- | `selectable` | `boolean` | No | `-` | Lets the user select text, to use the native copy and paste functionality. |
120
- | `selectionColor` | `string \| OpaqueColorValue` | No | `-` | The highlight color of the text. |
121
- | `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 | `-` | - |
122
- | `styles` | `{ root?: StyleProp<ViewStyle>; visibleContent?: StyleProp<ViewStyle>; formattedValueSection?: StyleProp<ViewStyle>; prefix?: StyleProp<ViewStyle>; suffix?: StyleProp<ViewStyle>; i18nPrefix?: StyleProp<ViewStyle>; i18nSuffix?: StyleProp<ViewStyle>; integer?: StyleProp<ViewStyle>; fraction?: StyleProp<ViewStyle>; text?: StyleProp<TextStyle>; }` | No | `-` | Style overrides applied to RollingNumber slots. |
123
- | `suffix` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content rendered after the formatted value. |
124
- | `suppressHighlighting` | `boolean` | No | `-` | When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. |
125
- | `tabularNumbers` | `boolean` | No | `false` | Activates the set of figures where numbers are all of the same size, allowing them to be easily aligned. Enables tabular figures on the underlying {@link Text}. All digits render with equal width. Defaults to {@code true}. |
126
- | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. 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 |
127
- | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
128
- | `textBreakStrategy` | `simple \| highQuality \| balanced` | No | `-` | Set text break strategy on Android API Level 23+ default is highQuality. |
129
- | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
130
- | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
131
- | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
132
- | `top` | `string \| number` | No | `-` | - |
133
- | `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
134
- | `transition` | `RollingNumberTransitionConfig` | No | `-` | Reanimated transition overrides. Supports per-property overrides for {@code y} and {@code color} only. |
135
- | `underline` | `boolean` | No | `false` | Set text decoration to underline. |
136
- | `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |
137
- | `width` | `string \| number` | No | `-` | - |
138
- | `zIndex` | `number` | No | `-` | - |
139
-
140
-
141
11
  ## Examples
142
12
 
143
13
  ### Basic Example
@@ -786,4 +656,133 @@ ValueSection
786
656
  └── Animated.View (digit container): vertical stack of digits 0-9 (use translateY to position the current digit)
787
657
  ```
788
658
 
659
+ ## Props
660
+
661
+ | Prop | Type | Required | Default | Description |
662
+ | --- | --- | --- | --- | --- |
663
+ | `value` | `number` | Yes | `-` | Number to display. |
664
+ | `RollingNumberAffixSectionComponent` | `RollingNumberAffixSectionComponent` | No | `-` | Component used to render prefix and suffix sections. |
665
+ | `RollingNumberDigitComponent` | `RollingNumberDigitComponent` | No | `-` | Component used to render individual digits. |
666
+ | `RollingNumberMaskComponent` | `RollingNumberMaskComponent` | No | `-` | Component used to render the mask container. |
667
+ | `RollingNumberSymbolComponent` | `RollingNumberSymbolComponent` | No | `-` | Component used to render separators and other symbols. |
668
+ | `RollingNumberValueSectionComponent` | `RollingNumberValueSectionComponent` | No | `-` | Component used to render the numeric sections. |
669
+ | `accessibilityLabelPrefix` | `string` | No | `-` | Accessibility label prefix announced before the value. |
670
+ | `accessibilityLabelSuffix` | `string` | No | `-` | Accessibility label suffix announced after the value. |
671
+ | `adjustsFontSizeToFit` | `boolean` | No | `-` | Specifies whether font should be scaled down automatically to fit given style constraints. |
672
+ | `align` | `end \| start \| center \| justify` | No | `start` | Specifies text alignment. On mobile, the value justify is only supported on iOS and fallbacks to start on Android. |
673
+ | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
674
+ | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
675
+ | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
676
+ | `allowFontScaling` | `boolean` | No | `-` | Specifies whether fonts should scale to respect Text Size accessibility settings. The default is true. |
677
+ | `android_hyphenationFrequency` | `none \| normal \| full` | No | `-` | Hyphenation strategy |
678
+ | `animated` | `boolean` | No | `-` | - |
679
+ | `aspectRatio` | `string \| number` | No | `-` | - |
680
+ | `background` | `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 | `-` | - |
681
+ | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
682
+ | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
683
+ | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
684
+ | `borderColor` | `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 | `-` | - |
685
+ | `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
686
+ | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
687
+ | `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
688
+ | `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
689
+ | `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
690
+ | `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
691
+ | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
692
+ | `bottom` | `string \| number` | No | `-` | - |
693
+ | `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}. |
694
+ | `colorPulseOnUpdate` | `boolean` | No | `-` | Enables color pulsing on positive or negative changes. |
695
+ | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
696
+ | `dangerouslySetBackground` | `string \| OpaqueColorValue` | No | `-` | - |
697
+ | `dangerouslySetColor` | `string \| OpaqueColorValue` | No | `-` | - |
698
+ | `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. |
699
+ | `disabled` | `boolean` | No | `-` | Add disabled opacity style to text Specifies the disabled state of the text view for testing purposes. |
700
+ | `display` | `flex \| none` | No | `-` | - |
701
+ | `dynamicTypeRamp` | `title1 \| title2 \| title3 \| headline \| body \| caption2 \| caption1 \| footnote \| subheadline \| callout \| largeTitle` | No | `-` | The Dynamic Type scale ramp to apply to this element on iOS. |
702
+ | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
703
+ | `ellipsize` | `middle \| head \| tail \| clip` | No | `-` | Choose ellipsize mode. |
704
+ | `ellipsizeMode` | `middle \| head \| tail \| clip` | No | `-` | This can be one of the following values: - head - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., ...wxyz - middle - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. ab...yz - tail - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., abcd... - clip - Lines are not drawn past the edge of the text container. The default is tail. numberOfLines must be set in conjunction with this prop. > clip is working only for iOS |
705
+ | `enableSubscriptNotation` | `boolean` | No | `-` | Enables subscript notation for leading zeros in the fractional part (for example, {@code 0.00009 => 0.0₄9}). |
706
+ | `flexBasis` | `string \| number` | No | `-` | - |
707
+ | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
708
+ | `flexGrow` | `number` | No | `-` | - |
709
+ | `flexShrink` | `number` | No | `-` | - |
710
+ | `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
711
+ | `font` | `inherit \| FontFamily` | No | `body` | Set text font family. |
712
+ | `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
713
+ | `fontSize` | `inherit \| FontSize` | No | `-` | - |
714
+ | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
715
+ | `format` | `(Omit<NumberFormatOptions, notation> & { notation?: compact \| standard; }) \| undefined` | No | `-` | Intl.NumberFormat options applied when formatting the value. Scientific and engineering notation are not supported. |
716
+ | `formattedValue` | `string` | No | `-` | Preformatted value rendered instead of formatting {@link value }. {@link value } is still used to determine numeric deltas. |
717
+ | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
718
+ | `height` | `string \| number` | No | `-` | - |
719
+ | `id` | `string` | No | `-` | Used to reference react managed views from native code. |
720
+ | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
721
+ | `key` | `Key \| null` | No | `-` | - |
722
+ | `left` | `string \| number` | No | `-` | - |
723
+ | `lineBreakMode` | `middle \| head \| tail \| clip` | No | `-` | Line Break mode. Works only with numberOfLines. clip is working only for iOS |
724
+ | `lineBreakStrategyIOS` | `none \| standard \| hangul-word \| push-out` | No | `-` | Set line break strategy on iOS. |
725
+ | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
726
+ | `locale` | `string \| Locale \| readonly (string \| Locale)[]` | No | `-` | Locale used for formatting. Defaults to the locale from {@link LocaleProvider }. |
727
+ | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
728
+ | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
729
+ | `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
730
+ | `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
731
+ | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
732
+ | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
733
+ | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
734
+ | `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 |
735
+ | `maxHeight` | `string \| number` | No | `-` | - |
736
+ | `maxWidth` | `string \| number` | No | `-` | - |
737
+ | `minHeight` | `string \| number` | No | `-` | - |
738
+ | `minWidth` | `string \| number` | No | `-` | - |
739
+ | `minimumFontScale` | `number` | No | `-` | Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). |
740
+ | `mono` | `boolean` | No | `-` | Use monospace font family. |
741
+ | `nativeID` | `string` | No | `-` | Used to reference react managed views from native code. |
742
+ | `negativePulseColor` | `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 negative numeric changes. Defaults to {@code fgNegative}. |
743
+ | `noWrap` | `boolean` | No | `false` | Set text to be in a single line. |
744
+ | `numberOfLines` | `number` | No | `-` | Truncates text after wrapping to a defined number of lines. Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. This prop is commonly used with ellipsizeMode. |
745
+ | `onLayout` | `((event: LayoutChangeEvent) => void)` | No | `-` | Invoked on mount and layout changes with {nativeEvent: { layout: {x, y, width, height}}}. |
746
+ | `onLongPress` | `((event: GestureResponderEvent) => void)` | No | `-` | This function is called on long press. e.g., onLongPress={this.increaseSize}> |
747
+ | `onPress` | `((event: GestureResponderEvent) => void)` | No | `-` | This function is called on press. Text intrinsically supports press handling with a default highlight state (which can be disabled with suppressHighlighting). |
748
+ | `onPressIn` | `((event: GestureResponderEvent) => void)` | No | `-` | - |
749
+ | `onPressOut` | `((event: GestureResponderEvent) => void)` | No | `-` | - |
750
+ | `onTextLayout` | `((event: NativeSyntheticEvent<TextLayoutEventData>) => void)` | No | `-` | Invoked on Text layout |
751
+ | `opacity` | `number \| AnimatedNode` | No | `-` | - |
752
+ | `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
753
+ | `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
754
+ | `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
755
+ | `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
756
+ | `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
757
+ | `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
758
+ | `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
759
+ | `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
760
+ | `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
761
+ | `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}. |
762
+ | `prefix` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content rendered before the formatted value. |
763
+ | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
764
+ | `renderEmptyNode` | `boolean` | No | `-` | - |
765
+ | `right` | `string \| number` | No | `-` | - |
766
+ | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
767
+ | `selectable` | `boolean` | No | `-` | Lets the user select text, to use the native copy and paste functionality. |
768
+ | `selectionColor` | `string \| OpaqueColorValue` | No | `-` | The highlight color of the text. |
769
+ | `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 | `-` | - |
770
+ | `styles` | `{ root?: StyleProp<ViewStyle>; visibleContent?: StyleProp<ViewStyle>; formattedValueSection?: StyleProp<ViewStyle>; prefix?: StyleProp<ViewStyle>; suffix?: StyleProp<ViewStyle>; i18nPrefix?: StyleProp<ViewStyle>; i18nSuffix?: StyleProp<ViewStyle>; integer?: StyleProp<ViewStyle>; fraction?: StyleProp<ViewStyle>; text?: StyleProp<TextStyle>; }` | No | `-` | Style overrides applied to RollingNumber slots. |
771
+ | `suffix` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content rendered after the formatted value. |
772
+ | `suppressHighlighting` | `boolean` | No | `-` | When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. |
773
+ | `tabularNumbers` | `boolean` | No | `false` | Activates the set of figures where numbers are all of the same size, allowing them to be easily aligned. Enables tabular figures on the underlying {@link Text}. All digits render with equal width. Defaults to {@code true}. |
774
+ | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. 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 |
775
+ | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
776
+ | `textBreakStrategy` | `simple \| highQuality \| balanced` | No | `-` | Set text break strategy on Android API Level 23+ default is highQuality. |
777
+ | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
778
+ | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
779
+ | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
780
+ | `top` | `string \| number` | No | `-` | - |
781
+ | `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
782
+ | `transition` | `RollingNumberTransitionConfig` | No | `-` | Reanimated transition overrides. Supports per-property overrides for {@code y} and {@code color} only. |
783
+ | `underline` | `boolean` | No | `false` | Set text decoration to underline. |
784
+ | `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |
785
+ | `width` | `string \| number` | No | `-` | - |
786
+ | `zIndex` | `number` | No | `-` | - |
787
+
789
788
 
@@ -4,29 +4,10 @@ An interactive scrubber component for exploring individual data points in charts
4
4
 
5
5
  ## Import
6
6
 
7
- ```jsx
7
+ ```tsx
8
8
  import { Scrubber } from '@coinbase/cds-mobile-visualization'
9
9
  ```
10
10
 
11
- ## Props
12
-
13
- | Prop | Type | Required | Default | Description |
14
- | --- | --- | --- | --- | --- |
15
- | `BeaconComponent` | `ComponentClass<ScrubberBeaconProps, any> \| FunctionComponent<ScrubberBeaconProps>` | No | `-` | Custom component for the scrubber beacon. |
16
- | `LineComponent` | `FunctionComponent<ReferenceLineProps> \| ComponentClass<ReferenceLineProps, any>` | No | `-` | Custom component for the scrubber line. |
17
- | `hideLine` | `boolean` | No | `-` | Hides the scrubber line |
18
- | `hideOverlay` | `boolean` | No | `-` | Whether to hide the overlay rect which obscures future data. |
19
- | `idlePulse` | `boolean` | No | `-` | Pulse the scrubber beacon while it is at rest. |
20
- | `key` | `Key \| null` | No | `-` | - |
21
- | `label` | `ChartTextChildren \| ((dataIndex: number) => ChartTextChildren)` | No | `-` | Label text displayed above the scrubber line. |
22
- | `labelProps` | `ReferenceLineLabelProps` | No | `-` | Props passed to the scrubber lines label. |
23
- | `lineStroke` | `string` | No | `-` | Stroke color for the scrubber line. |
24
- | `overlayOffset` | `number` | No | `2` | Offset of the overlay rect relative to the drawing area. Useful for when scrubbing over lines, where the stroke width would cause part of the line to be visible. |
25
- | `ref` | `((instance: ScrubberBeaconRef \| null) => void) \| RefObject<ScrubberBeaconRef> \| null` | No | `-` | - |
26
- | `seriesIds` | `string[]` | No | `-` | An array of series IDs that will receive visual emphasis as the user scrubs through the chart. Use this prop to restrict the scrubbing visual behavior to specific series. By default, all series will be highlighted by the Scrubber. |
27
- | `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 |
28
-
29
-
30
11
  ## Examples
31
12
 
32
13
  ### Basic Example
@@ -201,4 +182,22 @@ By default, the scrubber will show an overlay to de-emphasize future data. You c
201
182
  </LineChart>
202
183
  ```
203
184
 
185
+ ## Props
186
+
187
+ | Prop | Type | Required | Default | Description |
188
+ | --- | --- | --- | --- | --- |
189
+ | `BeaconComponent` | `ComponentClass<ScrubberBeaconProps, any> \| FunctionComponent<ScrubberBeaconProps>` | No | `-` | Custom component for the scrubber beacon. |
190
+ | `LineComponent` | `FunctionComponent<ReferenceLineProps> \| ComponentClass<ReferenceLineProps, any>` | No | `-` | Custom component for the scrubber line. |
191
+ | `hideLine` | `boolean` | No | `-` | Hides the scrubber line |
192
+ | `hideOverlay` | `boolean` | No | `-` | Whether to hide the overlay rect which obscures future data. |
193
+ | `idlePulse` | `boolean` | No | `-` | Pulse the scrubber beacon while it is at rest. |
194
+ | `key` | `Key \| null` | No | `-` | - |
195
+ | `label` | `ChartTextChildren \| ((dataIndex: number) => ChartTextChildren)` | No | `-` | Label text displayed above the scrubber line. |
196
+ | `labelProps` | `ReferenceLineLabelProps` | No | `-` | Props passed to the scrubber lines label. |
197
+ | `lineStroke` | `string` | No | `-` | Stroke color for the scrubber line. |
198
+ | `overlayOffset` | `number` | No | `2` | Offset of the overlay rect relative to the drawing area. Useful for when scrubbing over lines, where the stroke width would cause part of the line to be visible. |
199
+ | `ref` | `((instance: ScrubberBeaconRef \| null) => void) \| RefObject<ScrubberBeaconRef> \| null` | No | `-` | - |
200
+ | `seriesIds` | `string[]` | No | `-` | An array of series IDs that will receive visual emphasis as the user scrubs through the chart. Use this prop to restrict the scrubbing visual behavior to specific series. By default, all series will be highlighted by the Scrubber. |
201
+ | `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 |
202
+
204
203
 
@@ -4,10 +4,86 @@ A control for searching a dataset.
4
4
 
5
5
  ## Import
6
6
 
7
- ```jsx
7
+ ```tsx
8
8
  import { SearchInput } from '@coinbase/cds-mobile/controls/SearchInput'
9
9
  ```
10
10
 
11
+ ## Examples
12
+
13
+ ### Basic usage
14
+
15
+ ```tsx
16
+ function BasicSearchInput() {
17
+ const [value, setValue] = useState('');
18
+ return (
19
+ <VStack gap={2}>
20
+ <SearchInput
21
+ value={value}
22
+ onChangeText={setValue}
23
+ onClear={() => setValue('')}
24
+ onSearch={(searchTerm) => console.log('Searching for:', searchTerm)}
25
+ placeholder="Search..."
26
+ />
27
+ <Text color="foregroundMuted" font="caption">
28
+ Submit on keyboard or tap search icon
29
+ </Text>
30
+ </VStack>
31
+ );
32
+ }
33
+ ```
34
+
35
+ ### With Back Navigation
36
+
37
+ ```tsx
38
+ function SearchInputWithBack() {
39
+ const [value, setValue] = useState('');
40
+ return (
41
+ <VStack gap={2}>
42
+ <SearchInput
43
+ value={value}
44
+ onChangeText={setValue}
45
+ onClear={() => setValue('')}
46
+ onBack={() => console.log('Navigating back')}
47
+ onSearch={(searchTerm) => console.log('Searching for:', searchTerm)}
48
+ placeholder="Focus to see back arrow..."
49
+ />
50
+ <Text color="foregroundMuted" font="caption">
51
+ Search icon changes to back arrow on focus
52
+ </Text>
53
+ </VStack>
54
+ );
55
+ }
56
+ ```
57
+
58
+ ### Variants
59
+
60
+ ```tsx
61
+ function SearchInputVariants() {
62
+ const [value1, setValue1] = useState('');
63
+ const [value2, setValue2] = useState('');
64
+
65
+ return (
66
+ <VStack gap={2}>
67
+ <SearchInput
68
+ value={value1}
69
+ onChangeText={setValue1}
70
+ onClear={() => setValue1('')}
71
+ placeholder="Always show search icon..."
72
+ disableBackArrow
73
+ />
74
+ <SearchInput
75
+ value={value2}
76
+ onChangeText={setValue2}
77
+ onClear={() => setValue2('')}
78
+ placeholder="No icons..."
79
+ hideStartIcon
80
+ hideEndIcon
81
+ />
82
+ </VStack>
83
+ );
84
+ }
85
+ ```
86
+
11
87
  ## Props
12
88
 
13
89
  | Prop | Type | Required | Default | Description |
@@ -113,80 +189,3 @@ import { SearchInput } from '@coinbase/cds-mobile/controls/SearchInput'
113
189
  | `width` | `string \| number` | No | `100%` | Width of input as a percentage string. |
114
190
 
115
191
 
116
- ## Examples
117
-
118
- ### Basic usage
119
-
120
- ```tsx
121
- function BasicSearchInput() {
122
- const [value, setValue] = useState('');
123
- return (
124
- <VStack gap={2}>
125
- <SearchInput
126
- value={value}
127
- onChangeText={setValue}
128
- onClear={() => setValue('')}
129
- onSearch={(searchTerm) => console.log('Searching for:', searchTerm)}
130
- placeholder="Search..."
131
- />
132
- <Text color="foregroundMuted" font="caption">
133
- Submit on keyboard or tap search icon
134
- </Text>
135
- </VStack>
136
- );
137
- }
138
- ```
139
-
140
- ### With Back Navigation
141
-
142
- ```tsx
143
- function SearchInputWithBack() {
144
- const [value, setValue] = useState('');
145
- return (
146
- <VStack gap={2}>
147
- <SearchInput
148
- value={value}
149
- onChangeText={setValue}
150
- onClear={() => setValue('')}
151
- onBack={() => console.log('Navigating back')}
152
- onSearch={(searchTerm) => console.log('Searching for:', searchTerm)}
153
- placeholder="Focus to see back arrow..."
154
- />
155
- <Text color="foregroundMuted" font="caption">
156
- Search icon changes to back arrow on focus
157
- </Text>
158
- </VStack>
159
- );
160
- }
161
- ```
162
-
163
- ### Variants
164
-
165
- ```tsx
166
- function SearchInputVariants() {
167
- const [value1, setValue1] = useState('');
168
- const [value2, setValue2] = useState('');
169
-
170
- return (
171
- <VStack gap={2}>
172
- <SearchInput
173
- value={value1}
174
- onChangeText={setValue1}
175
- onClear={() => setValue1('')}
176
- placeholder="Always show search icon..."
177
- disableBackArrow
178
- />
179
- <SearchInput
180
- value={value2}
181
- onChangeText={setValue2}
182
- onClear={() => setValue2('')}
183
- placeholder="No icons..."
184
- hideStartIcon
185
- hideEndIcon
186
- />
187
- </VStack>
188
- );
189
- }
190
- ```
191
-
192
-
@@ -4,26 +4,10 @@ A header component used to organize and label sections of content, with support
4
4
 
5
5
  ## Import
6
6
 
7
- ```jsx
7
+ ```tsx
8
8
  import { SectionHeader } from '@coinbase/cds-mobile/section-header/SectionHeader'
9
9
  ```
10
10
 
11
- ## Props
12
-
13
- | Prop | Type | Required | Default | Description |
14
- | --- | --- | --- | --- | --- |
15
- | `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Text or ReactNode to be displayed in Title |
16
- | `balance` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode or UiIconName to present balances wherever it is necessary |
17
- | `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode to display up to 2 lines of copy that frames the sections purpose and relevance |
18
- | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
19
- | `icon` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null` | No | `-` | - |
20
- | `iconActive` | `boolean` | No | `-` | Whether the icon is active |
21
- | `key` | `Key \| null` | No | `-` | - |
22
- | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
23
- | `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
24
- | `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 |
25
-
26
-
27
11
  ## Examples
28
12
 
29
13
  ### Basic usage
@@ -202,4 +186,19 @@ Note: The mobile version of SectionHeader is optimized for touch interactions an
202
186
  - Default padding is adjusted for mobile screens
203
187
  - Wraps content appropriately for mobile viewports
204
188
 
189
+ ## Props
190
+
191
+ | Prop | Type | Required | Default | Description |
192
+ | --- | --- | --- | --- | --- |
193
+ | `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Text or ReactNode to be displayed in Title |
194
+ | `balance` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode or UiIconName to present balances wherever it is necessary |
195
+ | `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode to display up to 2 lines of copy that frames the sections purpose and relevance |
196
+ | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
197
+ | `icon` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null` | No | `-` | - |
198
+ | `iconActive` | `boolean` | No | `-` | Whether the icon is active |
199
+ | `key` | `Key \| null` | No | `-` | - |
200
+ | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
201
+ | `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
202
+ | `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 |
203
+
205
204