@coinbase/cds-mcp-server 8.17.3 → 8.17.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (284) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/mcp-docs/mobile/components/Accordion.txt +11 -12
  3. package/mcp-docs/mobile/components/AccordionItem.txt +5 -6
  4. package/mcp-docs/mobile/components/Alert.txt +21 -22
  5. package/mcp-docs/mobile/components/AreaChart.txt +118 -119
  6. package/mcp-docs/mobile/components/Avatar.txt +82 -83
  7. package/mcp-docs/mobile/components/AvatarButton.txt +103 -104
  8. package/mcp-docs/mobile/components/Banner.txt +100 -101
  9. package/mcp-docs/mobile/components/BarChart.txt +120 -121
  10. package/mcp-docs/mobile/components/Box.txt +65 -66
  11. package/mcp-docs/mobile/components/BrowserBar.txt +38 -39
  12. package/mcp-docs/mobile/components/Button.txt +78 -79
  13. package/mcp-docs/mobile/components/ButtonGroup.txt +10 -11
  14. package/mcp-docs/mobile/components/Carousel.txt +103 -104
  15. package/mcp-docs/mobile/components/CartesianChart.txt +107 -108
  16. package/mcp-docs/mobile/components/CellMedia.txt +15 -16
  17. package/mcp-docs/mobile/components/Checkbox.txt +35 -36
  18. package/mcp-docs/mobile/components/CheckboxCell.txt +73 -74
  19. package/mcp-docs/mobile/components/CheckboxGroup.txt +24 -25
  20. package/mcp-docs/mobile/components/Chip.txt +67 -68
  21. package/mcp-docs/mobile/components/Coachmark.txt +42 -43
  22. package/mcp-docs/mobile/components/Collapsible.txt +15 -16
  23. package/mcp-docs/mobile/components/ContainedAssetCard.txt +16 -17
  24. package/mcp-docs/mobile/components/ContentCard.txt +99 -100
  25. package/mcp-docs/mobile/components/ContentCardBody.txt +23 -24
  26. package/mcp-docs/mobile/components/ContentCardFooter.txt +19 -20
  27. package/mcp-docs/mobile/components/ContentCardHeader.txt +33 -34
  28. package/mcp-docs/mobile/components/ContentCell.txt +102 -103
  29. package/mcp-docs/mobile/components/ControlGroup.txt +106 -107
  30. package/mcp-docs/mobile/components/DatePicker.txt +121 -122
  31. package/mcp-docs/mobile/components/Divider.txt +31 -32
  32. package/mcp-docs/mobile/components/DotCount.txt +15 -16
  33. package/mcp-docs/mobile/components/DotStatusColor.txt +12 -13
  34. package/mcp-docs/mobile/components/DotSymbol.txt +21 -22
  35. package/mcp-docs/mobile/components/Fallback.txt +49 -50
  36. package/mcp-docs/mobile/components/FloatingAssetCard.txt +13 -14
  37. package/mcp-docs/mobile/components/HStack.txt +99 -100
  38. package/mcp-docs/mobile/components/HeroSquare.txt +11 -12
  39. package/mcp-docs/mobile/components/Icon.txt +16 -17
  40. package/mcp-docs/mobile/components/IconButton.txt +104 -105
  41. package/mcp-docs/mobile/components/InputChip.txt +62 -63
  42. package/mcp-docs/mobile/components/Interactable.txt +72 -73
  43. package/mcp-docs/mobile/components/LineChart.txt +117 -118
  44. package/mcp-docs/mobile/components/Link.txt +113 -114
  45. package/mcp-docs/mobile/components/ListCell.txt +149 -128
  46. package/mcp-docs/mobile/components/LogoMark.txt +8 -9
  47. package/mcp-docs/mobile/components/LogoWordMark.txt +7 -8
  48. package/mcp-docs/mobile/components/Lottie.txt +39 -40
  49. package/mcp-docs/mobile/components/LottieStatusAnimation.txt +11 -12
  50. package/mcp-docs/mobile/components/Modal.txt +36 -37
  51. package/mcp-docs/mobile/components/ModalBody.txt +5 -6
  52. package/mcp-docs/mobile/components/ModalFooter.txt +5 -6
  53. package/mcp-docs/mobile/components/ModalHeader.txt +5 -6
  54. package/mcp-docs/mobile/components/MultiContentModule.txt +107 -108
  55. package/mcp-docs/mobile/components/NavigationTitle.txt +13 -14
  56. package/mcp-docs/mobile/components/NavigationTitleSelect.txt +20 -21
  57. package/mcp-docs/mobile/components/NudgeCard.txt +20 -21
  58. package/mcp-docs/mobile/components/Numpad.txt +108 -109
  59. package/mcp-docs/mobile/components/Overlay.txt +45 -46
  60. package/mcp-docs/mobile/components/PageFooter.txt +57 -58
  61. package/mcp-docs/mobile/components/PageHeader.txt +79 -80
  62. package/mcp-docs/mobile/components/PeriodSelector.txt +98 -99
  63. package/mcp-docs/mobile/components/Pictogram.txt +11 -12
  64. package/mcp-docs/mobile/components/Point.txt +21 -22
  65. package/mcp-docs/mobile/components/PortalProvider.txt +7 -8
  66. package/mcp-docs/mobile/components/Pressable.txt +67 -68
  67. package/mcp-docs/mobile/components/ProgressBar.txt +18 -19
  68. package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +13 -14
  69. package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +13 -14
  70. package/mcp-docs/mobile/components/ProgressCircle.txt +22 -23
  71. package/mcp-docs/mobile/components/Radio.txt +35 -36
  72. package/mcp-docs/mobile/components/RadioCell.txt +73 -74
  73. package/mcp-docs/mobile/components/RadioGroup.txt +35 -36
  74. package/mcp-docs/mobile/components/ReferenceLine.txt +15 -16
  75. package/mcp-docs/mobile/components/RemoteImage.txt +47 -48
  76. package/mcp-docs/mobile/components/RemoteImageGroup.txt +11 -12
  77. package/mcp-docs/mobile/components/RollingNumber.txt +130 -131
  78. package/mcp-docs/mobile/components/Scrubber.txt +19 -20
  79. package/mcp-docs/mobile/components/SearchInput.txt +77 -78
  80. package/mcp-docs/mobile/components/SectionHeader.txt +16 -17
  81. package/mcp-docs/mobile/components/SegmentedTabs.txt +105 -106
  82. package/mcp-docs/mobile/components/Select.txt +35 -36
  83. package/mcp-docs/mobile/components/SelectChip.txt +143 -144
  84. package/mcp-docs/mobile/components/SelectOption.txt +26 -27
  85. package/mcp-docs/mobile/components/SlideButton.txt +128 -129
  86. package/mcp-docs/mobile/components/Spacer.txt +27 -28
  87. package/mcp-docs/mobile/components/Sparkline.txt +18 -19
  88. package/mcp-docs/mobile/components/SparklineGradient.txt +18 -19
  89. package/mcp-docs/mobile/components/SparklineInteractive.txt +37 -38
  90. package/mcp-docs/mobile/components/SparklineInteractiveHeader.txt +12 -13
  91. package/mcp-docs/mobile/components/Spinner.txt +15 -16
  92. package/mcp-docs/mobile/components/SpotIcon.txt +11 -12
  93. package/mcp-docs/mobile/components/SpotRectangle.txt +11 -12
  94. package/mcp-docs/mobile/components/SpotSquare.txt +11 -12
  95. package/mcp-docs/mobile/components/Stepper.txt +113 -114
  96. package/mcp-docs/mobile/components/SubBrandLogoMark.txt +8 -9
  97. package/mcp-docs/mobile/components/SubBrandLogoWordMark.txt +8 -9
  98. package/mcp-docs/mobile/components/Switch.txt +35 -36
  99. package/mcp-docs/mobile/components/TabIndicator.txt +12 -13
  100. package/mcp-docs/mobile/components/TabLabel.txt +28 -29
  101. package/mcp-docs/mobile/components/TabNavigation.txt +41 -42
  102. package/mcp-docs/mobile/components/TabbedChips.txt +38 -39
  103. package/mcp-docs/mobile/components/Tabs.txt +76 -77
  104. package/mcp-docs/mobile/components/Tag.txt +102 -103
  105. package/mcp-docs/mobile/components/Text.txt +91 -92
  106. package/mcp-docs/mobile/components/TextInput.txt +107 -108
  107. package/mcp-docs/mobile/components/ThemeProvider.txt +8 -9
  108. package/mcp-docs/mobile/components/Toast.txt +82 -83
  109. package/mcp-docs/mobile/components/Tooltip.txt +20 -21
  110. package/mcp-docs/mobile/components/TopNavBar.txt +55 -56
  111. package/mcp-docs/mobile/components/Tour.txt +18 -19
  112. package/mcp-docs/mobile/components/Tray.txt +43 -44
  113. package/mcp-docs/mobile/components/UpsellCard.txt +16 -17
  114. package/mcp-docs/mobile/components/VStack.txt +99 -100
  115. package/mcp-docs/mobile/components/XAxis.txt +25 -26
  116. package/mcp-docs/mobile/components/YAxis.txt +26 -27
  117. package/mcp-docs/mobile/getting-started/{mcp-server.txt → ai-overview.txt} +51 -37
  118. package/mcp-docs/mobile/getting-started/installation.txt +57 -0
  119. package/mcp-docs/mobile/getting-started/introduction.txt +3 -0
  120. package/mcp-docs/mobile/getting-started/playground.txt +3 -0
  121. package/mcp-docs/mobile/getting-started/styling.txt +84 -0
  122. package/mcp-docs/mobile/getting-started/theming.txt +286 -0
  123. package/mcp-docs/mobile/hooks/useDimensions.txt +27 -2
  124. package/mcp-docs/mobile/hooks/useEventHandler.txt +120 -0
  125. package/mcp-docs/mobile/hooks/useMergeRefs.txt +116 -0
  126. package/mcp-docs/mobile/hooks/useOverlayContentContext.txt +67 -2
  127. package/mcp-docs/mobile/hooks/usePreviousValue.txt +74 -0
  128. package/mcp-docs/mobile/hooks/useRefMap.txt +178 -0
  129. package/mcp-docs/mobile/hooks/useTheme.txt +213 -2
  130. package/mcp-docs/mobile/routes.txt +8 -1
  131. package/mcp-docs/web/components/Accordion.txt +12 -13
  132. package/mcp-docs/web/components/AccordionItem.txt +5 -6
  133. package/mcp-docs/web/components/Alert.txt +24 -25
  134. package/mcp-docs/web/components/AreaChart.txt +137 -138
  135. package/mcp-docs/web/components/Avatar.txt +91 -92
  136. package/mcp-docs/web/components/AvatarButton.txt +113 -114
  137. package/mcp-docs/web/components/Banner.txt +101 -102
  138. package/mcp-docs/web/components/BarChart.txt +367 -368
  139. package/mcp-docs/web/components/Box.txt +65 -66
  140. package/mcp-docs/web/components/Button.txt +81 -82
  141. package/mcp-docs/web/components/ButtonGroup.txt +10 -11
  142. package/mcp-docs/web/components/Calendar.txt +56 -57
  143. package/mcp-docs/web/components/Carousel.txt +116 -117
  144. package/mcp-docs/web/components/CartesianChart.txt +357 -358
  145. package/mcp-docs/web/components/CellMedia.txt +14 -15
  146. package/mcp-docs/web/components/Checkbox.txt +22 -23
  147. package/mcp-docs/web/components/CheckboxCell.txt +70 -71
  148. package/mcp-docs/web/components/CheckboxGroup.txt +15 -16
  149. package/mcp-docs/web/components/Chip.txt +67 -68
  150. package/mcp-docs/web/components/Coachmark.txt +69 -70
  151. package/mcp-docs/web/components/Collapsible.txt +15 -16
  152. package/mcp-docs/web/components/ContainedAssetCard.txt +108 -109
  153. package/mcp-docs/web/components/ContentCard.txt +101 -102
  154. package/mcp-docs/web/components/ContentCardBody.txt +23 -24
  155. package/mcp-docs/web/components/ContentCardFooter.txt +19 -20
  156. package/mcp-docs/web/components/ContentCardHeader.txt +33 -34
  157. package/mcp-docs/web/components/ContentCell.txt +85 -86
  158. package/mcp-docs/web/components/ControlGroup.txt +108 -109
  159. package/mcp-docs/web/components/DatePicker.txt +59 -60
  160. package/mcp-docs/web/components/Divider.txt +31 -32
  161. package/mcp-docs/web/components/DotCount.txt +17 -18
  162. package/mcp-docs/web/components/DotStatusColor.txt +12 -13
  163. package/mcp-docs/web/components/DotSymbol.txt +24 -25
  164. package/mcp-docs/web/components/Dropdown.txt +31 -32
  165. package/mcp-docs/web/components/Fallback.txt +49 -50
  166. package/mcp-docs/web/components/FloatingAssetCard.txt +108 -109
  167. package/mcp-docs/web/components/FullscreenAlert.txt +20 -21
  168. package/mcp-docs/web/components/FullscreenModal.txt +28 -29
  169. package/mcp-docs/web/components/FullscreenModalLayout.txt +19 -20
  170. package/mcp-docs/web/components/Grid.txt +106 -107
  171. package/mcp-docs/web/components/GridColumn.txt +96 -97
  172. package/mcp-docs/web/components/HStack.txt +101 -102
  173. package/mcp-docs/web/components/HeroSquare.txt +12 -13
  174. package/mcp-docs/web/components/Icon.txt +27 -28
  175. package/mcp-docs/web/components/IconButton.txt +117 -118
  176. package/mcp-docs/web/components/InputChip.txt +62 -63
  177. package/mcp-docs/web/components/Interactable.txt +75 -76
  178. package/mcp-docs/web/components/LineChart.txt +366 -367
  179. package/mcp-docs/web/components/Link.txt +114 -115
  180. package/mcp-docs/web/components/ListCell.txt +157 -136
  181. package/mcp-docs/web/components/LogoMark.txt +8 -9
  182. package/mcp-docs/web/components/LogoWordMark.txt +7 -8
  183. package/mcp-docs/web/components/Lottie.txt +44 -45
  184. package/mcp-docs/web/components/LottieStatusAnimation.txt +11 -12
  185. package/mcp-docs/web/components/MediaQueryProvider.txt +7 -8
  186. package/mcp-docs/web/components/Modal.txt +69 -66
  187. package/mcp-docs/web/components/ModalBody.txt +5 -6
  188. package/mcp-docs/web/components/ModalFooter.txt +5 -6
  189. package/mcp-docs/web/components/ModalHeader.txt +5 -6
  190. package/mcp-docs/web/components/MultiContentModule.txt +109 -110
  191. package/mcp-docs/web/components/NavigationBar.txt +18 -19
  192. package/mcp-docs/web/components/NavigationTitle.txt +7 -8
  193. package/mcp-docs/web/components/NavigationTitleSelect.txt +9 -10
  194. package/mcp-docs/web/components/NudgeCard.txt +61 -62
  195. package/mcp-docs/web/components/Overlay.txt +57 -58
  196. package/mcp-docs/web/components/PageFooter.txt +77 -78
  197. package/mcp-docs/web/components/PageHeader.txt +107 -108
  198. package/mcp-docs/web/components/Pagination.txt +115 -116
  199. package/mcp-docs/web/components/PeriodSelector.txt +158 -159
  200. package/mcp-docs/web/components/Pictogram.txt +13 -14
  201. package/mcp-docs/web/components/Point.txt +169 -170
  202. package/mcp-docs/web/components/PortalProvider.txt +6 -7
  203. package/mcp-docs/web/components/Pressable.txt +73 -74
  204. package/mcp-docs/web/components/ProgressBar.txt +20 -21
  205. package/mcp-docs/web/components/ProgressBarWithFixedLabels.txt +15 -16
  206. package/mcp-docs/web/components/ProgressBarWithFloatLabel.txt +15 -16
  207. package/mcp-docs/web/components/ProgressCircle.txt +24 -25
  208. package/mcp-docs/web/components/Radio.txt +22 -23
  209. package/mcp-docs/web/components/RadioCell.txt +83 -84
  210. package/mcp-docs/web/components/RadioGroup.txt +22 -23
  211. package/mcp-docs/web/components/ReferenceLine.txt +22 -23
  212. package/mcp-docs/web/components/RemoteImage.txt +49 -50
  213. package/mcp-docs/web/components/RemoteImageGroup.txt +11 -12
  214. package/mcp-docs/web/components/RollingNumber.txt +131 -132
  215. package/mcp-docs/web/components/Scrubber.txt +22 -23
  216. package/mcp-docs/web/components/SearchInput.txt +29 -30
  217. package/mcp-docs/web/components/SectionHeader.txt +98 -99
  218. package/mcp-docs/web/components/SegmentedTabs.txt +109 -110
  219. package/mcp-docs/web/components/Select.txt +22 -23
  220. package/mcp-docs/web/components/SelectChip.txt +134 -135
  221. package/mcp-docs/web/components/SelectOption.txt +31 -32
  222. package/mcp-docs/web/components/Sidebar.txt +109 -110
  223. package/mcp-docs/web/components/SidebarItem.txt +6 -7
  224. package/mcp-docs/web/components/SidebarMoreMenu.txt +5 -6
  225. package/mcp-docs/web/components/Spacer.txt +57 -58
  226. package/mcp-docs/web/components/Sparkline.txt +18 -19
  227. package/mcp-docs/web/components/SparklineGradient.txt +18 -19
  228. package/mcp-docs/web/components/SparklineInteractive.txt +34 -35
  229. package/mcp-docs/web/components/SparklineInteractiveHeader.txt +12 -13
  230. package/mcp-docs/web/components/Spinner.txt +15 -16
  231. package/mcp-docs/web/components/SpotIcon.txt +12 -13
  232. package/mcp-docs/web/components/SpotRectangle.txt +12 -13
  233. package/mcp-docs/web/components/SpotSquare.txt +12 -13
  234. package/mcp-docs/web/components/Stepper.txt +119 -120
  235. package/mcp-docs/web/components/SubBrandLogoMark.txt +8 -9
  236. package/mcp-docs/web/components/SubBrandLogoWordMark.txt +8 -9
  237. package/mcp-docs/web/components/Switch.txt +23 -24
  238. package/mcp-docs/web/components/TabIndicator.txt +12 -13
  239. package/mcp-docs/web/components/TabLabel.txt +28 -29
  240. package/mcp-docs/web/components/TabNavigation.txt +41 -42
  241. package/mcp-docs/web/components/TabbedChips.txt +38 -39
  242. package/mcp-docs/web/components/Table.txt +17 -18
  243. package/mcp-docs/web/components/TableBody.txt +9 -10
  244. package/mcp-docs/web/components/TableCaption.txt +13 -14
  245. package/mcp-docs/web/components/TableCell.txt +21 -22
  246. package/mcp-docs/web/components/TableCellFallback.txt +16 -17
  247. package/mcp-docs/web/components/TableFooter.txt +9 -10
  248. package/mcp-docs/web/components/TableHeader.txt +10 -11
  249. package/mcp-docs/web/components/TableRow.txt +13 -14
  250. package/mcp-docs/web/components/Tabs.txt +94 -95
  251. package/mcp-docs/web/components/Tag.txt +106 -107
  252. package/mcp-docs/web/components/Text.txt +110 -111
  253. package/mcp-docs/web/components/TextInput.txt +32 -33
  254. package/mcp-docs/web/components/ThemeProvider.txt +27 -28
  255. package/mcp-docs/web/components/TileButton.txt +37 -38
  256. package/mcp-docs/web/components/Toast.txt +82 -83
  257. package/mcp-docs/web/components/Tooltip.txt +22 -23
  258. package/mcp-docs/web/components/Tour.txt +21 -22
  259. package/mcp-docs/web/components/Tray.txt +23 -24
  260. package/mcp-docs/web/components/UpsellCard.txt +16 -17
  261. package/mcp-docs/web/components/VStack.txt +101 -102
  262. package/mcp-docs/web/components/XAxis.txt +25 -26
  263. package/mcp-docs/web/components/YAxis.txt +26 -27
  264. package/mcp-docs/web/getting-started/{mcp-server.txt → ai-overview.txt} +51 -37
  265. package/mcp-docs/web/getting-started/installation.txt +103 -0
  266. package/mcp-docs/web/getting-started/introduction.txt +3 -0
  267. package/mcp-docs/web/getting-started/playground.txt +3 -0
  268. package/mcp-docs/web/getting-started/styling.txt +161 -0
  269. package/mcp-docs/web/getting-started/templates.txt +121 -0
  270. package/mcp-docs/web/getting-started/theming.txt +426 -0
  271. package/mcp-docs/web/hooks/useBreakpoints.txt +30 -2
  272. package/mcp-docs/web/hooks/useDimensions.txt +61 -2
  273. package/mcp-docs/web/hooks/useEventHandler.txt +120 -0
  274. package/mcp-docs/web/hooks/useHasMounted.txt +22 -2
  275. package/mcp-docs/web/hooks/useIsoEffect.txt +18 -2
  276. package/mcp-docs/web/hooks/useMediaQuery.txt +22 -2
  277. package/mcp-docs/web/hooks/useMergeRefs.txt +116 -0
  278. package/mcp-docs/web/hooks/useOverlayContentContext.txt +64 -2
  279. package/mcp-docs/web/hooks/usePreviousValue.txt +74 -0
  280. package/mcp-docs/web/hooks/useRefMap.txt +178 -0
  281. package/mcp-docs/web/hooks/useScrollBlocker.txt +21 -2
  282. package/mcp-docs/web/hooks/useTheme.txt +261 -2
  283. package/mcp-docs/web/routes.txt +9 -1
  284. package/package.json +1 -1
