@coinbase/cds-mcp-server 8.66.2 → 9.0.0-rc.1

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 (261) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/mcp-docs/mobile/components/AccordionItem.txt +4 -4
  3. package/mcp-docs/mobile/components/Alert.txt +3 -2
  4. package/mcp-docs/mobile/components/AreaChart.txt +42 -42
  5. package/mcp-docs/mobile/components/Avatar.txt +35 -35
  6. package/mcp-docs/mobile/components/AvatarButton.txt +37 -37
  7. package/mcp-docs/mobile/components/Banner.txt +57 -42
  8. package/mcp-docs/mobile/components/BarChart.txt +42 -42
  9. package/mcp-docs/mobile/components/Box.txt +36 -36
  10. package/mcp-docs/mobile/components/BrowserBar.txt +37 -37
  11. package/mcp-docs/mobile/components/Button.txt +54 -44
  12. package/mcp-docs/mobile/components/Calendar.txt +36 -36
  13. package/mcp-docs/mobile/components/Carousel.txt +50 -60
  14. package/mcp-docs/mobile/components/CartesianChart.txt +42 -42
  15. package/mcp-docs/mobile/components/CellMedia.txt +2 -2
  16. package/mcp-docs/mobile/components/Checkbox.txt +3 -3
  17. package/mcp-docs/mobile/components/CheckboxCell.txt +39 -39
  18. package/mcp-docs/mobile/components/CheckboxGroup.txt +4 -4
  19. package/mcp-docs/mobile/components/Chip.txt +41 -41
  20. package/mcp-docs/mobile/components/Coachmark.txt +41 -41
  21. package/mcp-docs/mobile/components/Collapsible.txt +2 -2
  22. package/mcp-docs/mobile/components/Combobox.txt +10 -10
  23. package/mcp-docs/mobile/components/ContainedAssetCard.txt +7 -7
  24. package/mcp-docs/mobile/components/ContentCard.txt +39 -39
  25. package/mcp-docs/mobile/components/ContentCardBody.txt +44 -44
  26. package/mcp-docs/mobile/components/ContentCardFooter.txt +36 -36
  27. package/mcp-docs/mobile/components/ContentCardHeader.txt +43 -43
  28. package/mcp-docs/mobile/components/ContentCell.txt +51 -51
  29. package/mcp-docs/mobile/components/ControlGroup.txt +38 -38
  30. package/mcp-docs/mobile/components/DataCard.txt +49 -49
  31. package/mcp-docs/mobile/components/DateInput.txt +27 -24
  32. package/mcp-docs/mobile/components/DatePicker.txt +27 -24
  33. package/mcp-docs/mobile/components/Divider.txt +35 -35
  34. package/mcp-docs/mobile/components/DotCount.txt +4 -2
  35. package/mcp-docs/mobile/components/DotStatusColor.txt +1 -1
  36. package/mcp-docs/mobile/components/DotSymbol.txt +6 -6
  37. package/mcp-docs/mobile/components/Fallback.txt +34 -34
  38. package/mcp-docs/mobile/components/FloatingAssetCard.txt +4 -4
  39. package/mcp-docs/mobile/components/HStack.txt +36 -36
  40. package/mcp-docs/mobile/components/HeroSquare.txt +2 -2
  41. package/mcp-docs/mobile/components/Icon.txt +3 -3
  42. package/mcp-docs/mobile/components/IconButton.txt +40 -60
  43. package/mcp-docs/mobile/components/InputChip.txt +41 -41
  44. package/mcp-docs/mobile/components/Interactable.txt +36 -36
  45. package/mcp-docs/mobile/components/Legend.txt +45 -43
  46. package/mcp-docs/mobile/components/LineChart.txt +42 -42
  47. package/mcp-docs/mobile/components/Link.txt +44 -41
  48. package/mcp-docs/mobile/components/ListCell.txt +54 -54
  49. package/mcp-docs/mobile/components/Lottie.txt +36 -36
  50. package/mcp-docs/mobile/components/LottieStatusAnimation.txt +2 -2
  51. package/mcp-docs/mobile/components/MediaCard.txt +43 -43
  52. package/mcp-docs/mobile/components/MediaChip.txt +41 -41
  53. package/mcp-docs/mobile/components/MessagingCard.txt +44 -44
  54. package/mcp-docs/mobile/components/Modal.txt +6 -2
  55. package/mcp-docs/mobile/components/ModalBody.txt +8 -8
  56. package/mcp-docs/mobile/components/ModalFooter.txt +35 -35
  57. package/mcp-docs/mobile/components/ModalHeader.txt +36 -36
  58. package/mcp-docs/mobile/components/MultiContentModule.txt +42 -42
  59. package/mcp-docs/mobile/components/NavigationTitle.txt +41 -39
  60. package/mcp-docs/mobile/components/NavigationTitleSelect.txt +41 -39
  61. package/mcp-docs/mobile/components/NudgeCard.txt +7 -7
  62. package/mcp-docs/mobile/components/Numpad.txt +39 -39
  63. package/mcp-docs/mobile/components/Overlay.txt +35 -35
  64. package/mcp-docs/mobile/components/PageFooter.txt +38 -32
  65. package/mcp-docs/mobile/components/PageHeader.txt +40 -34
  66. package/mcp-docs/mobile/components/PercentageBarChart.txt +42 -42
  67. package/mcp-docs/mobile/components/PeriodSelector.txt +41 -41
  68. package/mcp-docs/mobile/components/Pictogram.txt +2 -2
  69. package/mcp-docs/mobile/components/Point.txt +2 -2
  70. package/mcp-docs/mobile/components/PortalProvider.txt +2 -2
  71. package/mcp-docs/mobile/components/Pressable.txt +38 -38
  72. package/mcp-docs/mobile/components/ProgressBar.txt +2 -2
  73. package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +1 -1
  74. package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +1 -1
  75. package/mcp-docs/mobile/components/ProgressCircle.txt +3 -3
  76. package/mcp-docs/mobile/components/Radio.txt +3 -3
  77. package/mcp-docs/mobile/components/RadioCell.txt +39 -39
  78. package/mcp-docs/mobile/components/RadioGroup.txt +3 -3
  79. package/mcp-docs/mobile/components/ReferenceLine.txt +1 -1
  80. package/mcp-docs/mobile/components/RemoteImage.txt +6 -6
  81. package/mcp-docs/mobile/components/RemoteImageGroup.txt +1 -1
  82. package/mcp-docs/mobile/components/RollingNumber.txt +44 -42
  83. package/mcp-docs/mobile/components/Scrubber.txt +2 -2
  84. package/mcp-docs/mobile/components/SearchInput.txt +27 -24
  85. package/mcp-docs/mobile/components/SectionHeader.txt +7 -7
  86. package/mcp-docs/mobile/components/SegmentedTabs.txt +36 -36
  87. package/mcp-docs/mobile/components/Select.txt +3 -3
  88. package/mcp-docs/mobile/components/SelectAlpha.txt +10 -10
  89. package/mcp-docs/mobile/components/SelectChip.txt +44 -42
  90. package/mcp-docs/mobile/components/SelectChipAlpha.txt +11 -11
  91. package/mcp-docs/mobile/components/SelectOption.txt +10 -10
  92. package/mcp-docs/mobile/components/SlideButton.txt +42 -42
  93. package/mcp-docs/mobile/components/Spacer.txt +7 -7
  94. package/mcp-docs/mobile/components/Sparkline.txt +3 -3
  95. package/mcp-docs/mobile/components/SparklineGradient.txt +3 -3
  96. package/mcp-docs/mobile/components/SparklineInteractive.txt +6 -6
  97. package/mcp-docs/mobile/components/SparklineInteractiveHeader.txt +5 -5
  98. package/mcp-docs/mobile/components/Spinner.txt +2 -2
  99. package/mcp-docs/mobile/components/SpotIcon.txt +2 -2
  100. package/mcp-docs/mobile/components/SpotRectangle.txt +1 -1
  101. package/mcp-docs/mobile/components/SpotSquare.txt +1 -1
  102. package/mcp-docs/mobile/components/Stepper.txt +39 -38
  103. package/mcp-docs/mobile/components/Switch.txt +13 -3
  104. package/mcp-docs/mobile/components/TabIndicator.txt +1 -1
  105. package/mcp-docs/mobile/components/TabLabel.txt +42 -40
  106. package/mcp-docs/mobile/components/TabNavigation.txt +36 -36
  107. package/mcp-docs/mobile/components/TabbedChips.txt +36 -36
  108. package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +36 -36
  109. package/mcp-docs/mobile/components/Tabs.txt +36 -36
  110. package/mcp-docs/mobile/components/Tag.txt +43 -43
  111. package/mcp-docs/mobile/components/Text.txt +54 -61
  112. package/mcp-docs/mobile/components/TextInput.txt +27 -24
  113. package/mcp-docs/mobile/components/ThemeProvider.txt +3 -1
  114. package/mcp-docs/mobile/components/Toast.txt +36 -36
  115. package/mcp-docs/mobile/components/Tooltip.txt +2 -2
  116. package/mcp-docs/mobile/components/TopNavBar.txt +9 -9
  117. package/mcp-docs/mobile/components/Tray.txt +5 -3
  118. package/mcp-docs/mobile/components/UpsellCard.txt +15 -14
  119. package/mcp-docs/mobile/components/VStack.txt +36 -36
  120. package/mcp-docs/mobile/components/XAxis.txt +1 -1
  121. package/mcp-docs/mobile/components/YAxis.txt +1 -1
  122. package/mcp-docs/mobile/getting-started/installation.txt +9 -3
  123. package/mcp-docs/mobile/hooks/useMergeRefs.txt +5 -5
  124. package/mcp-docs/mobile/routes.txt +1 -1
  125. package/mcp-docs/web/components/AccordionItem.txt +4 -4
  126. package/mcp-docs/web/components/Alert.txt +4 -3
  127. package/mcp-docs/web/components/AreaChart.txt +63 -63
  128. package/mcp-docs/web/components/Avatar.txt +49 -49
  129. package/mcp-docs/web/components/AvatarButton.txt +54 -324
  130. package/mcp-docs/web/components/Banner.txt +71 -55
  131. package/mcp-docs/web/components/BarChart.txt +58 -58
  132. package/mcp-docs/web/components/Box.txt +49 -312
  133. package/mcp-docs/web/components/Button.txt +62 -324
  134. package/mcp-docs/web/components/Calendar.txt +49 -49
  135. package/mcp-docs/web/components/Carousel.txt +65 -72
  136. package/mcp-docs/web/components/CartesianChart.txt +63 -63
  137. package/mcp-docs/web/components/CellMedia.txt +1 -1
  138. package/mcp-docs/web/components/Checkbox.txt +9 -7
  139. package/mcp-docs/web/components/CheckboxCell.txt +52 -52
  140. package/mcp-docs/web/components/CheckboxGroup.txt +3 -3
  141. package/mcp-docs/web/components/Chip.txt +51 -51
  142. package/mcp-docs/web/components/Coachmark.txt +55 -55
  143. package/mcp-docs/web/components/Collapsible.txt +2 -2
  144. package/mcp-docs/web/components/Combobox.txt +8 -8
  145. package/mcp-docs/web/components/ContainedAssetCard.txt +60 -55
  146. package/mcp-docs/web/components/ContentCard.txt +54 -317
  147. package/mcp-docs/web/components/ContentCardBody.txt +57 -318
  148. package/mcp-docs/web/components/ContentCardFooter.txt +49 -312
  149. package/mcp-docs/web/components/ContentCardHeader.txt +56 -318
  150. package/mcp-docs/web/components/ContentCell.txt +63 -322
  151. package/mcp-docs/web/components/ControlGroup.txt +50 -50
  152. package/mcp-docs/web/components/DataCard.txt +60 -60
  153. package/mcp-docs/web/components/DateInput.txt +54 -54
  154. package/mcp-docs/web/components/DatePicker.txt +54 -54
  155. package/mcp-docs/web/components/Divider.txt +49 -49
  156. package/mcp-docs/web/components/DotCount.txt +3 -1
  157. package/mcp-docs/web/components/DotStatusColor.txt +1 -1
  158. package/mcp-docs/web/components/DotSymbol.txt +6 -6
  159. package/mcp-docs/web/components/Dropdown.txt +3 -3
  160. package/mcp-docs/web/components/Fallback.txt +49 -312
  161. package/mcp-docs/web/components/FloatingAssetCard.txt +53 -53
  162. package/mcp-docs/web/components/FullscreenAlert.txt +2 -2
  163. package/mcp-docs/web/components/FullscreenModal.txt +5 -4
  164. package/mcp-docs/web/components/FullscreenModalLayout.txt +3 -2
  165. package/mcp-docs/web/components/Grid.txt +51 -314
  166. package/mcp-docs/web/components/GridColumn.txt +48 -311
  167. package/mcp-docs/web/components/HStack.txt +49 -312
  168. package/mcp-docs/web/components/HeroSquare.txt +2 -2
  169. package/mcp-docs/web/components/Icon.txt +51 -51
  170. package/mcp-docs/web/components/IconButton.txt +51 -341
  171. package/mcp-docs/web/components/InputChip.txt +51 -51
  172. package/mcp-docs/web/components/Interactable.txt +48 -319
  173. package/mcp-docs/web/components/Legend.txt +62 -62
  174. package/mcp-docs/web/components/LineChart.txt +63 -63
  175. package/mcp-docs/web/components/Link.txt +48 -318
  176. package/mcp-docs/web/components/ListCell.txt +66 -325
  177. package/mcp-docs/web/components/Lottie.txt +49 -49
  178. package/mcp-docs/web/components/LottieStatusAnimation.txt +2 -2
  179. package/mcp-docs/web/components/MediaCard.txt +53 -53
  180. package/mcp-docs/web/components/MediaChip.txt +51 -51
  181. package/mcp-docs/web/components/MessagingCard.txt +54 -54
  182. package/mcp-docs/web/components/Modal.txt +51 -50
  183. package/mcp-docs/web/components/ModalBody.txt +49 -49
  184. package/mcp-docs/web/components/ModalFooter.txt +49 -49
  185. package/mcp-docs/web/components/ModalHeader.txt +50 -50
  186. package/mcp-docs/web/components/MultiContentModule.txt +55 -316
  187. package/mcp-docs/web/components/NavigationBar.txt +53 -53
  188. package/mcp-docs/web/components/NavigationTitle.txt +103 -0
  189. package/mcp-docs/web/components/NavigationTitleSelect.txt +48 -48
  190. package/mcp-docs/web/components/NudgeCard.txt +54 -54
  191. package/mcp-docs/web/components/Overlay.txt +49 -49
  192. package/mcp-docs/web/components/PageFooter.txt +54 -48
  193. package/mcp-docs/web/components/PageHeader.txt +58 -52
  194. package/mcp-docs/web/components/Pagination.txt +49 -49
  195. package/mcp-docs/web/components/PercentageBarChart.txt +58 -58
  196. package/mcp-docs/web/components/PeriodSelector.txt +62 -62
  197. package/mcp-docs/web/components/Pictogram.txt +2 -2
  198. package/mcp-docs/web/components/Point.txt +5 -14
  199. package/mcp-docs/web/components/PopoverPanel.txt +1 -1
  200. package/mcp-docs/web/components/PortalProvider.txt +2 -2
  201. package/mcp-docs/web/components/Pressable.txt +48 -319
  202. package/mcp-docs/web/components/ProgressBar.txt +1 -1
  203. package/mcp-docs/web/components/ProgressCircle.txt +2 -2
  204. package/mcp-docs/web/components/Radio.txt +9 -7
  205. package/mcp-docs/web/components/RadioCell.txt +52 -52
  206. package/mcp-docs/web/components/RadioGroup.txt +3 -3
  207. package/mcp-docs/web/components/ReferenceLine.txt +2 -2
  208. package/mcp-docs/web/components/RemoteImage.txt +48 -48
  209. package/mcp-docs/web/components/RemoteImageGroup.txt +3 -3
  210. package/mcp-docs/web/components/RollingNumber.txt +51 -313
  211. package/mcp-docs/web/components/Scrubber.txt +2 -2
  212. package/mcp-docs/web/components/SearchInput.txt +56 -56
  213. package/mcp-docs/web/components/SectionHeader.txt +55 -55
  214. package/mcp-docs/web/components/SegmentedControl.txt +1 -1
  215. package/mcp-docs/web/components/SegmentedTabs.txt +49 -49
  216. package/mcp-docs/web/components/Select.txt +3 -3
  217. package/mcp-docs/web/components/SelectAlpha.txt +8 -8
  218. package/mcp-docs/web/components/SelectChip.txt +55 -55
  219. package/mcp-docs/web/components/SelectChipAlpha.txt +8 -8
  220. package/mcp-docs/web/components/SelectOption.txt +56 -56
  221. package/mcp-docs/web/components/Sidebar.txt +66 -56
  222. package/mcp-docs/web/components/SidebarItem.txt +10 -111
  223. package/mcp-docs/web/components/SidebarMoreMenu.txt +2 -2
  224. package/mcp-docs/web/components/Spacer.txt +55 -318
  225. package/mcp-docs/web/components/Sparkline.txt +3 -3
  226. package/mcp-docs/web/components/SparklineGradient.txt +3 -3
  227. package/mcp-docs/web/components/SparklineInteractive.txt +4 -4
  228. package/mcp-docs/web/components/SparklineInteractiveHeader.txt +4 -4
  229. package/mcp-docs/web/components/Spinner.txt +49 -49
  230. package/mcp-docs/web/components/SpotIcon.txt +2 -2
  231. package/mcp-docs/web/components/SpotRectangle.txt +1 -1
  232. package/mcp-docs/web/components/SpotSquare.txt +1 -1
  233. package/mcp-docs/web/components/Stepper.txt +53 -53
  234. package/mcp-docs/web/components/Switch.txt +21 -7
  235. package/mcp-docs/web/components/TabIndicator.txt +1 -1
  236. package/mcp-docs/web/components/TabLabel.txt +50 -50
  237. package/mcp-docs/web/components/TabNavigation.txt +48 -48
  238. package/mcp-docs/web/components/TabbedChips.txt +49 -49
  239. package/mcp-docs/web/components/TabbedChipsAlpha.txt +49 -49
  240. package/mcp-docs/web/components/Table.txt +4 -4
  241. package/mcp-docs/web/components/TableCaption.txt +1 -1
  242. package/mcp-docs/web/components/TableCell.txt +2 -2
  243. package/mcp-docs/web/components/TableCellFallback.txt +2 -2
  244. package/mcp-docs/web/components/TableRow.txt +1 -1
  245. package/mcp-docs/web/components/Tabs.txt +49 -49
  246. package/mcp-docs/web/components/Tag.txt +52 -52
  247. package/mcp-docs/web/components/Text.txt +49 -312
  248. package/mcp-docs/web/components/TextInput.txt +56 -56
  249. package/mcp-docs/web/components/ThemeProvider.txt +24 -4
  250. package/mcp-docs/web/components/TileButton.txt +49 -319
  251. package/mcp-docs/web/components/Toast.txt +51 -51
  252. package/mcp-docs/web/components/Tooltip.txt +3 -3
  253. package/mcp-docs/web/components/Tray.txt +2 -2
  254. package/mcp-docs/web/components/UpsellCard.txt +15 -14
  255. package/mcp-docs/web/components/VStack.txt +49 -312
  256. package/mcp-docs/web/components/XAxis.txt +1 -1
  257. package/mcp-docs/web/components/YAxis.txt +1 -1
  258. package/mcp-docs/web/getting-started/installation.txt +13 -5
  259. package/mcp-docs/web/hooks/useMergeRefs.txt +5 -5
  260. package/mcp-docs/web/routes.txt +1 -1
  261. package/package.json +1 -1
