@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
@@ -111,12 +111,12 @@ On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Acces
111
111
  | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
112
112
  | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
113
113
  | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
114
- | `bottom` | `string \| number` | No | `-` | - |
114
+ | `bottom` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
115
115
  | `cancelable` | `boolean \| null` | No | `-` | Whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to true. |
116
- | `children` | `((string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal) & (string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| ((state: PressableStateCallbackType) => ReactNode))) \| null` | No | `-` | Either children or a render prop that receives a boolean reflecting whether the component is currently pressed. |
116
+ | `children` | `((string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>) & (string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode> \| ((state: PressableStateCallbackType) => ReactNode))) \| null` | No | `-` | Either children or a render prop that receives a boolean reflecting whether the component is currently pressed. |
117
117
  | `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 | `-` | - |
118
- | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
119
- | `contentStyle` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | Apply animated styles to the inner container. |
118
+ | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
119
+ | `contentStyle` | `null \| false \| \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Apply animated styles to the inner container. |
120
120
  | `dangerouslySetBackground` | `string` | No | `-` | - |
121
121
  | `debounceTime` | `number` | No | `500` | The amount of time to wait (in milliseconds) before invoking the debounced function. This prop is used in conjunction with the disableDebounce prop. The debounce function is configured to be invoked as soon as its called, but subsequent calls within the debounceTime period will be ignored. |
122
122
  | `delayHoverIn` | `number \| null` | No | `-` | Duration to wait after hover in before calling onHoverIn. |
@@ -124,11 +124,11 @@ On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Acces
124
124
  | `delayLongPress` | `number \| null` | No | `-` | Duration (in milliseconds) from onPressIn before onLongPress is called. |
125
125
  | `disableDebounce` | `boolean` | No | `-` | React Native is historically trash at debouncing touch events. This can cause a lot of unwanted behavior such as double navigations where we push a screen onto the stack 2 times. Debouncing the event 500 miliseconds, but taking the leading event prevents this effect and the accidental double-tap. |
126
126
  | `disabled` | `boolean` | No | `-` | Is the element currently disabled. Whether the press behavior is disabled. |
127
- | `display` | `flex \| none` | No | `-` | - |
127
+ | `display` | `flex \| none \| contents` | No | `-` | - |
128
128
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
129
- | `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
130
- | `flexBasis` | `string \| number` | No | `-` | - |
131
- | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
129
+ | `feedback` | `light \| none \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
130
+ | `flexBasis` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
131
+ | `flexDirection` | `column \| row \| row-reverse \| column-reverse` | No | `-` | - |
132
132
  | `flexGrow` | `number` | No | `-` | - |
133
133
  | `flexShrink` | `number` | No | `-` | - |
134
134
  | `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
@@ -136,25 +136,25 @@ On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Acces
136
136
  | `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
137
137
  | `fontSize` | `inherit \| FontSize` | No | `-` | - |
138
138
  | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
139
- | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
140
- | `height` | `string \| number` | No | `-` | - |
139
+ | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
140
+ | `height` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
141
141
  | `hitSlop` | `number \| Insets \| null` | No | `-` | Additional distance outside of this view in which a press is detected. |
142
142
  | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
143
143
  | `key` | `Key \| null` | No | `-` | - |
144
- | `left` | `string \| number` | No | `-` | - |
144
+ | `left` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
145
145
  | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
146
146
  | `loading` | `boolean` | No | `-` | Is the element currenty loading. When set to true, will disable element from press and keyboard events Is the element currenty loading. |