@@ -4,34 +4,10 @@ CheckboxGroup is a control component that allows users to select multiple option
4
4
 
5
5
  ## Import
6
6
 
7
- ```jsx
7
+ ```tsx
8
8
  import { CheckboxGroup } from '@coinbase/cds-mobile/controls/CheckboxGroup'
9
9
  ```
10
10
 
11
- ## Props
12
-
13
- | Prop | Type | Required | Default | Description |
14
- | --- | --- | --- | --- | --- |
15
- | `children` | `ReactElement<any, string \| JSXElementConstructor<any>>[]` | Yes | `-` | Checkbox elements that are part of the checkbox group. |
16
- | `selectedValues` | `Set<T>` | Yes | `-` | Checkbox options that are checked. |
17
- | `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set a label summary for the group of checkboxes. |
18
- | `onChange` | `((value?: T) => void) \| undefined` | No | `-` | Handle change events when user tap on the checkboxes |
19
- | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
20
- | `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
21
- | `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
22
- | `onPointerDownCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
23
- | `onPointerEnter` | `((event: PointerEvent) => void)` | No | `-` | - |
24
- | `onPointerEnterCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
25
- | `onPointerLeave` | `((event: PointerEvent) => void)` | No | `-` | - |
26
- | `onPointerLeaveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
27
- | `onPointerMove` | `((event: PointerEvent) => void)` | No | `-` | - |
28
- | `onPointerMoveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
29
- | `onPointerUp` | `((event: PointerEvent) => void)` | No | `-` | - |
30
- | `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
31
- | `ref` | `null \| (instance: View \| null) => void \| RefObject<View>` | No | `-` | - |
32
- | `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 |
33
-
34
-
35
11
  ## Examples