@@ -728,23 +728,23 @@ ValueSection
728
728
  | `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
729
729
  | `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
730
730
  | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
731
- | `bottom` | `string \| number` | No | `-` | - |
731
+ | `bottom` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
732
732
  | `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 | `'fg'` | 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. |
733
733
  | `colorPulseOnUpdate` | `boolean` | No | `-` | Enables color pulsing on positive or negative changes. |
734
- | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
734
+ | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
735
735
  | `dangerouslySetBackground` | `string \| OpaqueColorValue` | No | `-` | - |
736
736
  | `dangerouslySetColor` | `string \| OpaqueColorValue` | No | `-` | - |
737
- | `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. |
737
+ | `dataDetectorType` | `link \| email \| none \| all \| phoneNumber \| null` | No | `-` | Determines the types of data converted to clickable URLs in the text element. By default no data types are detected. |
738
738
  | `digitTransitionVariant` | `every \| single` | No | `'every'` | Style of digit transition animation. - every: Rolls through every intermediate digit (e.g., 1→2→3→...→9). - single: Rolls directly to the new digit without showing intermediates (e.g., 1→9). |
739
739
  | `disabled` | `boolean` | No | `-` | Add disabled opacity style to text Specifies the disabled state of the text view for testing purposes. |
740
- | `display` | `flex \| none` | No | `-` | - |
740
+ | `display` | `flex \| none \| contents` | No | `-` | - |
741
741
  | `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. |
742
742
  | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
743
- | `ellipsize` | `middle \| head \| tail \| clip` | No | `-` | Choose ellipsize mode. |
744
- | `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 |
743
+ | `ellipsize` | `middle \| clip \| head \| tail` | No | `-` | Choose ellipsize mode. |
744
+ | `ellipsizeMode` | `middle \| clip \| head \| tail` | 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 |
745
745
  | `enableSubscriptNotation` | `boolean` | No | `-` | Enables subscript notation for leading zeros in the fractional part (for example, {@code 0.00009 => 0.0₄9}). |