147
- | `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
148
- | `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
149
- | `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
150
- | `marginStart` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
151
- | `marginTop` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
152
- | `marginX` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
153
- | `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
154
- | `maxHeight` | `string \| number` | No | `-` | - |
155
- | `maxWidth` | `string \| number` | No | `-` | - |
156
- | `minHeight` | `string \| number` | No | `-` | - |
157
- | `minWidth` | `string \| number` | No | `-` | - |
147
+ | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
148
+ | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
149
+ | `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
150
+ | `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
151
+ | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
152
+ | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
153
+ | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
154
+ | `maxHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
155
+ | `maxWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
156
+ | `minHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
157
+ | `minWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
158
158
  | `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |
159
159
  | `onBlur` | `((event: NativeSyntheticEvent<TargetedEvent>) => void) \| null` | No | `-` | Called after the element loses focus. |
160
160
  | `onFocus` | `((event: NativeSyntheticEvent<TargetedEvent>) => void) \| null` | No | `-` | Called after the element is focused. |
@@ -183,33 +183,33 @@ On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Acces
183
183
  | `onTouchStart` | `((event: GestureResponderEvent) => void)` | No | `-` | - |
184
184
  | `opacity` | `number \| AnimatedNode` | No | `-` | - |
185
185
  | `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
186
- | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
187
- | `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
188
- | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
189
- | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
190
- | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
191
- | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
192
- | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
186
+ | `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
187
+ | `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
188
+ | `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
189
+ | `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
190
+ | `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
191
+ | `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
192
+ | `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
193
193
  | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
194
- | `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
194
+ | `position` | `absolute \| relative \| static` | No | `-` | - |
195
195
  | `pressRetentionOffset` | `number \| Insets \| null` | No | `-` | Additional distance outside of this view in which a touch is considered a press before onPressOut is triggered. |
196
- | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
197
- | `right` | `string \| number` | No | `-` | - |
198
- | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
196
+ | `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). |
197
+ | `right` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
198
+ | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
199
199
  | `style` | `StyleProp<ViewStyle> \| ((state: PressableStateCallbackType) => StyleProp<ViewStyle>)` | No | `-` | Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles. |
200
- | `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. |
200
+ | `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. |
201
201
  | `testOnly_pressed` | `boolean \| null` | No | `-` | Used only for documentation or testing (e.g. snapshot testing). |
202
202
  | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
203
203
  | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
204
204
  | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
205
205
  | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
206
- | `top` | `string \| number` | No | `-` | - |
207
- | `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 | `-` | - |
206
+ | `top` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
207
+ | `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 | `-` | - |
208
208
  | `transparentWhileInactive` | `boolean` | No | `-` | Mark the background and border as transparent until the element is interacted with (hovered, pressed, etc). Must be used in conjunction with the pressed prop |
209
209
  | `transparentWhilePressed` | `boolean` | No | `-` | Mark the background and border as transparent even while element is interacted with (elevation underlay issue). Must be used in conjunction with the pressed prop |
210
210
  | `unstable_pressDelay` | `number` | No | `-` | Duration (in milliseconds) to wait after press down before calling onPressIn. |
211
- | `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
212
- | `width` | `string \| number` | No | `-` | - |
211
+ | `userSelect` | `auto \| none \| text \| contain \| all` | No | `-` | - |
212
+ | `width` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
213
213
  | `wrapperStyles` | `{ base?: StyleProp<ViewStyle>; pressed?: StyleProp<ViewStyle>; disabled?: StyleProp<ViewStyle>; }` | No | `-` | Apply styles to the outer container. |
214
214
  | `zIndex` | `number` | No | `-` | - |
215
215
 
@@ -136,8 +136,8 @@ function Example() {
136
136
  | `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
137
137
  | `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |
138
138
  | `progress` | `number` | No | `-` | Number between 0-1 representing the progress percentage |
139
- | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
140
- | `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
139
+ | `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). |
140
+ | `style` | `null \| false \| \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
141
141
  | `styles` | `{ root?: StyleProp<ViewStyle>; progress?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for individual elements of the ProgressBar component |
142
142
  | `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 |
143
143
  | `weight` | `normal \| heavy \| thin \| semiheavy` | No | `normal` | Toggle used to change thickness of progress visualization |