36
12
 
37
13
  ### Deprecation Notice
@@ -282,4 +258,27 @@ function LegacyAccessibleCheckboxGroup() {
282
258
  }
283
259
  ```
284
260
 
261
+ ## Props
262
+
263
+ | Prop | Type | Required | Default | Description |
264
+ | --- | --- | --- | --- | --- |
265
+ | `children` | `ReactElement<any, string \| JSXElementConstructor<any>>[]` | Yes | `-` | Checkbox elements that are part of the checkbox group. |
266
+ | `selectedValues` | `Set<T>` | Yes | `-` | Checkbox options that are checked. |
267
+ | `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set a label summary for the group of checkboxes. |
268
+ | `onChange` | `((value?: T) => void) \| undefined` | No | `-` | Handle change events when user tap on the checkboxes |
269
+ | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
270
+ | `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
271
+ | `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
272
+ | `onPointerDownCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
273
+ | `onPointerEnter` | `((event: PointerEvent) => void)` | No | `-` | - |
274
+ | `onPointerEnterCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
275
+ | `onPointerLeave` | `((event: PointerEvent) => void)` | No | `-` | - |
276
+ | `onPointerLeaveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
277
+ | `onPointerMove` | `((event: PointerEvent) => void)` | No | `-` | - |
278
+ | `onPointerMoveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
279
+ | `onPointerUp` | `((event: PointerEvent) => void)` | No | `-` | - |
280
+ | `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
281
+ | `ref` | `null \| (instance: View \| null) => void \| RefObject<View>` | No | `-` | - |
282
+ | `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 |
283
+
285
284
 