746
- | `flexBasis` | `string \| number` | No | `-` | - |
747
- | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
746
+ | `flexBasis` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
747
+ | `flexDirection` | `column \| row \| row-reverse \| column-reverse` | No | `-` | - |
748
748
  | `flexGrow` | `number` | No | `-` | - |
749
749
  | `flexShrink` | `number` | No | `-` | - |
750
750
  | `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
@@ -754,28 +754,28 @@ ValueSection
754
754
  | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
755
755
  | `format` | `(Omit<NumberFormatOptions, notation> & { notation?: compact \| standard; }) \| undefined` | No | `-` | Intl.NumberFormat options applied when formatting the value. Scientific and engineering notation are not supported. |
756
756
  | `formattedValue` | `string` | No | `-` | Preformatted value rendered instead of formatting {@link value }. {@link value } is still used to determine numeric deltas. |
757
- | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
758
- | `height` | `string \| number` | No | `-` | - |
757
+ | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
758
+ | `height` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
759
759
  | `id` | `string` | No | `-` | Used to reference react managed views from native code. |
760
760
  | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
761
761
  | `key` | `Key \| null` | No | `-` | - |
762
- | `left` | `string \| number` | No | `-` | - |
763
- | `lineBreakMode` | `middle \| head \| tail \| clip` | No | `-` | Line Break mode. Works only with numberOfLines. clip is working only for iOS |
762
+ | `left` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
763
+ | `lineBreakMode` | `middle \| clip \| head \| tail` | No | `-` | Line Break mode. Works only with numberOfLines. clip is working only for iOS |
764
764
  | `lineBreakStrategyIOS` | `none \| standard \| hangul-word \| push-out` | No | `-` | Set line break strategy on iOS. |
765
765
  | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
766
766
  | `locale` | `string \| Locale \| readonly (string \| Locale)[]` | No | `-` | Locale used for formatting. Defaults to the locale from {@link LocaleProvider }. |
767
- | `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
768
- | `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
769
- | `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
770
- | `marginStart` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
771
- | `marginTop` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
772
- | `marginX` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
773
- | `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
767
+ | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
768
+ | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
769
+ | `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
770
+ | `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
771
+ | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
772
+ | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
773
+ | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
774
774
  | `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 |