@@ -210,7 +210,7 @@ function Example() {
210
210
  | `endLabel` | `number \| { value: number; render: (num: number, disabled?: boolean \| undefined) => ReactNode; }` | No | `-` | Label that is pinned to the end of the container. If a number is used then it will format it as a percentage. |
211
211
  | `labelPlacement` | `above \| below \| beside` | No | `beside` | Position of label relative to the bar |
212
212
  | `startLabel` | `number \| { value: number; render: (num: number, disabled?: boolean \| undefined) => ReactNode; }` | No | `-` | Label that is pinned to the start of the container. If a number is used then it will format it as a percentage. |
213
- | `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
213
+ | `style` | `null \| false \| \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
214
214
  | `styles` | `{ root?: StyleProp<ViewStyle>; labelContainer?: StyleProp<ViewStyle>; startLabel?: StyleProp<TextStyle>; endLabel?: StyleProp<TextStyle>; }` | No | `-` | Custom styles for individual elements of the ProgressBarWithFixedLabels component |
215
215
  | `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 |
216
216
 
@@ -182,7 +182,7 @@ function Example() {
182
182
  | `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
183
183
  | `labelPlacement` | `above \| below` | No | `above` | Position of label relative to the bar |
184
184
  | `progress` | `number` | No | `-` | Number between 0-1 representing the progress percentage |
185
- | `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
185
+ | `style` | `null \| false \| \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
186
186
  | `styles` | `{ root?: StyleProp<ViewStyle>; labelContainer?: StyleProp<ViewStyle>; label?: StyleProp<TextStyle>; }` | No | `-` | Custom styles for individual elements of the ProgressBarWithFloatLabel component |
187
187
  | `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 |
188
188
 
@@ -300,7 +300,7 @@ function Example() {
300
300
  | Prop | Type | Required | Default | Description |
301
301
  | --- | --- | --- | --- | --- |
302
302
  | `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 | `primary` | Custom progress color. |
303
- | `contentNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Optional component to override the default content rendered inside the circle. |
303
+ | `contentNode` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Optional component to override the default content rendered inside the circle. |
304
304
  | `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
305
305
  | `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
306
306
  | `hideContent` | `boolean` | No | `-` | Toggle used to hide the content node rendered inside the circle. |
@@ -310,9 +310,9 @@ function Example() {
310
310
  | `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
311
311
  | `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |
312
312
  | `progress` | `number` | No | `-` | Number between 0-1 representing the progress percentage |
313
- | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
313
+ | `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). |
314
314
  | `size` | `number` | No | `-` | Optional size in px for the visualization. This is useful if the visualization is used in an HStack. If this is omitted the visualization will fill the parent width or height. Since its a circular visualization it will fill the smaller of the parent width or height |
315
- | `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
315
+ | `style` | `null \| false \| \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
316
316
  | `styles` | `{ root?: StyleProp<ViewStyle>; svgContainer?: StyleProp<ViewStyle>; svg?: StyleProp<ViewStyle>; textContainer?: StyleProp<ViewStyle>; progress?: Partial<CircleProps>; circle?: Partial<CircleProps> \| undefined; } \| undefined` | No | `-` | Custom styles for individual elements of the ProgressCircle component |
317
317
  | `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 |
318
318
  | `weight` | `normal \| heavy \| thin \| semiheavy` | No | `normal` | Toggle used to change thickness of progress visualization |
@@ -215,7 +215,7 @@ function AccessibleRadio() {
215
215
  | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `1000` | - |
216
216
  | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `100` | Sets the border width of the radio. |
217
217
  | `checked` | `boolean` | No | `-` | Set the control to selected/on. |
218
- | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label for the control option. |
218
+ | `children` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Label for the control option. |
219
219
  | `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 | `black` | - |
220
220
  | `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 the radio. |
221
221
  | `controlSize` | `number` | No | `theme.controlSize.radioSize` | Sets the outer radio control size in pixels. |
@@ -238,9 +238,9 @@ function AccessibleRadio() {
238
238
  | `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