@@ -4,10 +4,76 @@ A compact, interactive content element.
4
4
 
5
5
  ## Import
6
6
 
7
- ```jsx
7
+ ```tsx
8
8
  import { Chip } from '@coinbase/cds-mobile/chips/Chip'
9
9
  ```
10
10
 
11
+ ## Examples
12
+
13
+ ### Basic usage
14
+
15
+ ```tsx
16
+ function Example() {
17
+ return (
18
+ <HStack gap={2}>
19
+ <Chip>Basic Chip</Chip>
20
+ <Chip disabled>Disabled Chip</Chip>
21
+ <Chip onPress={() => alert('Pressed!')}>Interactive Chip</Chip>
22
+ </HStack>
23
+ );
24
+ }
25
+ ```
26
+
27
+ ### Variants
28
+
29
+ ```tsx
30
+ function Example() {
31
+ return (
32
+ <VStack gap={2}>
33
+ <HStack gap={2}>
34
+ <Chip compact>Compact</Chip>
35
+ <Chip inverted>Inverted</Chip>
36
+ <Chip maxWidth={100} numberOfLines={1}>
37
+ Long text that should truncate nicely
38
+ </Chip>
39
+ </HStack>
40
+ </VStack>
41
+ );
42
+ }
43
+ ```
44
+
45
+ ### With Icons and Images
46
+
47
+ ```tsx
48
+ function Example() {
49
+ return (
50
+ <VStack gap={2}>
51
+ <HStack gap={2}>
52
+ <Chip start={<Icon name="star" />}>With Start Icon</Chip>
53
+ <Chip end={<Icon name="chevronDown" />}>With End Icon</Chip>
54
+ <Chip start={<Icon name="star" />} end={<Icon name="chevronDown" />}>
55
+ Both Icons
56
+ </Chip>
57
+ </HStack>
58
+ <HStack gap={2}>
59
+ <Chip
60
+ start={<RemoteImage source={assets.btc.imageUrl} width={16} height={16} />}
61
+ onPress={() => alert('BTC selected')}
62
+ >
63
+ BTC
64
+ </Chip>
65
+ <Chip
66
+ start={<RemoteImage source={assets.eth.imageUrl} width={16} height={16} />}
67
+ onPress={() => alert('ETH selected')}
68
+ >
69
+ ETH
70
+ </Chip>
71
+ </HStack>
72
+ </VStack>
73
+ );
74
+ }
75
+ ```
76
+
11
77
  ## Props
12
78
 
13
79
  | Prop | Type | Required | Default | Description |
@@ -126,70 +192,3 @@ import { Chip } from '@coinbase/cds-mobile/chips/Chip'
126
192
  | `zIndex` | `number` | No | `-` | - |
127
193
 
128
194
 
129
- ## Examples
130
-
131
- ### Basic usage
132
-
133
- ```tsx
134
- function Example() {
135
- return (
136
- <HStack gap={2}>
137
- <Chip>Basic Chip</Chip>
138
- <Chip disabled>Disabled Chip</Chip>
139
- <Chip onPress={() => alert('Pressed!')}>Interactive Chip</Chip>
140
- </HStack>
141
- );
142
- }
143
- ```
144
-
145
- ### Variants
146
-
147
- ```tsx
148
- function Example() {
149
- return (
150
- <VStack gap={2}>
151
- <HStack gap={2}>
152
- <Chip compact>Compact</Chip>
153
- <Chip inverted>Inverted</Chip>
154
- <Chip maxWidth={100} numberOfLines={1}>
155
- Long text that should truncate nicely
156
- </Chip>
157
- </HStack>
158
- </VStack>
159
- );
160
- }
161
- ```
162
-
163
- ### With Icons and Images
164
-
165
- ```tsx
166
- function Example() {
167
- return (
168
- <VStack gap={2}>
169
- <HStack gap={2}>
170
- <Chip start={<Icon name="star" />}>With Start Icon</Chip>
171
- <Chip end={<Icon name="chevronDown" />}>With End Icon</Chip>
172
- <Chip start={<Icon name="star" />} end={<Icon name="chevronDown" />}>
173
- Both Icons
174
- </Chip>
175
- </HStack>
176
- <HStack gap={2}>
177
- <Chip
178
- start={<RemoteImage source={assets.btc.imageUrl} width={16} height={16} />}
179
- onPress={() => alert('BTC selected')}
180
- >
181
- BTC
182
- </Chip>
183
- <Chip
184
- start={<RemoteImage source={assets.eth.imageUrl} width={16} height={16} />}
185
- onPress={() => alert('ETH selected')}
186
- >
187
- ETH
188
- </Chip>
189
- </HStack>
190
- </VStack>
191
- );
192
- }
193
- ```
194
-
195
-
@@ -4,10 +4,51 @@ Coachmark is a flexible, accessible overlay component for onboarding, feature to
4
4
 
5
5
  ## Import
6
6
 
7
- ```jsx
7
+ ```tsx
8
8
  import { Coachmark } from '@coinbase/cds-mobile/coachmark/Coachmark'
9
9
  ```