775
- | `maxHeight` | `string \| number` | No | `-` | - |
776
- | `maxWidth` | `string \| number` | No | `-` | - |
777
- | `minHeight` | `string \| number` | No | `-` | - |
778
- | `minWidth` | `string \| number` | No | `-` | - |
775
+ | `maxHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
776
+ | `maxWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
777
+ | `minHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
778
+ | `minWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
779
779
  | `minimumFontScale` | `number` | No | `-` | Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). |
780
780
  | `mono` | `boolean` | No | `-` | Use monospace font family. |
781
781
  | `nativeID` | `string` | No | `-` | Used to reference react managed views from native code. |
@@ -787,28 +787,30 @@ ValueSection
787
787
  | `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). |
788
788
  | `onPressIn` | `((event: GestureResponderEvent) => void)` | No | `-` | - |
789
789
  | `onPressOut` | `((event: GestureResponderEvent) => void)` | No | `-` | - |
790
- | `onTextLayout` | `((event: NativeSyntheticEvent<TextLayoutEventData>) => void)` | No | `-` | Invoked on Text layout |
790
+ | `onTextLayout` | `((event: TextLayoutEvent) => void)` | No | `-` | Invoked on Text layout |
791
791
  | `opacity` | `number \| AnimatedNode` | No | `-` | - |
792
792
  | `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
793
- | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
794
- | `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
795
- | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
796
- | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
797
- | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
798
- | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
799
- | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
800
- | `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
793
+ | `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
794
+ | `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
795
+ | `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
796
+ | `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
797
+ | `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
798
+ | `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
799
+ | `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
800
+ | `pointerEvents` | `auto \| box-none \| none \| box-only` | No | `-` | Controls how touch events are handled. Similar to Views pointerEvents. |
801
+ | `position` | `absolute \| relative \| static` | No | `-` | - |
801
802
  | `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 | `'fgPositive'` | Color token used for positive numeric changes. |
802
- | `prefix` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content rendered before the formatted value. |
803
- | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
803
+ | `prefix` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Content rendered before the formatted value. |
804
+ | `pressRetentionOffset` | `{ top: number; left: number; bottom: number; right: number; }` | No | `-` | Defines how far your touch may move off of the button, before deactivating the button. |
805
+ | `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
804
806
  | `renderEmptyNode` | `boolean` | No | `-` | - |
805
- | `right` | `string \| number` | No | `-` | - |
806
- | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
807
+ | `right` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
808
+ | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
807
809
  | `selectable` | `boolean` | No | `-` | Lets the user select text, to use the native copy and paste functionality. |
808
810
  | `selectionColor` | `string \| OpaqueColorValue` | No | `-` | The highlight color of the text. |
809
- | `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 | `-` | - |
811
+ | `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 | `-` | - |
810
812
  | `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 | `-` | Custom styles for individual elements of the RollingNumber component |
811
- | `suffix` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content rendered after the formatted value. |
813
+ | `suffix` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Content rendered after the formatted value. |
812
814
  | `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. |
813
815
  | `tabularNumbers` | `boolean` | No | `false true` | 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. |
814
816
  | `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 |
@@ -817,12 +819,12 @@ ValueSection
817
819
  | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
818
820
  | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
819
821
  | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