239
239
  | `onPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a single tap gesture is detected. |
240
240
  | `readOnly` | `boolean` | No | `-` | Set the control to ready-only. Similar effect as disabled. |
241
- | `ref` | `null \| (instance: View \| null) => void \| RefObject<View>` | No | `-` | - |
241
+ | `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | - |
242
242
  | `style` | `ViewStyle` | No | `-` | - |
243
- | `testID` | `string` | No | `-` | Used to locate this view in end-to-end tests. |
243
+ | `testID` | `string` | No | `-` | 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 |
244
244
  | `value` | `string` | No | `-` | Value of the option. Useful for multiple choice. |
245
245
 
246
246
 
@@ -86,7 +86,7 @@ function CustomRadioCellExample() {
86
86
 
87
87
  | Prop | Type | Required | Default | Description |
88
88
  | --- | --- | --- | --- | --- |
89
- | `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | - |
89
+ | `title` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | Yes | `-` | - |
90
90
  | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
91
91
  | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
92
92
  | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
@@ -112,22 +112,22 @@ function CustomRadioCellExample() {
112
112
  | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
113
113
  | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
114
114
  | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
115
- | `bottom` | `string \| number` | No | `-` | - |
115
+ | `bottom` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
116
116
  | `checked` | `boolean` | No | `-` | Set the control to selected/on. |
117
117
  | `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 | `-` | - |
118
- | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
119
- | `contentStyle` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | Apply animated styles to the inner container. |
118
+ | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
119
+ | `contentStyle` | `null \| false \| \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Apply animated styles to the inner container. |
120
120
  | `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 the control. |
121
121
  | `dangerouslySetBackground` | `string` | No | `-` | - |
122
122
  | `debounceTime` | `number` | No | `500` | The amount of time to wait (in milliseconds) before invoking the debounced function. This prop is used in conjunction with the disableDebounce prop. The debounce function is configured to be invoked as soon as its called, but subsequent calls within the debounceTime period will be ignored. |
123
- | `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
123
+ | `description` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | - |
124
124
  | `disableDebounce` | `boolean` | No | `-` | React Native is historically trash at debouncing touch events. This can cause a lot of unwanted behavior such as double navigations where we push a screen onto the stack 2 times. Debouncing the event 500 miliseconds, but taking the leading event prevents this effect and the accidental double-tap. |
125
125
  | `disabled` | `boolean` | No | `-` | Disable user interaction. Is the element currently disabled. Whether the press behavior is disabled. |
126
- | `display` | `flex \| none` | No | `-` | - |
126
+ | `display` | `flex \| none \| contents` | No | `-` | - |
127
127
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Sets the elevation/drop shadow of the control. Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
128
- | `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
129
- | `flexBasis` | `string \| number` | No | `-` | - |
130
- | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
128
+ | `feedback` | `light \| none \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
129
+ | `flexBasis` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
130
+ | `flexDirection` | `column \| row \| row-reverse \| column-reverse` | No | `-` | - |
131
131
  | `flexGrow` | `number` | No | `-` | - |
132
132
  | `flexShrink` | `number` | No | `-` | - |
133
133
  | `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
@@ -135,24 +135,24 @@ function CustomRadioCellExample() {
135
135
  | `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
136
136
  | `fontSize` | `inherit \| FontSize` | No | `-` | - |
137
137
  | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
138
- | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
139
- | `height` | `string \| number` | No | `-` | - |
138
+ | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
139
+ | `height` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
140
140
  | `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
141
141
  | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
142
- | `left` | `string \| number` | No | `-` | - |
142
+ | `left` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
143
143
  | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
144
144
  | `loading` | `boolean` | No | `-` | Is the element currenty loading. When set to true, will disable element from press and keyboard events Is the element currenty loading. |
145
- | `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
146
- | `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
147
- | `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
148
- | `marginStart` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
149
- | `marginTop` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
150
- | `marginX` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
151
- | `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
152
- | `maxHeight` | `string \| number` | No | `-` | - |
153
- | `maxWidth` | `string \| number` | No | `-` | - |
154
- | `minHeight` | `string \| number` | No | `-` | - |
155
- | `minWidth` | `string \| number` | No | `-` | - |
145
+ | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
146
+ | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
147
+ | `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
148
+ | `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
149
+ | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
150
+ | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
151
+ | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
152
+ | `maxHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
153
+ | `maxWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
154
+ | `minHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
155
+ | `minWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
156
156
  | `onChange` | `((value: RadioValue, checked?: boolean \| undefined) => void) \| undefined` | No | `-` | Toggle control selected state. |
157
157
  | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
158
158
  | `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
@@ -169,34 +169,34 @@ function CustomRadioCellExample() {
169
169
  | `onPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a single tap gesture is detected. |
170
170
  | `opacity` | `number \| AnimatedNode` | No | `-` | - |
171
171
  | `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
172
- | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
173
- | `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
174
- | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
175
- | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
176
- | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
177
- | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
178
- | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
172
+ | `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
173
+ | `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
174
+ | `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
175
+ | `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
176
+ | `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
177
+ | `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
178
+ | `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
179
179
  | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
180
- | `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
180
+ | `position` | `absolute \| relative \| static` | No | `-` | - |
181
181
  | `pressedBorderColor` | `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 | `-` | - |
182
182
  | `pressedBorderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
183
183
  | `readOnly` | `boolean` | No | `-` | Set the control to ready-only. Similar effect as disabled. |
184
- | `ref` | `null \| (instance: View \| null) => void \| MutableRefObject<View \| null>` | No | `-` | - |
185
- | `right` | `string \| number` | No | `-` | - |
186
- | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
184
+ | `ref` | `null \| (instance: View \| null) => void \| RefObject<View \| null>` | No | `-` | - |
185
+ | `right` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
186
+ | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
187
187
  | `styles` | `{ root?: StyleProp<ViewStyle>; radioContainer?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; description?: StyleProp<TextStyle>; }` | No | `-` | - |
188
- | `testID` | `string` | No | `-` | Used to locate this view in end-to-end tests. |
188
+ | `testID` | `string` | No | `-` | 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 |
189
189
  | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
190
190
  | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
191
191
  | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
192
192
  | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
193
- | `top` | `string \| number` | No | `-` | - |
194
- | `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 | `-` | - |
193
+ | `top` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
194
+ | `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 | `-` | - |
195
195
  | `transparentWhileInactive` | `boolean` | No | `-` | Mark the background and border as transparent until the element is interacted with (hovered, pressed, etc). Must be used in conjunction with the pressed prop |
196
196
  | `transparentWhilePressed` | `boolean` | No | `-` | Mark the background and border as transparent even while element is interacted with (elevation underlay issue). Must be used in conjunction with the pressed prop |
197
- | `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
197
+ | `userSelect` | `auto \| none \| text \| contain \| all` | No | `-` | - |
198
198
  | `value` | `string` | No | `-` | Value of the option. Useful for multiple choice. |
199
- | `width` | `string \| number` | No | `-` | - |
199
+ | `width` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
200
200
  | `wrapperStyles` | `{ base?: StyleProp<ViewStyle>; pressed?: StyleProp<ViewStyle>; disabled?: StyleProp<ViewStyle>; }` | No | `-` | Apply styles to the outer container. |
201
201
  | `zIndex` | `number` | No | `-` | - |
202
202
 
@@ -253,11 +253,11 @@ function AdvancedCustomColors() {
253
253
  | `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. |
254
254
  | `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. |
255
255
  | `direction` | `horizontal \| vertical` | No | `vertical` | Direction a group of components should flow. |
256
- | `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. |
257
- | `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set a label summary for the group of radios. |
256
+ | `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. |
257
+ | `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. |
258
258
  | `onChange` | `((value: RadioValue, checked?: boolean \| undefined) => void) \| undefined` | No | `-` | Handle change event when pressing on a radio option. |
259
259
  | `radioAccessibilityLabel` | `string` | No | `-` | A11Y label to indicate order of radio buttons when focused on one button |
260
- | `ref` | `null \| (instance: View \| null) => void \| RefObject<View>` | No | `-` | - |
260
+ | `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | - |
261
261
  | `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 |
262
262
  | `value` | `string` | No | `-` | Currently selected value. |
263
263
 
@@ -7,7 +7,7 @@ A horizontal or vertical reference line to mark important values on a chart, suc
7
7
  ## Import
8
8
 
9
9
  ```tsx
10
- import { ReferenceLine } from '@coinbase/cds-mobile-visualization'
10
+ import { ReferenceLine } from '@coinbase/cds-mobile/visualizations/chart'
11
11
  ```
12
12
 
13
13
  ## Examples
@@ -82,24 +82,24 @@ If no images are shown, RemoteImage will show a default Fallback. Be aware that
82
82
  | `id` | `string` | No | `-` | Used to reference react managed images from native code. |
83
83
  | `loadingIndicatorSource` | `ImageURISource` | No | `-` | similarly to source, this property represents the resource used to render the loading indicator for the image, displayed until image is ready to be displayed, typically after when it got downloaded from network. |
84
84
  | `nativeID` | `string` | No | `-` | Used to reference react managed images from native code. |
85
- | `onError` | `((error: NativeSyntheticEvent<ImageErrorEventData>) => void)` | No | `-` | Invoked on load error with {nativeEvent: {error}} |
85
+ | `onError` | `((error: ImageErrorEvent) => void)` | No | `-` | Invoked on load error with {nativeEvent: {error}} |
86
86
  | `onLayout` | `((event: LayoutChangeEvent) => void)` | No | `-` | onLayout function Invoked on mount and layout changes with {nativeEvent: { layout: {x, y, width, height} }}. |
87
- | `onLoad` | `((event: NativeSyntheticEvent<ImageLoadEventData>) => void)` | No | `-` | Invoked when load completes successfully { source: { uri, height, width } }. |
87
+ | `onLoad` | `((event: ImageLoadEvent) => void)` | No | `-` | Invoked when load completes successfully { source: { uri, height, width } }. |
88
88
  | `onLoadEnd` | `(() => void)` | No | `-` | Invoked when load either succeeds or fails |
89
89
  | `onLoadStart` | `(() => void)` | No | `-` | Invoked on load start |
90
90
  | `onPartialLoad` | `(() => void)` | No | `-` | Invoked when a partial load of the image is complete. The definition of what constitutes a partial load is loader specific though this is meant for progressive JPEG loads. |
91
- | `onProgress` | `((event: NativeSyntheticEvent<ImageProgressEventDataIOS>) => void)` | No | `-` | Invoked on download progress with {nativeEvent: {loaded, total}} |
91
+ | `onProgress` | `((event: ImageProgressEventIOS) => void)` | No | `-` | Invoked on download progress with {nativeEvent: {loaded, total}} |
92
92
  | `progressiveRenderingEnabled` | `boolean` | No | `-` | - |
93
93
  | `referrerPolicy` | `no-referrer \| no-referrer-when-downgrade \| origin \| origin-when-cross-origin \| same-origin \| strict-origin \| strict-origin-when-cross-origin \| unsafe-url` | No | `-` | A string indicating which referrer to use when fetching the resource. Similar to referrerpolicy from HTML. See https://reactnative.dev/docs/image#referrerpolicy |
94
- | `resizeMethod` | `auto \| scale \| resize` | No | `-` | The mechanism that should be used to resize the image when the images dimensions differ from the image views dimensions. Defaults to auto. - auto: Use heuristics to pick between resize and scale. - resize: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of scale when the image is much larger than the view. - scale: The image gets drawn downscaled or upscaled. Compared to resize, scale is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly bigger than the view. More details about resize and scale can be found at http://frescolib.org/docs/resizing-rotating.html. |
95
- | `resizeMode` | `repeat \| center \| stretch \| contain \| cover` | No | `-` | Determines how to resize the image when the frame doesnt match the raw image dimensions. cover: Scale the image uniformly (maintain the images aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). contain: Scale the image uniformly (maintain the images aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). stretch: Scale width and height independently, This may change the aspect ratio of the src. repeat: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio. (iOS only) center: Scale the image down so that it is completely visible, if bigger than the area of the view. The image will not be scaled up. |
94
+ | `resizeMethod` | `auto \| none \| scale \| resize` | No | `-` | The mechanism that should be used to resize the image when the images dimensions differ from the image views dimensions. Defaults to auto. - auto: Use heuristics to pick between resize and scale. - resize: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of scale when the image is much larger than the view. - scale: The image gets drawn downscaled or upscaled. Compared to resize, scale is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly bigger than the view. - none: No sampling is performed and the image is displayed in its full resolution. This should only be used in rare circumstances because it is considered unsafe as Android will throw a runtime exception when trying to render images that consume too much memory. More details about resize and scale can be found at http://frescolib.org/docs/resizing-rotating.html. |
95
+ | `resizeMode` | `repeat \| none \| center \| stretch \| contain \| cover` | No | `-` | Determines how to resize the image when the frame doesnt match the raw image dimensions. cover: Scale the image uniformly (maintain the images aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). contain: Scale the image uniformly (maintain the images aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). stretch: Scale width and height independently, This may change the aspect ratio of the src. repeat: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio. (iOS only) center: Scale the image down so that it is completely visible, if bigger than the area of the view. The image will not be scaled up. none: Do not resize the image. The image will be displayed at its intrinsic size. |
96
96
  | `shape` | `rectangle \| circle \| squircle \| square \| hexagon` | No | `square` | Shape of RemoteImage |
97
97
  | `shouldApplyDarkModeEnhacements` | `boolean` | No | `-` | - |
98
98
  | `size` | `s \| m \| l \| xl \| xxl \| xxxl` | No | `m` | Size for a given RemoteImage. If width or height is not defined, it will set size = m as default |
99
99
  | `source` | `string \| number \| ImageURISource \| ImageURISource[]` | No | `-` | - |
100
100
  | `src` | `string` | No | `-` | A string representing the resource identifier for the image. Similar to src from HTML. See https://reactnative.dev/docs/image#src |
101
101
  | `srcSet` | `string` | No | `-` | Similar to srcset from HTML. See https://reactnative.dev/docs/image#srcset |
102
- | `style` | `null \| false \| ImageStyle \| RegisteredStyle<ImageStyle> \| RecursiveArray<Falsy \| ImageStyle \| RegisteredStyle<ImageStyle>>` | No | `-` | - |
102
+ | `style` | `null \| false \| \| ImageStyle \| RegisteredStyle<ImageStyle> \| RecursiveArray<Falsy \| ImageStyle \| RegisteredStyle<ImageStyle>>` | No | `-` | - |
103
103
  | `testID` | `string` | No | `-` | A unique identifier for this element to be used in UI Automation testing scripts. |
104
104
  | `tintColor` | `string \| OpaqueColorValue` | No | `-` | Changes the color of all the non-transparent pixels to the tintColor. See https://reactnative.dev/docs/image#tintcolor |
105
105
  | `width` | `string \| number` | No | `-` | Width of RemoteImage. Width takes precedence over size |
@@ -68,7 +68,7 @@ Use the `borderWidth` and `borderColor` props to change border style of the imag
68
68
  | --- | --- | --- | --- | --- |
69
69
  | `borderColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
70
70
  | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
71
- | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Children content |
71
+ | `children` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Children content |
72
72
  | `max` | `number` | No | `4` | Indicates the number of remote image before it collapses |
73
73
  | `shape` | `rectangle \| circle \| squircle \| square \| hexagon` | No | `circle` | Shape of all RemoteImage children in the group |
74
74
  | `size` | `number \| AvatarSize` | No | `m` | Size of all RemoteImage children in the group. |