10
10
 
11
+ ## Examples
12
+
13
+ ### Basic usage
14
+
15
+ ```tsx
16
+ <Coachmark
17
+ title="Welcome!"
18
+ content="This is a Coachmark. Use it to guide users."
19
+ action={<Button onPress={() => {}}>Got it</Button>}
20
+ onClose={() => {}}
21
+ />
22
+ ```
23
+
24
+ ### With Media
25
+
26
+ ```tsx
27
+ <Coachmark
28
+ title="Feature Highlight"
29
+ content="You can add media to your Coachmark."
30
+ media={<RemoteImage source={ethBackground} height={150} width="100%" alt="feature" />}
31
+ action={<Button onPress={() => {}}>Next</Button>}
32
+ onClose={() => {}}
33
+ />
34
+ ```
35
+
36
+ ### With Checkbox
37
+
38
+ ```tsx
39
+ <Coachmark
40
+ title="Don't show again?"
41
+ content="You can add a checkbox to let users opt out."
42
+ checkbox={
43
+ <Checkbox value={false} onChange={() => {}}>
44
+ Don't show this again
45
+ </Checkbox>
46
+ }
47
+ action={<Button onPress={() => {}}>Close</Button>}
48
+ onClose={() => {}}
49
+ />
50
+ ```
51
+
11
52
  ## Props