820
- | `top` | `string \| number` | No | `-` | - |
821
- | `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 | `-` | - |
822
+ | `top` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
823
+ | `transform` | `string \| readonly (({ 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 | `-` | - |
822
824
  | `transition` | `RollingNumberTransitionConfig` | No | `-` | Reanimated transition overrides. Supports per-property overrides for {@code y} and {@code color} only. |
823
825
  | `underline` | `boolean` | No | `false` | Set text decoration to underline. |
824
- | `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
825
- | `width` | `string \| number` | No | `-` | - |
826
+ | `userSelect` | `auto \| none \| text \| contain \| all` | No | `-` | - |
827
+ | `width` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
826
828
  | `zIndex` | `number` | No | `-` | - |
827
829
 
828
830
 
@@ -7,7 +7,7 @@ An interactive scrubber component for exploring individual data points in charts
7
7
  ## Import
8
8
 
9
9
  ```tsx
10
- import { Scrubber } from '@coinbase/cds-mobile-visualization'
10
+ import { Scrubber } from '@coinbase/cds-mobile/visualizations/chart'
11
11
  ```
12
12
 
13
13
  ## Examples
@@ -1018,7 +1018,7 @@ function MatchupBeaconLabels() {
1018
1018
  | `labelFont` | `display1 \| display2 \| display3 \| title1 \| title2 \| title3 \| title4 \| headline \| body \| label1 \| label2 \| caption \| legal` | No | `-` | Font style for the scrubber line label. |
1019
1019
  | `lineStroke` | `string` | No | `-` | Stroke color for the scrubber line. |
1020
1020
  | `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. |
1021
- | `ref` | `((instance: ScrubberBeaconGroupRef \| null) => void) \| RefObject<ScrubberBeaconGroupRef> \| null` | No | `-` | - |
1021
+ | `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
1022
1022
  | `seriesIds` | `string[]` | No | `-` | Array of series IDs to highlight when scrubbing with scrubber beacons. By default, all series will be highlighted. |
1023
1023
  | `transitions` | `{ enter?: Transition \| null; update?: Transition \| null \| undefined; pulse?: Transition \| undefined; pulseRepeatDelay?: number \| undefined; } \| undefined` | No | `-` | Transition configuration for the scrubber. Controls enter, update, and pulse animations for beacons and beacon labels. |
1024
1024
 
@@ -113,10 +113,10 @@ function SearchInputVariants() {
113
113
  | `align` | `end \| start \| center \| justify` | No | `start` | Aligns text inside input and helperText |
114
114
  | `allowFontScaling` | `boolean` | No | `-` | Specifies whether fonts should scale to respect Text Size accessibility settings. The default is true. |
115
115
  | `autoCapitalize` | `none \| sentences \| words \| characters` | No | `-` | Can tell TextInput to automatically capitalize certain characters. characters: all characters, words: first letter of each word sentences: first letter of each sentence (default) none: dont auto capitalize anything https://reactnative.dev/docs/textinput#autocapitalize |
116
- | `autoComplete` | `off \| email \| name \| additional-name \| address-line1 \| address-line2 \| birthdate-day \| birthdate-full \| birthdate-month \| birthdate-year \| cc-csc \| cc-exp \| cc-exp-day \| cc-exp-month \| cc-exp-year \| cc-number \| cc-name \| cc-given-name \| cc-middle-name \| cc-family-name \| cc-type \| country \| current-password \| family-name \| gender \| given-name \| honorific-prefix \| honorific-suffix \| name-family \| name-given \| name-middle \| name-middle-initial \| name-prefix \| name-suffix \| new-password \| nickname \| one-time-code \| organization \| organization-title \| password \| password-new \| postal-address \| postal-address-country \| postal-address-extended \| postal-address-extended-postal-code \| postal-address-locality \| postal-address-region \| postal-code \| street-address \| sms-otp \| tel \| tel-country-code \| tel-national \| tel-device \| url \| username \| username-new` | No | `-` | Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set autoComplete to off. The following values work across platforms: - additional-name - address-line1 - address-line2 - cc-number - country - current-password - email - family-name - given-name - honorific-prefix - honorific-suffix - name - new-password - off - one-time-code - postal-code - street-address - tel - username The following values work on iOS only: - nickname - organization - organization-title - url The following values work on Android only: - birthdate-day - birthdate-full - birthdate-month - birthdate-year - cc-csc - cc-exp - cc-exp-day - cc-exp-month - cc-exp-year - gender - name-family - name-given - name-middle - name-middle-initial - name-prefix - name-suffix - password - password-new - postal-address - postal-address-country - postal-address-extended - postal-address-extended-postal-code - postal-address-locality - postal-address-region - sms-otp - tel-country-code - tel-national - tel-device - username-new |
116
+ | `autoComplete` | `email \| off \| name \| additional-name \| address-line1 \| address-line2 \| birthdate-day \| birthdate-full \| birthdate-month \| birthdate-year \| cc-csc \| cc-exp \| cc-exp-day \| cc-exp-month \| cc-exp-year \| cc-number \| cc-name \| cc-given-name \| cc-middle-name \| cc-family-name \| cc-type \| country \| current-password \| family-name \| gender \| given-name \| honorific-prefix \| honorific-suffix \| name-family \| name-given \| name-middle \| name-middle-initial \| name-prefix \| name-suffix \| new-password \| nickname \| one-time-code \| organization \| organization-title \| password \| password-new \| postal-address \| postal-address-country \| postal-address-extended \| postal-address-extended-postal-code \| postal-address-locality \| postal-address-region \| postal-code \| street-address \| sms-otp \| tel \| tel-country-code \| tel-national \| tel-device \| url \| username \| username-new` | No | `-` | Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set autoComplete to off. The following values work across platforms: - additional-name - address-line1 - address-line2 - cc-number - country - current-password - email - family-name - given-name - honorific-prefix - honorific-suffix - name - new-password - off - one-time-code - postal-code - street-address - tel - username The following values work on iOS only: - nickname - organization - organization-title - url The following values work on Android only: - birthdate-day - birthdate-full - birthdate-month - birthdate-year - cc-csc - cc-exp - cc-exp-day - cc-exp-month - cc-exp-year - gender - name-family - name-given - name-middle - name-middle-initial - name-prefix - name-suffix - password - password-new - postal-address - postal-address-country - postal-address-extended - postal-address-extended-postal-code - postal-address-locality - postal-address-region - sms-otp - tel-country-code - tel-national - tel-device - username-new |
117
117
  | `autoCorrect` | `boolean` | No | `-` | If false, disables auto-correct. The default value is true. |
118
118
  | `autoFocus` | `boolean` | No | `-` | If true, focuses the input on componentDidMount. The default value is false. |
119
- | `blurOnSubmit` | `boolean` | No | `-` | If true, the text field will blur when submitted. The default value is true. |
119
+ | `blurOnSubmit` | `boolean` | No | `-` | If true, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting blurOnSubmit to true means that pressing return will blur the field and trigger the onSubmitEditing event instead of inserting a newline into the field. |
120
120
  | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `200` | Leverage one of the borderRadius styles we offer to round the corners of the input. |
121
121
  | `bordered` | `boolean` | No | `true` | Determines if the input should have a border. When set to false, focus border styling is disabled by default. |
122
122
  | `caretHidden` | `boolean` | No | `-` | If true, caret is hidden. The default value is false. |
@@ -130,46 +130,49 @@ function SearchInputVariants() {
130
130
  | `defaultValue` | `string` | No | `-` | Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you dont want to deal with listening to events and updating the value prop to keep the controlled state in sync. |
131
131
  | `disableBackArrow` | `boolean` | No | `-` | If this is set to true, the start icon wont toggle between backArrow and Search. The start icon will always be a search icon |
132
132
  | `disableFullscreenUI` | `boolean` | No | `-` | When false, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When true, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to false. |
133
+ | `disableKeyboardShortcuts` | `boolean` | No | `-` | If true, the keyboard shortcuts (undo/redo and copy buttons) are disabled. The default value is false. |
133
134
  | `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
134
135
  | `editable` | `boolean` | No | `-` | If false, text is not editable. The default value is true. |
135
136
  | `enableColorSurge` | `boolean` | No | `-` | Enable Color Surge motion |
136
137
  | `enablesReturnKeyAutomatically` | `boolean` | No | `-` | If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. |
137
- | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `undefined` | Set the end node Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
138
+ | `end` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `undefined` | Set the end node Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
138
139
  | `enterKeyHint` | `search \| done \| go \| next \| send \| previous \| enter` | No | `-` | Determines what text should be shown to the return key on virtual keyboards. Has precedence over the returnKeyType prop. |
139
140
  | `focusedBorderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `borderWidth` | Additional border width when focused. |
140
141
  | `font` | `display1 \| display2 \| display3 \| title1 \| title2 \| title3 \| title4 \| headline \| body \| label1 \| label2 \| caption \| legal` | No | `body` | Typography font token for the field (passed through to NativeInput as font), same token family as align. |
141
- | `height` | `string \| number` | No | `-` | Height of input |
142
- | `helperText` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | For cases where label is not enough information to describe what the text input is for. Can also be used for showing positive/negative messages |
142
+ | `height` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | Height of input |
143
+ | `helperText` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | For cases where label is not enough information to describe what the text input is for. Can also be used for showing positive/negative messages |
143
144
  | `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |
144
145
  | `hideEndIcon` | `boolean` | No | `undefined` | hide the end icon |
145
146
  | `hideStartIcon` | `boolean` | No | `false` | hide the start icon |
146
147
  | `importantForAutofill` | `auto \| yes \| no \| noExcludeDescendants \| yesExcludeDescendants` | No | `-` | Determines whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Defaults to auto. To disable auto complete, use off. *Android Only* The following values work on Android only: - auto - let Android decide - no - not important for autofill - noExcludeDescendants - this view and its children arent important for autofill - yes - is important for autofill - yesExcludeDescendants - this view is important for autofill but its children arent |
147
148
  | `inlineImageLeft` | `string` | No | `-` | If defined, the provided image resource will be rendered on the left. |
148
149
  | `inlineImagePadding` | `number` | No | `-` | Padding between the inline image, if any, and the text input itself. |
150
+ | `inputAccessoryViewButtonLabel` | `string` | No | `-` | An optional label that overrides the default input accessory view button label. |
149
151
  | `inputAccessoryViewID` | `string` | No | `-` | Used to connect to an InputAccessoryView. Not part of react-natives documentation, but present in examples and code. See https://reactnative.dev/docs/inputaccessoryview for more information. |
150
152
  | `inputBackground` | `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 | `'bg'` | Background color of the input |
151
- | `inputMode` | `search \| none \| text \| email \| tel \| url \| numeric \| decimal` | No | `-` | Works like the inputmode attribute in HTML, it determines which keyboard to open, e.g. numeric and has precedence over keyboardType. |
153
+ | `inputMode` | `search \| email \| none \| text \| tel \| url \| numeric \| decimal` | No | `-` | Works like the inputmode attribute in HTML, it determines which keyboard to open, e.g. numeric and has precedence over keyboardType. |
152
154
  | `key` | `Key \| null` | No | `-` | - |
153
155
  | `keyboardAppearance` | `light \| default \| dark` | No | `-` | Determines the color of the keyboard. |
154
156
  | `keyboardType` | `default \| url \| number-pad \| decimal-pad \| numeric \| email-address \| phone-pad \| visible-password \| ascii-capable \| numbers-and-punctuation \| name-phone-pad \| twitter \| web-search` | No | `-` | enum(default, numeric, email-address, ascii-capable, numbers-and-punctuation, url, number-pad, phone-pad, name-phone-pad, decimal-pad, twitter, web-search, visible-password) Determines which keyboard to open, e.g.numeric. The following values work across platforms: - default - numeric - email-address - phone-pad The following values work on iOS: - ascii-capable - numbers-and-punctuation - url - number-pad - name-phone-pad - decimal-pad - twitter - web-search The following values work on Android: - visible-password |
155
157
  | `label` | `string` | No | `-` | Short messageArea indicating purpose of input |
156
- | `labelNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render label. Takes precedence over label. |
158
+ | `labelNode` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | React node to render label. Takes precedence over label. |
157
159
  | `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
160
+ | `lineBreakModeIOS` | `middle \| wordWrapping \| char \| clip \| head \| tail` | No | `-` | Set line break mode on iOS. |
158
161
  | `lineBreakStrategyIOS` | `none \| standard \| hangul-word \| push-out` | No | `-` | Set line break strategy on iOS. |
159
162
  | `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 |
160
163
  | `maxLength` | `number` | No | `-` | Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. |
161
- | `minHeight` | `string \| number` | No | `auto` | minimum height of input |
164
+ | `minHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `auto` | minimum height of input |
162
165
  | `multiline` | `boolean` | No | `-` | If true, the text input can be multiple lines. The default value is false. |
163
166
  | `numberOfLines` | `number` | No | `-` | Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines. |
164
167
  | `onBack` | `((event: GestureResponderEvent) => void)` | No | `-` | Callback is fired when backArrow is pressed. If disableBackArrow is true, this will do nothing |
165
- | `onBlur` | `((e: NativeSyntheticEvent<TextInputFocusEventData>) => void)` | No | `-` | Callback that is called when the text input is blurred |
166
- | `onChange` | `((e: NativeSyntheticEvent<TextInputChangeEventData>) => void)` | No | `-` | - |
168
+ | `onBlur` | `((e: BlurEvent) => void)` | No | `-` | Callback that is called when the text input is blurred Note: If you are trying to find the last value of TextInput, you can use the onEndEditing event, which is fired upon completion of editing. |
169
+ | `onChange` | `((e: TextInputChangeEvent) => void)` | No | `-` | - |
167
170
  | `onChangeText` | `((text: string) => void)` | No | `-` | - |
168
171
  | `onClear` | `((event: GestureResponderEvent) => void)` | No | `-` | Callback is fired when the clear icon is pressed |
169
- | `onContentSizeChange` | `((e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => void)` | No | `-` | Callback that is called when the text inputs content size changes. This will be called with { nativeEvent: { contentSize: { width, height } } }. Only called for multiline text inputs. |
170
- | `onEndEditing` | `((e: NativeSyntheticEvent<TextInputEndEditingEventData>) => void)` | No | `-` | Callback that is called when text input ends. |
171
- | `onFocus` | `((e: NativeSyntheticEvent<TextInputFocusEventData>) => void)` | No | `-` | Callback that is called when the text input is focused |
172
- | `onKeyPress` | `((e: NativeSyntheticEvent<TextInputKeyPressEventData>) => void)` | No | `-` | Callback that is called when a key is pressed. This will be called with { nativeEvent: { key: keyValue } } where keyValue is Enter or Backspace for respective keys and the typed-in character otherwise including for space. Fires before onChange callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs. |
172
+ | `onContentSizeChange` | `((e: TextInputContentSizeChangeEvent) => void)` | No | `-` | Callback that is called when the text inputs content size changes. This will be called with { nativeEvent: { contentSize: { width, height } } }. Only called for multiline text inputs. |
173
+ | `onEndEditing` | `((e: TextInputEndEditingEvent) => void)` | No | `-` | Callback that is called when text input ends. |
174
+ | `onFocus` | `((e: FocusEvent) => void)` | No | `-` | Callback that is called when the text input is focused |
175
+ | `onKeyPress` | `((e: TextInputKeyPressEvent) => void)` | No | `-` | Callback that is called when a key is pressed. This will be called with { nativeEvent: { key: keyValue } } where keyValue is Enter or Backspace for respective keys and the typed-in character otherwise including for space. Fires before onChange callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs. |
173
176
  | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
174
177
  | `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
175
178
  | `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
@@ -185,19 +188,18 @@ function SearchInputVariants() {
185
188
  | `onPress` | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void)` | No | `-` | Called when a single tap gesture is detected. |
186
189
  | `onPressIn` | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void)` | No | `-` | Callback that is called when a touch is engaged. |
187
190
  | `onPressOut` | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void)` | No | `-` | Callback that is called when a touch is released. |
188
- | `onScroll` | `((e: NativeSyntheticEvent<TextInputScrollEventData>) => void)` | No | `-` | Invoked on content scroll with { nativeEvent: { contentOffset: { x, y } } }. May also contain other properties from ScrollEvent but on Android contentSize is not provided for performance reasons. |
191
+ | `onScroll` | `((e: TextInputScrollEvent) => void)` | No | `-` | Invoked on content scroll with { nativeEvent: { contentOffset: { x, y } } }. May also contain other properties from ScrollEvent but on Android contentSize is not provided for performance reasons. |
189
192
  | `onSearch` | `((str: string) => void)` | No | `-` | Callback is fired when a user hits enter on the keyboard. Can obtain the query through str parameter |
190
- | `onSelectionChange` | `((e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void)` | No | `-` | Callback that is called when the text input selection is changed. |
191
- | `onSubmitEditing` | `((e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void)` | No | `-` | Callback that is called when the text inputs submit button is pressed. |
192
- | `onTextInput` | `((e: NativeSyntheticEvent<TextInputTextInputEventData>) => void)` | No | `-` | Callback that is called on new text input with the argument { nativeEvent: { text, previousText, range: { start, end } } }. This prop requires multiline={true} to be set. |
193
+ | `onSelectionChange` | `((e: TextInputSelectionChangeEvent) => void)` | No | `-` | Callback that is called when the text input selection is changed. |
194
+ | `onSubmitEditing` | `((e: TextInputSubmitEditingEvent) => void)` | No | `-` | Callback that is called when the text inputs submit button is pressed. |
193
195
  | `passwordRules` | `string \| null` | No | `-` | Provide rules for your password. For example, say you want to require a password with at least eight characters consisting of a mix of uppercase and lowercase letters, at least one number, and at most two consecutive characters. required: upper; required: lower; required: digit; max-consecutive: 2; minlength: 8; |
194
196
  | `placeholder` | `string` | No | `-` | Placeholder text displayed inside of the input. Will be replaced if there is a value. The string that will be rendered before text input has been entered |
195
197
  | `placeholderTextColor` | `string \| OpaqueColorValue` | No | `-` | The text color of the placeholder string |
196
198
  | `readOnly` | `boolean` | No | `-` | If true, text is not editable. The default value is false. |
197
- | `ref` | `((instance: TextInput \| null) => void) \| RefObject<TextInput> \| null` | No | `-` | - |
199
+ | `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
198
200
  | `rejectResponderTermination` | `boolean \| null` | No | `-` | If true, allows TextInput to pass touch events to the parent component. This allows components to be swipeable from the TextInput on iOS, as is the case on Android by default. If false, TextInput always asks to handle the input (except when disabled). |
199
201
  | `returnKeyLabel` | `string` | No | `-` | Sets the return key to the label. Use it instead of returnKeyType. |
200
- | `returnKeyType` | `search \| join \| done \| none \| default \| go \| next \| send \| previous \| google \| route \| yahoo \| emergency-call` | No | `-` | enum(default, go, google, join, next, route, search, send, yahoo, done, emergency-call) Determines how the return key should look. |
202
+ | `returnKeyType` | `join \| search \| done \| none \| default \| go \| next \| send \| previous \| google \| route \| yahoo \| emergency-call` | No | `-` | enum(default, go, google, join, next, route, search, send, yahoo, done, emergency-call) Determines how the return key should look. |
201
203
  | `scrollEnabled` | `boolean` | No | `-` | If false, scrolling of the text view will be disabled. The default value is true. Only works with multiline={true} |
202
204
  | `secureTextEntry` | `boolean` | No | `-` | If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. |
203
205
  | `selectTextOnFocus` | `boolean` | No | `-` | If true, all text will automatically be selected on focus |
@@ -208,21 +210,22 @@ function SearchInputVariants() {
208
210
  | `showSoftInputOnFocus` | `boolean` | No | `-` | When false, it will prevent the soft keyboard from showing when the field is focused. The default value is true |
209
211
  | `smartInsertDelete` | `boolean` | No | `-` | If false, the iOS system will not insert an extra space after a paste operation neither delete one or two spaces after a cut or delete operation. The default value is true. |
210
212
  | `spellCheck` | `boolean` | No | `-` | If false, disables spell-check style (i.e. red underlines). The default value is inherited from autoCorrect |
211
- | `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component |
213
+ | `start` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component |
212
214
  | `startIcon` | `search \| backArrow` | No | `search` | Set the start icon. You can only set it to search \| backArrow icon. If you set this, the icon would not toggle between search and backArrow depending on the focus state |
213
215
  | `startIconAccessibilityLabel` | `string` | No | `-` | Set the a11y label for the start icon |
214
- | `style` | `null \| false \| TextStyle \| RegisteredStyle<TextStyle> \| RecursiveArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle>>` | No | `-` | Styles |
216
+ | `style` | `null \| false \| \| TextStyle \| RegisteredStyle<TextStyle> \| RecursiveArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle>>` | No | `-` | Styles |
217
+ | `submitBehavior` | `submit \| blurAndSubmit \| newline` | No | `-` | When the return key is pressed, For single line inputs: - newline defaults to blurAndSubmit - undefined defaults to blurAndSubmit For multiline inputs: - newline adds a newline - undefined defaults to newline For both single line and multiline inputs: - submit will only send a submit event and not blur the input - blurAndSubmit will both blur the input and send a submit event |
215
218
  | `suffix` | `string` | No | `-` | Adds suffix text to the end of input |
216
219
  | `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 Used to locate this view in end-to-end tests |
217
220
  | `testIDMap` | `{ start?: string; end?: string \| undefined; label?: string \| undefined; helperText?: string \| undefined; } \| undefined` | No | `-` | Add ability to test individual parts of the input |
218
221
  | `textAlign` | `left \| right \| center \| unset` | No | `-` | Native TextInput textAlign with the extra unset option to remove the textAlign style. Use this to workaround the issue where long text does not ellipsis in TextInput |
219
222
  | `textAlignVertical` | `top \| bottom \| auto \| center` | No | `-` | Vertically align text when multiline is set to true |
220
223
  | `textBreakStrategy` | `simple \| highQuality \| balanced` | No | `-` | Set text break strategy on Android API Level 23+, possible values are simple, highQuality, balanced The default value is simple. |
221
- | `textContentType` | `none \| location \| name \| nickname \| password \| username \| URL \| addressCity \| addressCityAndState \| addressState \| countryName \| creditCardNumber \| creditCardExpiration \| creditCardExpirationMonth \| creditCardExpirationYear \| creditCardSecurityCode \| creditCardType \| creditCardName \| creditCardGivenName \| creditCardMiddleName \| creditCardFamilyName \| emailAddress \| familyName \| fullStreetAddress \| givenName \| jobTitle \| middleName \| namePrefix \| nameSuffix \| organizationName \| postalCode \| streetAddressLine1 \| streetAddressLine2 \| sublocality \| telephoneNumber \| newPassword \| oneTimeCode \| birthdate \| birthdateDay \| birthdateMonth \| birthdateYear` | No | `-` | Give the keyboard and the system information about the expected semantic meaning for the content that users enter. To disable autofill, set textContentType to none. Possible values for textContentType are: - none - URL - addressCity - addressCityAndState - addressState - countryName - creditCardNumber - creditCardExpiration (iOS 17+) - creditCardExpirationMonth (iOS 17+) - creditCardExpirationYear (iOS 17+) - creditCardSecurityCode (iOS 17+) - creditCardType (iOS 17+) - creditCardName (iOS 17+) - creditCardGivenName (iOS 17+) - creditCardMiddleName (iOS 17+) - creditCardFamilyName (iOS 17+) - emailAddress - familyName - fullStreetAddress - givenName - jobTitle - location - middleName - name - namePrefix - nameSuffix - nickname - organizationName - postalCode - streetAddressLine1 - streetAddressLine2 - sublocality - telephoneNumber - username - password - newPassword - oneTimeCode - birthdate (iOS 17+) - birthdateDay (iOS 17+) - birthdateMonth (iOS 17+) - birthdateYear (iOS 17+) |
224
+ | `textContentType` | `location \| none \| name \| nickname \| password \| username \| flightNumber \| URL \| addressCity \| addressCityAndState \| addressState \| countryName \| creditCardNumber \| creditCardExpiration \| creditCardExpirationMonth \| creditCardExpirationYear \| creditCardSecurityCode \| creditCardType \| creditCardName \| creditCardGivenName \| creditCardMiddleName \| creditCardFamilyName \| emailAddress \| familyName \| fullStreetAddress \| givenName \| jobTitle \| middleName \| namePrefix \| nameSuffix \| organizationName \| postalCode \| streetAddressLine1 \| streetAddressLine2 \| sublocality \| telephoneNumber \| newPassword \| oneTimeCode \| birthdate \| birthdateDay \| birthdateMonth \| birthdateYear \| cellularEID \| cellularIMEI \| dateTime \| shipmentTrackingNumber` | No | `-` | Give the keyboard and the system information about the expected semantic meaning for the content that users enter. To disable autofill, set textContentType to none. Possible values for textContentType are: - none - URL - addressCity - addressCityAndState - addressState - countryName - creditCardNumber - creditCardExpiration (iOS 17+) - creditCardExpirationMonth (iOS 17+) - creditCardExpirationYear (iOS 17+) - creditCardSecurityCode (iOS 17+) - creditCardType (iOS 17+) - creditCardName (iOS 17+) - creditCardGivenName (iOS 17+) - creditCardMiddleName (iOS 17+) - creditCardFamilyName (iOS 17+) - emailAddress - familyName - fullStreetAddress - givenName - jobTitle - location - middleName - name - namePrefix - nameSuffix - nickname - organizationName - postalCode - streetAddressLine1 - streetAddressLine2 - sublocality - telephoneNumber - username - password - newPassword - oneTimeCode - birthdate (iOS 17+) - birthdateDay (iOS 17+) - birthdateMonth (iOS 17+) - birthdateYear (iOS 17+) - cellularEID (iOS 17.4+) - cellularIMEI (iOS 17.4+) - dateTime (iOS 15+) - flightNumber (iOS 15+) - shipmentTrackingNumber (iOS 15+) |
222
225
  | `underlineColorAndroid` | `string \| OpaqueColorValue` | No | `-` | The color of the textInput underline. |
223
226
  | `value` | `string` | No | `-` | - |
224
227
  | `variant` | `primary \| secondary \| positive \| negative \| foregroundMuted \| foreground` | No | `-` | Determines the sentiment of the input. Because we allow startContent and endContent to be custom ReactNode, the content placed inside these slots will not change colors according to the variant. You will have to add that yourself |
225
228
  | `verticalAlign` | `top \| bottom \| auto \| middle` | No | `-` | Vertically align text when multiline is set to true |
226
- | `width` | `string \| number` | No | `100%` | Width of input as a percentage string. |
229
+ | `width` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `100%` | Width of input as a percentage string. |
227
230
 
228
231
 
@@ -192,15 +192,15 @@ Note: The mobile version of SectionHeader is optimized for touch interactions an
192
192
 
193
193
  | Prop | Type | Required | Default | Description |
194
194
  | --- | --- | --- | --- | --- |
195
- | `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Text or ReactNode to be displayed in Title |
196
- | `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 |
197
- | `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 |
198
- | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
199
- | `icon` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null` | No | `-` | - |
195
+ | `title` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | Yes | `-` | Text or ReactNode to be displayed in Title |
196
+ | `balance` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | ReactNode or UiIconName to present balances wherever it is necessary |
197
+ | `description` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | ReactNode to display up to 2 lines of copy that frames the sections purpose and relevance |
198
+ | `end` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | - |
199
+ | `icon` | `string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode> \| null` | No | `-` | - |
200
200
  | `iconActive` | `boolean` | No | `-` | Whether the icon is active |
201
201
  | `key` | `Key \| null` | No | `-` | - |
202
- | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
203
- | `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
202
+ | `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
203
+ | `start` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | - |
204
204
  | `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 |
205
205
 
206
206
 
@@ -304,15 +304,15 @@ function Example() {
304
304
  | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
305
305
  | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
306
306
  | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
307
- | `bottom` | `string \| number` | No | `-` | - |
307
+ | `bottom` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
308
308
  | `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 | `-` | - |
309
- | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
309
+ | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
310
310
  | `dangerouslySetBackground` | `string` | No | `-` | - |
311
311
  | `disabled` | `boolean` | No | `-` | Disable interactions on all the tabs. |
312
- | `display` | `flex \| none` | No | `-` | - |
312
+ | `display` | `flex \| none \| contents` | No | `-` | - |
313
313
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
314
- | `flexBasis` | `string \| number` | No | `-` | - |
315
- | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
314
+ | `flexBasis` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
315
+ | `flexDirection` | `column \| row \| row-reverse \| column-reverse` | No | `-` | - |
316
316
  | `flexGrow` | `number` | No | `-` | - |
317
317
  | `flexShrink` | `number` | No | `-` | - |
318
318
  | `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
@@ -320,22 +320,22 @@ function Example() {
320
320
  | `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
321
321
  | `fontSize` | `inherit \| FontSize` | No | `-` | - |
322
322
  | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
323
- | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
324
- | `height` | `string \| number` | No | `-` | - |
323
+ | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
324
+ | `height` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
325
325
  | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
326
- | `left` | `string \| number` | No | `-` | - |
326
+ | `left` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
327
327
  | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
328
- | `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
329
- | `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
330
- | `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
331
- | `marginStart` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
332
- | `marginTop` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
333
- | `marginX` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
334
- | `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
335
- | `maxHeight` | `string \| number` | No | `-` | - |
336
- | `maxWidth` | `string \| number` | No | `-` | - |
337
- | `minHeight` | `string \| number` | No | `-` | - |
338
- | `minWidth` | `string \| number` | No | `-` | - |
328
+ | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
329
+ | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
330
+ | `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
331
+ | `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
332
+ | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
333
+ | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
334
+ | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
335
+ | `maxHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
336
+ | `maxWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
337
+ | `minHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
338
+ | `minWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
339
339
  | `onActiveTabElementChange` | `((element: View \| null) => void)` | No | `-` | Optional callback to receive the active tab element. |
340
340
  | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
341
341
  | `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
@@ -351,29 +351,29 @@ function Example() {
351
351
  | `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
352
352
  | `opacity` | `number \| AnimatedNode` | No | `-` | - |
353
353
  | `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
354
- | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
355
- | `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
356
- | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
357
- | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
358
- | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
359
- | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
360
- | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
354
+ | `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
355
+ | `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
356
+ | `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
357
+ | `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
358
+ | `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
359
+ | `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
360
+ | `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
361
361
  | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
362
- | `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
363
- | `ref` | `null \| (instance: View \| null) => void \| MutableRefObject<View \| null>` | No | `-` | - |
364
- | `right` | `string \| number` | No | `-` | - |
365
- | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
366
- | `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
362
+ | `position` | `absolute \| relative \| static` | No | `-` | - |
363
+ | `ref` | `null \| (instance: View \| null) => void \| RefObject<View \| null>` | No | `-` | - |
364
+ | `right` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
365
+ | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
366
+ | `style` | `false \| \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
367
367
  | `styles` | `{ root?: StyleProp<ViewStyle>; tab?: StyleProp<ViewStyle>; activeIndicator?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for individual elements of the SegmentedTabs component |
368
- | `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. |
368
+ | `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 Used to locate this view in end-to-end tests. |
369
369
  | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
370
370
  | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
371
371
  | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
372
372
  | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
373
- | `top` | `string \| number` | No | `-` | - |
374
- | `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 | `-` | - |
375
- | `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
376
- | `width` | `string \| number` | No | `-` | - |
373
+ | `top` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
374
+ | `transform` | `string \| readonly (({ 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 | `-` | - |
375
+ | `userSelect` | `auto \| none \| text \| contain \| all` | No | `-` | - |
376
+ | `width` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
377
377
  | `zIndex` | `number` | No | `-` | - |
378
378
 
379
379
 
@@ -183,11 +183,11 @@ When using the `inside` label variant, you should always include a `placeholder`
183
183
  | `options` | `Record<RadioValue, ReactNode>` | Yes | `-` | Multiple choice options for the radio group. The object key represents the radio input value and the object value represents the radio option label. |
184
184
  | `controlColor` | `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 | `bgPrimary` | Sets the checked/active color of each control in the group. |
185
185
  | `direction` | `horizontal \| vertical` | No | `vertical` | Direction a group of components should flow. |
186
- | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Gap to insert between siblings. |
187
- | `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set a label summary for the group of radios. |
186
+ | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | Gap to insert between siblings. |
187
+ | `label` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Set a label summary for the group of radios. |
188
188
  | `onChange` | `((value: RadioValue, checked?: boolean \| undefined) => void) \| undefined` | No | `-` | Handle change event when pressing on a radio option. |
189
189
  | `radioAccessibilityLabel` | `string` | No | `-` | A11Y label to indicate order of radio buttons when focused on one button |
190
- | `ref` | `null \| (instance: View \| null) => void \| RefObject<View>` | No | `-` | - |
190
+ | `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | - |
191
191
  | `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 |
192
192
  | `value` | `string` | No | `-` | Currently selected value. |
193
193