12
53
 
13
54
  | Prop | Type | Required | Default | Description |
@@ -114,45 +155,3 @@ import { Coachmark } from '@coinbase/cds-mobile/coachmark/Coachmark'
114
155
  | `zIndex` | `number` | No | `-` | - |
115
156
 
116
157
 
117
- ## Examples
118
-
119
- ### Basic usage
120
-
121
- ```tsx
122
- <Coachmark
123
- title="Welcome!"
124
- content="This is a Coachmark. Use it to guide users."
125
- action={<Button onPress={() => {}}>Got it</Button>}
126
- onClose={() => {}}
127
- />
128
- ```
129
-
130
- ### With Media
131
-
132
- ```tsx
133
- <Coachmark
134
- title="Feature Highlight"
135
- content="You can add media to your Coachmark."
136
- media={<RemoteImage source={ethBackground} height={150} width="100%" alt="feature" />}
137
- action={<Button onPress={() => {}}>Next</Button>}
138
- onClose={() => {}}
139
- />
140
- ```
141
-
142
- ### With Checkbox
143
-
144
- ```tsx
145
- <Coachmark
146
- title="Don't show again?"
147
- content="You can add a checkbox to let users opt out."
148
- checkbox={
149
- <Checkbox value={false} onChange={() => {}}>
150
- Don't show this again
151
- </Checkbox>
152
- }
153
- action={<Button onPress={() => {}}>Close</Button>}
154
- onClose={() => {}}
155
- />
156
- ```
157
-
158
-
@@ -4,25 +4,10 @@ A container that can be expanded or collapsed.
4
4
 
5
5
  ## Import
6
6
 
7
- ```jsx
7
+ ```tsx
8
8
  import { Collapsible } from '@coinbase/cds-mobile/layout/Collapsible'
9
9
  ```
10
10
 
11
- ## Props
12
-
13
- | Prop | Type | Required | Default | Description |
14
- | --- | --- | --- | --- | --- |
15
- | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Collapsible content |
16
- | `collapsed` | `boolean` | Yes | `true` | Expand/collapse state of the content. |
17
- | `direction` | `horizontal \| vertical` | No | `vertical` | Direction the content should expand/collapse to |
18
- | `key` | `Key \| null` | No | `-` | - |
19
- | `maxHeight` | `number` | No | `-` | Max height of the content. Overflow content will be scrollable. |
20
- | `maxWidth` | `number` | No | `-` | Max width of the content. Overflow content will be scrollable. |
21
- | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
22
- | `scrollViewProps` | `ScrollViewProps` | No | `-` | RN ScrollView props. Use with caution as it might break default settings. |
23
- | `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 |
24
-
25
-
26
11
  ## Examples
27
12
 
28
13
  ### Basic Collapsible
@@ -102,4 +87,18 @@ function Horizontal() {
102
87
  }
103
88
  ```
104
89
 
90
+ ## Props
91
+
92
+ | Prop | Type | Required | Default | Description |
93
+ | --- | --- | --- | --- | --- |
94
+ | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Collapsible content |
95
+ | `collapsed` | `boolean` | Yes | `true` | Expand/collapse state of the content. |
96
+ | `direction` | `horizontal \| vertical` | No | `vertical` | Direction the content should expand/collapse to |
97
+ | `key` | `Key \| null` | No | `-` | - |
98
+ | `maxHeight` | `number` | No | `-` | Max height of the content. Overflow content will be scrollable. |
99
+ | `maxWidth` | `number` | No | `-` | Max width of the content. Overflow content will be scrollable. |
100
+ | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
101
+ | `scrollViewProps` | `ScrollViewProps` | No | `-` | RN ScrollView props. Use with caution as it might break default settings. |
102
+ | `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 |
103
+
105
104
 
@@ -4,26 +4,10 @@ Asset Cards display current and potential future assets, offering a straightforw
4
4
 
5
5
  ## Import
6
6
 
7
- ```jsx
7
+ ```tsx
8
8
  import { ContainedAssetCard } from '@coinbase/cds-mobile/cards/ContainedAssetCard'
9
9
  ```
10
10
 
11
- ## Props
12
-
13
- | Prop | Type | Required | Default | Description |
14
- | --- | --- | --- | --- | --- |
15
- | `header` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Header to display Remote Image or other content. |
16
- | `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Text or ReactNode to be displayed in TextHeadline |
17
- | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Children to be rendered in the card |
18
- | `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content to be displayed below the title |
19
- | `maxWidth` | `string \| number` | No | `-` | - |
20
- | `minWidth` | `string \| number` | No | `-` | - |
21
- | `onPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a single tap gesture is detected. |
22
- | `size` | `s \| l` | No | `'s'` | Variant for card size. Can be small or large. |
23
- | `subtitle` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Text or ReactNode to be displayed above Title |
24
- | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
25
-
26
-
27
11
  ## Examples
28
12
 
29
13
  ### Basic example
@@ -132,4 +116,19 @@ function Example() {
132
116
  }
133
117
  ```
134
118
 
119
+ ## Props
120
+
121
+ | Prop | Type | Required | Default | Description |
122
+ | --- | --- | --- | --- | --- |
123
+ | `header` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Header to display Remote Image or other content. |
124
+ | `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Text or ReactNode to be displayed in TextHeadline |
125
+ | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Children to be rendered in the card |
126
+ | `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content to be displayed below the title |
127
+ | `maxWidth` | `string \| number` | No | `-` | - |
128
+ | `minWidth` | `string \| number` | No | `-` | - |
129
+ | `onPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a single tap gesture is detected. |
130
+ | `size` | `s \| l` | No | `'s'` | Variant for card size. Can be small or large. |
131
+ | `subtitle` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Text or ReactNode to be displayed above Title |
132
+ | `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 |
133
+
135
134
 
@@ -4,109 +4,10 @@ A flexible card component for displaying content with header, body, and footer s
4
4
 
5
5
  ## Import
6
6
 
7
- ```jsx
7
+ ```tsx
8
8
  import { ContentCard } from '@coinbase/cds-mobile/cards/ContentCard'
9
9
  ```
10
10
 
11
- ## Props
12
-
13
- | Prop | Type | Required | Default | Description |
14
- | --- | --- | --- | --- | --- |
15
- | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
16
- | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
17
- | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
18
- | `animated` | `boolean` | No | `-` | - |
19
- | `aspectRatio` | `string \| number` | No | `-` | - |
20
- | `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
21
- | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
22
- | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
23
- | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
24
- | `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 | `-` | - |
25
- | `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
26
- | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
27
- | `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
28
- | `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
29
- | `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
30
- | `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
31
- | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
32
- | `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
33
- | `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
34
- | `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
35
- | `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
36
- | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
37
- | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
38
- | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
39
- | `bottom` | `string \| number` | No | `-` | - |
40
- | `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 | `-` | - |
41
- | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
42
- | `dangerouslySetBackground` | `string` | No | `-` | - |
43
- | `display` | `flex \| none` | No | `-` | - |
44
- | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
45
- | `flexBasis` | `string \| number` | No | `-` | - |
46
- | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
47
- | `flexGrow` | `number` | No | `-` | - |
48
- | `flexShrink` | `number` | No | `-` | - |
49
- | `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
50
- | `font` | `inherit \| FontFamily` | No | `-` | - |
51
- | `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
52
- | `fontSize` | `inherit \| FontSize` | No | `-` | - |
53
- | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
54
- | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
55
- | `height` | `string \| number` | No | `-` | - |
56
- | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
57
- | `key` | `Key \| null` | No | `-` | - |
58
- | `left` | `string \| number` | No | `-` | - |
59
- | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
60
- | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
61
- | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
62
- | `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
63
- | `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
64
- | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
65
- | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
66
- | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
67
- | `maxHeight` | `string \| number` | No | `-` | - |
68
- | `maxWidth` | `string \| number` | No | `-` | - |
69
- | `minHeight` | `string \| number` | No | `-` | - |
70
- | `minWidth` | `string \| number` | No | `-` | - |
71
- | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
72
- | `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
73
- | `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
74
- | `onPointerDownCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
75
- | `onPointerEnter` | `((event: PointerEvent) => void)` | No | `-` | - |
76
- | `onPointerEnterCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
77
- | `onPointerLeave` | `((event: PointerEvent) => void)` | No | `-` | - |
78
- | `onPointerLeaveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
79
- | `onPointerMove` | `((event: PointerEvent) => void)` | No | `-` | - |
80
- | `onPointerMoveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
81
- | `onPointerUp` | `((event: PointerEvent) => void)` | No | `-` | - |
82
- | `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
83
- | `opacity` | `number \| AnimatedNode` | No | `-` | - |
84
- | `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
85
- | `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
86
- | `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
87
- | `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
88
- | `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
89
- | `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
90
- | `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
91
- | `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
92
- | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
93
- | `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
94
- | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
95
- | `right` | `string \| number` | No | `-` | - |
96
- | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
97
- | `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 | `-` | - |
98
- | `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. |
99
- | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
100
- | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
101
- | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
102
- | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
103
- | `top` | `string \| number` | No | `-` | - |
104
- | `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 | `-` | - |
105
- | `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |
106
- | `width` | `string \| number` | No | `-` | - |
107
- | `zIndex` | `number` | No | `-` | - |
108
-
109
-
110
11
  ## Examples
111
12
 
112
13
  ### Text only
@@ -363,4 +264,102 @@ function Example() {
363
264
  }
364
265
  ```
365
266
 
267
+ ## Props
268
+
269
+ | Prop | Type | Required | Default | Description |
270
+ | --- | --- | --- | --- | --- |
271
+ | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
272
+ | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
273
+ | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
274
+ | `animated` | `boolean` | No | `-` | - |
275
+ | `aspectRatio` | `string \| number` | No | `-` | - |
276
+ | `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
277
+ | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
278
+ | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
279
+ | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
280
+ | `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 | `-` | - |
281
+ | `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
282
+ | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
283
+ | `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
284
+ | `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
285
+ | `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
286
+ | `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
287
+ | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
288
+ | `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
289
+ | `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
290
+ | `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
291
+ | `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
292
+ | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
293
+ | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
294
+ | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
295
+ | `bottom` | `string \| number` | No | `-` | - |
296
+ | `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 | `-` | - |
297
+ | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
298
+ | `dangerouslySetBackground` | `string` | No | `-` | - |
299
+ | `display` | `flex \| none` | No | `-` | - |
300
+ | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
301
+ | `flexBasis` | `string \| number` | No | `-` | - |
302
+ | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
303
+ | `flexGrow` | `number` | No | `-` | - |
304
+ | `flexShrink` | `number` | No | `-` | - |
305
+ | `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
306
+ | `font` | `inherit \| FontFamily` | No | `-` | - |
307
+ | `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
308
+ | `fontSize` | `inherit \| FontSize` | No | `-` | - |
309
+ | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
310
+ | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
311
+ | `height` | `string \| number` | No | `-` | - |
312
+ | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
313
+ | `key` | `Key \| null` | No | `-` | - |
314
+ | `left` | `string \| number` | No | `-` | - |
315
+ | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
316
+ | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
317
+ | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
318
+ | `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
319
+ | `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
320
+ | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
321
+ | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
322
+ | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
323
+ | `maxHeight` | `string \| number` | No | `-` | - |
324
+ | `maxWidth` | `string \| number` | No | `-` | - |
325
+ | `minHeight` | `string \| number` | No | `-` | - |
326
+ | `minWidth` | `string \| number` | No | `-` | - |
327
+ | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
328
+ | `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
329
+ | `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
330
+ | `onPointerDownCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
331
+ | `onPointerEnter` | `((event: PointerEvent) => void)` | No | `-` | - |
332
+ | `onPointerEnterCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
333
+ | `onPointerLeave` | `((event: PointerEvent) => void)` | No | `-` | - |
334
+ | `onPointerLeaveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
335
+ | `onPointerMove` | `((event: PointerEvent) => void)` | No | `-` | - |
336
+ | `onPointerMoveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
337
+ | `onPointerUp` | `((event: PointerEvent) => void)` | No | `-` | - |
338
+ | `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
339
+ | `opacity` | `number \| AnimatedNode` | No | `-` | - |
340
+ | `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
341
+ | `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
342
+ | `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
343
+ | `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
344
+ | `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
345
+ | `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
346
+ | `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
347
+ | `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
348
+ | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
349
+ | `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
350
+ | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
351
+ | `right` | `string \| number` | No | `-` | - |
352
+ | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
353
+ | `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 | `-` | - |
354
+ | `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. |
355
+ | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
356
+ | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
357
+ | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
358
+ | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
359
+ | `top` | `string \| number` | No | `-` | - |
360
+ | `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 | `-` | - |
361
+ | `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |
362
+ | `width` | `string \| number` | No | `-` | - |
363
+ | `zIndex` | `number` | No | `-` | - |
364
+
366
365