@coinbase/cds-mcp-server 8.21.8 → 8.22.2
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.
- package/CHANGELOG.md +12 -0
- package/mcp-docs/mobile/components/AreaChart.txt +39 -37
- package/mcp-docs/mobile/components/Avatar.txt +18 -18
- package/mcp-docs/mobile/components/AvatarButton.txt +19 -19
- package/mcp-docs/mobile/components/Banner.txt +62 -23
- package/mcp-docs/mobile/components/BarChart.txt +37 -35
- package/mcp-docs/mobile/components/Box.txt +18 -18
- package/mcp-docs/mobile/components/BrowserBar.txt +18 -18
- package/mcp-docs/mobile/components/Button.txt +19 -19
- package/mcp-docs/mobile/components/Carousel.txt +18 -18
- package/mcp-docs/mobile/components/CartesianChart.txt +75 -44
- package/mcp-docs/mobile/components/CheckboxCell.txt +19 -19
- package/mcp-docs/mobile/components/Chip.txt +20 -20
- package/mcp-docs/mobile/components/Coachmark.txt +18 -18
- package/mcp-docs/mobile/components/ContentCard.txt +18 -18
- package/mcp-docs/mobile/components/ContentCardBody.txt +18 -18
- package/mcp-docs/mobile/components/ContentCardFooter.txt +18 -18
- package/mcp-docs/mobile/components/ContentCardHeader.txt +18 -18
- package/mcp-docs/mobile/components/ContentCell.txt +18 -18
- package/mcp-docs/mobile/components/ControlGroup.txt +18 -18
- package/mcp-docs/mobile/components/DatePicker.txt +1 -1
- package/mcp-docs/mobile/components/Divider.txt +18 -18
- package/mcp-docs/mobile/components/DotCount.txt +1 -1
- package/mcp-docs/mobile/components/DotSymbol.txt +2 -2
- package/mcp-docs/mobile/components/Fallback.txt +18 -18
- package/mcp-docs/mobile/components/HStack.txt +18 -18
- package/mcp-docs/mobile/components/Icon.txt +6 -0
- package/mcp-docs/mobile/components/IconButton.txt +19 -19
- package/mcp-docs/mobile/components/InputChip.txt +20 -20
- package/mcp-docs/mobile/components/Interactable.txt +19 -19
- package/mcp-docs/mobile/components/LineChart.txt +1608 -898
- package/mcp-docs/mobile/components/Link.txt +18 -18
- package/mcp-docs/mobile/components/ListCell.txt +37 -19
- package/mcp-docs/mobile/components/Lottie.txt +18 -18
- package/mcp-docs/mobile/components/MediaChip.txt +20 -20
- package/mcp-docs/mobile/components/MultiContentModule.txt +18 -18
- package/mcp-docs/mobile/components/NavigationTitle.txt +18 -18
- package/mcp-docs/mobile/components/NavigationTitleSelect.txt +18 -18
- package/mcp-docs/mobile/components/Numpad.txt +18 -18
- package/mcp-docs/mobile/components/Overlay.txt +18 -18
- package/mcp-docs/mobile/components/PageFooter.txt +17 -17
- package/mcp-docs/mobile/components/PageHeader.txt +17 -17
- package/mcp-docs/mobile/components/PeriodSelector.txt +26 -26
- package/mcp-docs/mobile/components/Point.txt +203 -98
- package/mcp-docs/mobile/components/Pressable.txt +19 -19
- package/mcp-docs/mobile/components/ProgressBar.txt +1 -1
- package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +1 -1
- package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +1 -1
- package/mcp-docs/mobile/components/ProgressCircle.txt +1 -1
- package/mcp-docs/mobile/components/RadioCell.txt +19 -19
- package/mcp-docs/mobile/components/ReferenceLine.txt +197 -54
- package/mcp-docs/mobile/components/RollingNumber.txt +18 -18
- package/mcp-docs/mobile/components/Scrubber.txt +597 -79
- package/mcp-docs/mobile/components/SegmentedTabs.txt +18 -18
- package/mcp-docs/mobile/components/SelectAlpha.txt +1 -1
- package/mcp-docs/mobile/components/SelectChip.txt +20 -20
- package/mcp-docs/mobile/components/SlideButton.txt +19 -19
- package/mcp-docs/mobile/components/Spacer.txt +6 -6
- package/mcp-docs/mobile/components/SparklineInteractive.txt +3 -3
- package/mcp-docs/mobile/components/Spinner.txt +1 -1
- package/mcp-docs/mobile/components/Stepper.txt +18 -18
- package/mcp-docs/mobile/components/TabLabel.txt +18 -18
- package/mcp-docs/mobile/components/TabNavigation.txt +18 -18
- package/mcp-docs/mobile/components/TabbedChips.txt +18 -18
- package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +1 -1
- package/mcp-docs/mobile/components/Tabs.txt +18 -18
- package/mcp-docs/mobile/components/Tag.txt +18 -18
- package/mcp-docs/mobile/components/Text.txt +18 -18
- package/mcp-docs/mobile/components/Toast.txt +18 -18
- package/mcp-docs/mobile/components/Tooltip.txt +17 -1
- package/mcp-docs/mobile/components/TopNavBar.txt +18 -18
- package/mcp-docs/mobile/components/VStack.txt +18 -18
- package/mcp-docs/mobile/components/XAxis.txt +86 -24
- package/mcp-docs/mobile/components/YAxis.txt +75 -17
- package/mcp-docs/mobile/routes.txt +1 -1
- package/mcp-docs/web/components/AreaChart.txt +523 -301
- package/mcp-docs/web/components/Avatar.txt +27 -27
- package/mcp-docs/web/components/AvatarButton.txt +28 -28
- package/mcp-docs/web/components/Banner.txt +71 -32
- package/mcp-docs/web/components/BarChart.txt +182 -313
- package/mcp-docs/web/components/Box.txt +28 -28
- package/mcp-docs/web/components/Button.txt +28 -28
- package/mcp-docs/web/components/Calendar.txt +27 -27
- package/mcp-docs/web/components/Carousel.txt +27 -27
- package/mcp-docs/web/components/CartesianChart.txt +62 -309
- package/mcp-docs/web/components/CheckboxCell.txt +25 -25
- package/mcp-docs/web/components/Chip.txt +27 -27
- package/mcp-docs/web/components/Coachmark.txt +27 -27
- package/mcp-docs/web/components/ContainedAssetCard.txt +27 -27
- package/mcp-docs/web/components/ContentCard.txt +28 -28
- package/mcp-docs/web/components/ContentCardBody.txt +28 -28
- package/mcp-docs/web/components/ContentCardFooter.txt +28 -28
- package/mcp-docs/web/components/ContentCardHeader.txt +28 -28
- package/mcp-docs/web/components/ContentCell.txt +28 -28
- package/mcp-docs/web/components/ControlGroup.txt +27 -27
- package/mcp-docs/web/components/Divider.txt +27 -27
- package/mcp-docs/web/components/Fallback.txt +28 -28
- package/mcp-docs/web/components/FloatingAssetCard.txt +27 -27
- package/mcp-docs/web/components/Grid.txt +28 -28
- package/mcp-docs/web/components/GridColumn.txt +27 -27
- package/mcp-docs/web/components/HStack.txt +28 -28
- package/mcp-docs/web/components/Icon.txt +27 -27
- package/mcp-docs/web/components/IconButton.txt +28 -28
- package/mcp-docs/web/components/InputChip.txt +27 -27
- package/mcp-docs/web/components/Interactable.txt +28 -28
- package/mcp-docs/web/components/LineChart.txt +1598 -1116
- package/mcp-docs/web/components/Link.txt +28 -28
- package/mcp-docs/web/components/ListCell.txt +48 -30
- package/mcp-docs/web/components/Lottie.txt +27 -27
- package/mcp-docs/web/components/MediaChip.txt +27 -27
- package/mcp-docs/web/components/Modal.txt +27 -27
- package/mcp-docs/web/components/ModalBody.txt +27 -27
- package/mcp-docs/web/components/ModalFooter.txt +27 -27
- package/mcp-docs/web/components/ModalHeader.txt +27 -27
- package/mcp-docs/web/components/MultiContentModule.txt +28 -28
- package/mcp-docs/web/components/NavigationBar.txt +5 -5
- package/mcp-docs/web/components/NudgeCard.txt +27 -27
- package/mcp-docs/web/components/Overlay.txt +27 -27
- package/mcp-docs/web/components/PageFooter.txt +26 -26
- package/mcp-docs/web/components/PageHeader.txt +26 -26
- package/mcp-docs/web/components/Pagination.txt +27 -27
- package/mcp-docs/web/components/PeriodSelector.txt +49 -49
- package/mcp-docs/web/components/Point.txt +228 -79
- package/mcp-docs/web/components/Pressable.txt +28 -28
- package/mcp-docs/web/components/RadioCell.txt +25 -25
- package/mcp-docs/web/components/ReferenceLine.txt +208 -60
- package/mcp-docs/web/components/RemoteImage.txt +26 -26
- package/mcp-docs/web/components/RollingNumber.txt +28 -28
- package/mcp-docs/web/components/Scrubber.txt +463 -68
- package/mcp-docs/web/components/SectionHeader.txt +27 -27
- package/mcp-docs/web/components/SegmentedTabs.txt +27 -27
- package/mcp-docs/web/components/SelectChip.txt +27 -27
- package/mcp-docs/web/components/SelectOption.txt +27 -27
- package/mcp-docs/web/components/Sidebar.txt +27 -27
- package/mcp-docs/web/components/SidebarItem.txt +27 -27
- package/mcp-docs/web/components/Spacer.txt +34 -34
- package/mcp-docs/web/components/SparklineInteractive.txt +1 -1
- package/mcp-docs/web/components/Spinner.txt +27 -27
- package/mcp-docs/web/components/Stepper.txt +27 -27
- package/mcp-docs/web/components/TabLabel.txt +27 -27
- package/mcp-docs/web/components/TabNavigation.txt +26 -26
- package/mcp-docs/web/components/TabbedChips.txt +26 -26
- package/mcp-docs/web/components/TabbedChipsAlpha.txt +1 -1
- package/mcp-docs/web/components/Tabs.txt +27 -27
- package/mcp-docs/web/components/Tag.txt +27 -27
- package/mcp-docs/web/components/Text.txt +28 -28
- package/mcp-docs/web/components/TileButton.txt +28 -28
- package/mcp-docs/web/components/Toast.txt +27 -27
- package/mcp-docs/web/components/Tooltip.txt +17 -1
- package/mcp-docs/web/components/VStack.txt +28 -28
- package/mcp-docs/web/components/XAxis.txt +86 -22
- package/mcp-docs/web/components/YAxis.txt +133 -89
- package/package.json +1 -1
|
@@ -203,7 +203,7 @@ function MultipleLinksA11yExample() {
|
|
|
203
203
|
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
204
204
|
| `bottom` | `string \| number` | No | `-` | - |
|
|
205
205
|
| `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 | `-` | - |
|
|
206
|
-
| `columnGap` | `0 \| 1 \| 2 \|
|
|
206
|
+
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
207
207
|
| `dangerouslySetBackground` | `string \| OpaqueColorValue` | No | `-` | - |
|
|
208
208
|
| `dangerouslySetColor` | `string \| OpaqueColorValue` | No | `-` | - |
|
|
209
209
|
| `dataDetectorType` | `link \| none \| all \| email \| phoneNumber \| null` | No | `-` | Determines the types of data converted to clickable URLs in the text element. By default no data types are detected. |
|
|
@@ -223,7 +223,7 @@ function MultipleLinksA11yExample() {
|
|
|
223
223
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
224
224
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
225
225
|
| `forceOpenOutsideApp` | `boolean` | No | `false` | Toggles whether the link should be opened outside or within app |
|
|
226
|
-
| `gap` | `0 \| 1 \| 2 \|
|
|
226
|
+
| `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
227
227
|
| `height` | `string \| number` | No | `-` | - |
|
|
228
228
|
| `id` | `string` | No | `-` | Used to reference react managed views from native code. |
|
|
229
229
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
@@ -231,13 +231,13 @@ function MultipleLinksA11yExample() {
|
|
|
231
231
|
| `lineBreakMode` | `middle \| head \| tail \| clip` | No | `-` | Line Break mode. Works only with numberOfLines. clip is working only for iOS |
|
|
232
232
|
| `lineBreakStrategyIOS` | `none \| standard \| hangul-word \| push-out` | No | `-` | Set line break strategy on iOS. |
|
|
233
233
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
234
|
-
| `margin` | `0 \| -1 \| -2 \| -
|
|
235
|
-
| `marginBottom` | `0 \| -1 \| -2 \| -
|
|
236
|
-
| `marginEnd` | `0 \| -1 \| -2 \| -
|
|
237
|
-
| `marginStart` | `0 \| -1 \| -2 \| -
|
|
238
|
-
| `marginTop` | `0 \| -1 \| -2 \| -
|
|
239
|
-
| `marginX` | `0 \| -1 \| -2 \| -
|
|
240
|
-
| `marginY` | `0 \| -1 \| -2 \| -
|
|
234
|
+
| `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
235
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
236
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
237
|
+
| `marginStart` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
238
|
+
| `marginTop` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
239
|
+
| `marginX` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
240
|
+
| `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
241
241
|
| `maxFontSizeMultiplier` | `number \| null` | No | `-` | Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values: - null/undefined (default): inherit from the parent node or the global default (0) - 0: no max, ignore parent/global default - >= 1: sets the maxFontSizeMultiplier of this node to this value |
|
|
242
242
|
| `maxHeight` | `string \| number` | No | `-` | - |
|
|
243
243
|
| `maxWidth` | `string \| number` | No | `-` | - |
|
|
@@ -256,19 +256,19 @@ function MultipleLinksA11yExample() {
|
|
|
256
256
|
| `onTextLayout` | `((event: NativeSyntheticEvent<TextLayoutEventData>) => void)` | No | `-` | Invoked on Text layout |
|
|
257
257
|
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
258
258
|
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
259
|
-
| `padding` | `0 \| 1 \| 2 \|
|
|
260
|
-
| `paddingBottom` | `0 \| 1 \| 2 \|
|
|
261
|
-
| `paddingEnd` | `0 \| 1 \| 2 \|
|
|
262
|
-
| `paddingStart` | `0 \| 1 \| 2 \|
|
|
263
|
-
| `paddingTop` | `0 \| 1 \| 2 \|
|
|
264
|
-
| `paddingX` | `0 \| 1 \| 2 \|
|
|
265
|
-
| `paddingY` | `0 \| 1 \| 2 \|
|
|
266
|
-
| `position` | `
|
|
259
|
+
| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
260
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
261
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
262
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
263
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
264
|
+
| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
265
|
+
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
266
|
+
| `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
|
|
267
267
|
| `preventRedirectionIntoApp` | `boolean` | No | `false` | Toggles whether we allow users to go back to app when they are in an external browser |
|
|
268
268
|
| `readerMode` | `boolean` | No | `false` | Toggles readerMode flag for web browser. Note: readerMode is only available on ios |
|
|
269
269
|
| `renderEmptyNode` | `boolean` | No | `-` | - |
|
|
270
270
|
| `right` | `string \| number` | No | `-` | - |
|
|
271
|
-
| `rowGap` | `0 \| 1 \| 2 \|
|
|
271
|
+
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
272
272
|
| `selectable` | `boolean` | No | `-` | Lets the user select text, to use the native copy and paste functionality. |
|
|
273
273
|
| `selectionColor` | `string \| OpaqueColorValue` | No | `-` | The highlight color of the text. |
|
|
274
274
|
| `style` | `false \| Value \| AnimatedInterpolation<string \| number> \| RegisteredStyle<TextStyle> \| WithAnimatedObject<TextStyle> \| WithAnimatedArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle> \| RecursiveArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle>> \| readonly (Falsy \| TextStyle \| RegisteredStyle<TextStyle>)[]> \| null` | No | `-` | - |
|
|
@@ -107,6 +107,7 @@ We have deprecated `CellMedia`; pass media directly as shown below.
|
|
|
107
107
|
- In condensed spacing (`spacingVariant="condensed"`), the title shows up to two lines by default, regardless of whether a description is present.
|
|
108
108
|
- In normal and compact spacing, the title shows up to two lines when there is no description; if a description is present, the title is limited to one line.
|
|
109
109
|
- Use `disableMultilineTitle` to force the title to one line in all cases.
|
|
110
|
+
- When provided, the subtitle renders between the title and description and always truncates to a single line. Use `subtitleNode` if you need custom layout or multi-line behavior.
|
|
110
111
|
|
|
111
112
|
::::warning
|
|
112
113
|
The `title` and `description` props are rendered inside a CDS `Text` with default fonts and truncation. To render arbitrary React nodes without being wrapped by a `<Text>`, use `titleNode` and `descriptionNode`.
|
|
@@ -134,6 +135,21 @@ When using the Node props, you are responsible for styling, layout, and truncati
|
|
|
134
135
|
/>
|
|
135
136
|
```
|
|
136
137
|
|
|
138
|
+
#### Subtitle
|
|
139
|
+
|
|
140
|
+
Use `subtitle` to add one line of supplementary context between the title and description. The subtitle always truncates to a single line; provide a `subtitleNode` when you need your own truncation or layout logic.
|
|
141
|
+
|
|
142
|
+
```tsx
|
|
143
|
+
<ListCell
|
|
144
|
+
spacingVariant="condensed"
|
|
145
|
+
media={<Avatar src={assets.btc.imageUrl} size="l" />}
|
|
146
|
+
title="Bitcoin"
|
|
147
|
+
subtitle="Deposit available in 1-2 days"
|
|
148
|
+
description="Ending in ••42"
|
|
149
|
+
detail="$12,345.00"
|
|
150
|
+
/>
|
|
151
|
+
```
|
|
152
|
+
|
|
137
153
|
#### Multiline Description
|
|
138
154
|
|
|
139
155
|
```tsx
|
|
@@ -587,7 +603,7 @@ Mapping to `styles` / `classNames` keys:
|
|
|
587
603
|
| `bottom` | `string \| number` | No | `-` | - |
|
|
588
604
|
| `bottomContent` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | The content to display below the main cell content. |
|
|
589
605
|
| `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 | `-` | - |
|
|
590
|
-
| `columnGap` | `0 \| 1 \| 2 \|
|
|
606
|
+
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
591
607
|
| `compact` | `boolean` | No | `-` | - |
|
|
592
608
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
593
609
|
| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Description of content. Max 1 line (with title) or 2 lines (without), otherwise will truncate. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use descriptionNode. |
|
|
@@ -610,7 +626,7 @@ Mapping to `styles` / `classNames` keys:
|
|
|
610
626
|
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
|
|
611
627
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
612
628
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
613
|
-
| `gap` | `0 \| 1 \| 2 \|
|
|
629
|
+
| `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
614
630
|
| `height` | `string \| number` | No | `-` | - |
|
|
615
631
|
| `helperText` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Assistive message to display below the cell content. |
|
|
616
632
|
| `innerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the inner content of Cell |
|
|
@@ -618,13 +634,13 @@ Mapping to `styles` / `classNames` keys:
|
|
|
618
634
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
619
635
|
| `left` | `string \| number` | No | `-` | - |
|
|
620
636
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
621
|
-
| `margin` | `0 \| -1 \| -2 \| -
|
|
622
|
-
| `marginBottom` | `0 \| -1 \| -2 \| -
|
|
623
|
-
| `marginEnd` | `0 \| -1 \| -2 \| -
|
|
624
|
-
| `marginStart` | `0 \| -1 \| -2 \| -
|
|
625
|
-
| `marginTop` | `0 \| -1 \| -2 \| -
|
|
626
|
-
| `marginX` | `0 \| -1 \| -2 \| -
|
|
627
|
-
| `marginY` | `0 \| -1 \| -2 \| -
|
|
637
|
+
| `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
638
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
639
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
640
|
+
| `marginStart` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
641
|
+
| `marginTop` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
642
|
+
| `marginX` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
643
|
+
| `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
628
644
|
| `maxHeight` | `string \| number` | No | `-` | - |
|
|
629
645
|
| `maxWidth` | `string \| number` | No | `-` | - |
|
|
630
646
|
| `media` | `ReactElement` | No | `-` | Media rendered at the start of the cell (icon, avatar, image, etc). |
|
|
@@ -648,25 +664,27 @@ Mapping to `styles` / `classNames` keys:
|
|
|
648
664
|
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
649
665
|
| `outerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the parent wrapper of Cell |
|
|
650
666
|
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
651
|
-
| `padding` | `0 \| 1 \| 2 \|
|
|
652
|
-
| `paddingBottom` | `0 \| 1 \| 2 \|
|
|
653
|
-
| `paddingEnd` | `0 \| 1 \| 2 \|
|
|
654
|
-
| `paddingStart` | `0 \| 1 \| 2 \|
|
|
655
|
-
| `paddingTop` | `0 \| 1 \| 2 \|
|
|
656
|
-
| `paddingX` | `0 \| 1 \| 2 \|
|
|
657
|
-
| `paddingY` | `0 \| 1 \| 2 \|
|
|
667
|
+
| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
668
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
669
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
670
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
671
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
672
|
+
| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
673
|
+
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
658
674
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
659
|
-
| `position` | `
|
|
675
|
+
| `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
|
|
660
676
|
| `priority` | `end \| start \| middle \| (end \| start \| middle)[]` | No | `-` | Which piece of content has the highest priority in regards to text truncation, growing, and shrinking. |
|
|
661
677
|
| `right` | `string \| number` | No | `-` | - |
|
|
662
|
-
| `rowGap` | `0 \| 1 \| 2 \|
|
|
678
|
+
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
663
679
|
| `selected` | `boolean` | No | `-` | Is the cell selected? Will apply a background and selected accessory. |
|
|
664
680
|
| `spacingVariant` | `compact \| normal \| condensed` | No | `'normal'` | Spacing variant configuration. Deprecated value: compact. Prefer condensed. When spacingVariant=normal: 1. min-height is 80px 2. padding is var(--space-2) var(--space-3) 3. border-radius is var(--borderRadius-200) 4. when there is a description, titles numberOfLines={1} otherwise titles numberOfLines={2} 5. description and subdetail have font body When spacingVariant=compact: 1. same as spacingVariant=normal, except min-height is 40px When spacingVariant=condensed: 1. min-height is undefined 2. padding is var(--space-1) var(--space-2) 3. border-radius is --borderRadius-0 4. titles numberOfLines={2} 5. description and subdetail have font label2 |
|
|
665
681
|
| `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 | `-` | - |
|
|
666
|
-
| `styles` | `({ root?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; topContent?: StyleProp<ViewStyle>; bottomContent?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; } & { root?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; mainContent?: StyleProp<ViewStyle>; helperText?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; description?: StyleProp<TextStyle>; })` | No | `-` | Styles for the components |
|
|
682
|
+
| `styles` | `({ root?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; topContent?: StyleProp<ViewStyle>; bottomContent?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; } & { root?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; mainContent?: StyleProp<ViewStyle>; helperText?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; subtitle?: StyleProp<TextStyle>; description?: StyleProp<TextStyle>; })` | No | `-` | Styles for the components |
|
|
667
683
|
| `subdetail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Subdetail providing more information. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use subdetailNode. |
|
|
668
684
|
| `subdetailFont` | `inherit \| FontFamily` | No | `-` | Font to apply to the subdetail text. |
|
|
669
685
|
| `subdetailNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render subdetail. Takes precedence over subdetail. |
|
|
686
|
+
| `subtitle` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Subtitle to display below the title and above the description. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use subtitleNode. |
|
|
687
|
+
| `subtitleNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render subtitle. Takes precedence over subtitle. |
|
|
670
688
|
| `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 element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
|
|
671
689
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
672
690
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
@@ -78,7 +78,7 @@ function BasicExample() {
|
|
|
78
78
|
| `bottom` | `string \| number` | No | `-` | - |
|
|
79
79
|
| `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 | `-` | - |
|
|
80
80
|
| `colorFilters` | `{ keypath: string; color: string; }[]` | No | `-` | An array of layers you want to override its color filter. |
|
|
81
|
-
| `columnGap` | `0 \| 1 \| 2 \|
|
|
81
|
+
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
82
82
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
83
83
|
| `display` | `flex \| none` | No | `-` | - |
|
|
84
84
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
|
|
@@ -89,19 +89,19 @@ function BasicExample() {
|
|
|
89
89
|
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
|
|
90
90
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
91
91
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
92
|
-
| `gap` | `0 \| 1 \| 2 \|
|
|
92
|
+
| `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
93
93
|
| `height` | `string \| number` | No | `-` | - |
|
|
94
94
|
| `key` | `Key \| null` | No | `-` | - |
|
|
95
95
|
| `left` | `string \| number` | No | `-` | - |
|
|
96
96
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
97
97
|
| `loop` | `boolean` | No | `false` | A boolean flag indicating whether or not the animation should loop. |
|
|
98
|
-
| `margin` | `0 \| -1 \| -2 \| -
|
|
99
|
-
| `marginBottom` | `0 \| -1 \| -2 \| -
|
|
100
|
-
| `marginEnd` | `0 \| -1 \| -2 \| -
|
|
101
|
-
| `marginStart` | `0 \| -1 \| -2 \| -
|
|
102
|
-
| `marginTop` | `0 \| -1 \| -2 \| -
|
|
103
|
-
| `marginX` | `0 \| -1 \| -2 \| -
|
|
104
|
-
| `marginY` | `0 \| -1 \| -2 \| -
|
|
98
|
+
| `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
99
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
100
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
101
|
+
| `marginStart` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
102
|
+
| `marginTop` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
103
|
+
| `marginX` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
104
|
+
| `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
105
105
|
| `maxHeight` | `string \| number` | No | `-` | - |
|
|
106
106
|
| `maxWidth` | `string \| number` | No | `-` | - |
|
|
107
107
|
| `minHeight` | `string \| number` | No | `-` | - |
|
|
@@ -109,20 +109,20 @@ function BasicExample() {
|
|
|
109
109
|
| `onAnimationFinish` | `(() => void)` | No | `-` | A callback function which will be called when animation is finished. Note that on mobile, this callback will be called only when loop is set to false. |
|
|
110
110
|
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
111
111
|
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
112
|
-
| `padding` | `0 \| 1 \| 2 \|
|
|
113
|
-
| `paddingBottom` | `0 \| 1 \| 2 \|
|
|
114
|
-
| `paddingEnd` | `0 \| 1 \| 2 \|
|
|
115
|
-
| `paddingStart` | `0 \| 1 \| 2 \|
|
|
116
|
-
| `paddingTop` | `0 \| 1 \| 2 \|
|
|
117
|
-
| `paddingX` | `0 \| 1 \| 2 \|
|
|
118
|
-
| `paddingY` | `0 \| 1 \| 2 \|
|
|
112
|
+
| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
113
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
114
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
115
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
116
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
117
|
+
| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
118
|
+
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
119
119
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
120
|
-
| `position` | `
|
|
120
|
+
| `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
|
|
121
121
|
| `progress` | `number \| Value \| AnimatedInterpolation<number>` | No | `-` | A number between 0 and 1, or an Animated number between 0 and 1. This number represents the normalized progress of the animation. If you update this prop, the animation will correspondingly update to the frame at that progress value. This prop is not required if you are using the imperative API. |
|
|
122
122
|
| `ref` | `((instance: LottieView \| null) => void) \| RefObject<LottieView> \| null` | No | `-` | - |
|
|
123
123
|
| `resizeMode` | `center \| cover \| contain` | No | `contain` | Determines how to resize the animated view when the frame doesnt match the raw image dimensions. Refer to React Native docs [here](https://facebook.github.io/react-native/docs/image.html#resizemode) |
|
|
124
124
|
| `right` | `string \| number` | No | `-` | - |
|
|
125
|
-
| `rowGap` | `0 \| 1 \| 2 \|
|
|
125
|
+
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
126
126
|
| `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 | `-` | - |
|
|
127
127
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. |
|
|
128
128
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
@@ -182,9 +182,9 @@ You can override the automatic spacing with custom values if needed.
|
|
|
182
182
|
| `bottom` | `string \| number` | No | `-` | - |
|
|
183
183
|
| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed in the center of the Chip |
|
|
184
184
|
| `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 | `-` | - |
|
|
185
|
-
| `columnGap` | `0 \| 1 \| 2 \|
|
|
185
|
+
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
186
186
|
| `compact` | `boolean` | No | `-` | Reduces spacing around Chip content |
|
|
187
|
-
| `contentStyle` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<
|
|
187
|
+
| `contentStyle` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | Apply animated styles to the inner container. |
|
|
188
188
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
189
189
|
| `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. |
|
|
190
190
|
| `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. |
|
|
@@ -202,7 +202,7 @@ You can override the automatic spacing with custom values if needed.
|
|
|
202
202
|
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
|
|
203
203
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
204
204
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
205
|
-
| `gap` | `0 \| 1 \| 2 \|
|
|
205
|
+
| `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
206
206
|
| `height` | `string \| number` | No | `-` | - |
|
|
207
207
|
| `invertColorScheme` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
|
|
208
208
|
| `inverted` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
|
|
@@ -211,13 +211,13 @@ You can override the automatic spacing with custom values if needed.
|
|
|
211
211
|
| `left` | `string \| number` | No | `-` | - |
|
|
212
212
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
213
213
|
| `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. |
|
|
214
|
-
| `margin` | `0 \| -1 \| -2 \| -
|
|
215
|
-
| `marginBottom` | `0 \| -1 \| -2 \| -
|
|
216
|
-
| `marginEnd` | `0 \| -1 \| -2 \| -
|
|
217
|
-
| `marginStart` | `0 \| -1 \| -2 \| -
|
|
218
|
-
| `marginTop` | `0 \| -1 \| -2 \| -
|
|
219
|
-
| `marginX` | `0 \| -1 \| -2 \| -
|
|
220
|
-
| `marginY` | `0 \| -1 \| -2 \| -
|
|
214
|
+
| `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
215
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
216
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
217
|
+
| `marginStart` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
218
|
+
| `marginTop` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
219
|
+
| `marginX` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
220
|
+
| `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
221
221
|
| `maxHeight` | `string \| number` | No | `-` | - |
|
|
222
222
|
| `maxWidth` | `string \| number` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
|
|
223
223
|
| `minHeight` | `string \| number` | No | `-` | - |
|
|
@@ -241,20 +241,20 @@ You can override the automatic spacing with custom values if needed.
|
|
|
241
241
|
| `onPressOut` | `(((event: GestureResponderEvent) => void) & ((event: GestureResponderEvent) => void))` | No | `-` | Callback fired before onPress when button is released. Called when a touch is released before onPress. |
|
|
242
242
|
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
243
243
|
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
244
|
-
| `padding` | `0 \| 1 \| 2 \|
|
|
245
|
-
| `paddingBottom` | `0 \| 1 \| 2 \|
|
|
246
|
-
| `paddingEnd` | `0 \| 1 \| 2 \|
|
|
247
|
-
| `paddingStart` | `0 \| 1 \| 2 \|
|
|
248
|
-
| `paddingTop` | `0 \| 1 \| 2 \|
|
|
249
|
-
| `paddingX` | `0 \| 1 \| 2 \|
|
|
250
|
-
| `paddingY` | `0 \| 1 \| 2 \|
|
|
244
|
+
| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
245
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
246
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
247
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
248
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
249
|
+
| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
250
|
+
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
251
251
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
252
|
-
| `position` | `
|
|
252
|
+
| `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
|
|
253
253
|
| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
|
|
254
254
|
| `right` | `string \| number` | No | `-` | - |
|
|
255
|
-
| `rowGap` | `0 \| 1 \| 2 \|
|
|
255
|
+
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
256
256
|
| `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed before the value |
|
|
257
|
-
| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<
|
|
257
|
+
| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
|
|
258
258
|
| `styles` | `{ root?: StyleProp<ViewStyle>; content?: StyleProp<ViewStyle>; }` | No | `-` | Apply styles to the container and content. |
|
|
259
259
|
| `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 element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
|
|
260
260
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
@@ -304,7 +304,7 @@ function Example() {
|
|
|
304
304
|
| `bottom` | `string \| number` | No | `-` | - |
|
|
305
305
|
| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode to be displayed at the middle of the module |
|
|
306
306
|
| `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 | `-` | - |
|
|
307
|
-
| `columnGap` | `0 \| 1 \| 2 \|
|
|
307
|
+
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
308
308
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
309
309
|
| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode or Text to be displayed in TextBody to provide details about the module |
|
|
310
310
|
| `display` | `flex \| none` | No | `-` | - |
|
|
@@ -319,19 +319,19 @@ function Example() {
|
|
|
319
319
|
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
|
|
320
320
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
321
321
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
322
|
-
| `gap` | `0 \| 1 \| 2 \|
|
|
322
|
+
| `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
323
323
|
| `height` | `string \| number` | No | `-` | - |
|
|
324
324
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
325
325
|
| `key` | `Key \| null` | No | `-` | - |
|
|
326
326
|
| `left` | `string \| number` | No | `-` | - |
|
|
327
327
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
328
|
-
| `margin` | `0 \| -1 \| -2 \| -
|
|
329
|
-
| `marginBottom` | `0 \| -1 \| -2 \| -
|
|
330
|
-
| `marginEnd` | `0 \| -1 \| -2 \| -
|
|
331
|
-
| `marginStart` | `0 \| -1 \| -2 \| -
|
|
332
|
-
| `marginTop` | `0 \| -1 \| -2 \| -
|
|
333
|
-
| `marginX` | `0 \| -1 \| -2 \| -
|
|
334
|
-
| `marginY` | `0 \| -1 \| -2 \| -
|
|
328
|
+
| `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
329
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
330
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
331
|
+
| `marginStart` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
332
|
+
| `marginTop` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
333
|
+
| `marginX` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
334
|
+
| `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
335
335
|
| `maxHeight` | `string \| number` | No | `-` | - |
|
|
336
336
|
| `maxWidth` | `string \| number` | No | `-` | - |
|
|
337
337
|
| `minHeight` | `string \| number` | No | `-` | - |
|
|
@@ -351,19 +351,19 @@ function Example() {
|
|
|
351
351
|
| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
352
352
|
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
353
353
|
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
354
|
-
| `padding` | `0 \| 1 \| 2 \|
|
|
355
|
-
| `paddingBottom` | `0 \| 1 \| 2 \|
|
|
356
|
-
| `paddingEnd` | `0 \| 1 \| 2 \|
|
|
357
|
-
| `paddingStart` | `0 \| 1 \| 2 \|
|
|
358
|
-
| `paddingTop` | `0 \| 1 \| 2 \|
|
|
359
|
-
| `paddingX` | `0 \| 1 \| 2 \|
|
|
360
|
-
| `paddingY` | `0 \| 1 \| 2 \|
|
|
354
|
+
| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
355
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
356
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
357
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
358
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
359
|
+
| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
360
|
+
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
361
361
|
| `pictogram` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null` | No | `-` | Illustration pictogram name or ReacNode to be displayed at the start of an module |
|
|
362
362
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
363
|
-
| `position` | `
|
|
363
|
+
| `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
|
|
364
364
|
| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
|
|
365
365
|
| `right` | `string \| number` | No | `-` | - |
|
|
366
|
-
| `rowGap` | `0 \| 1 \| 2 \|
|
|
366
|
+
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
367
367
|
| `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 | `-` | - |
|
|
368
368
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
|
|
369
369
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
@@ -47,7 +47,7 @@ The `NavigationTitle` should be used inside a `TopNavBar` or `BrowserBar` to pro
|
|
|
47
47
|
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
48
48
|
| `bottom` | `string \| number` | No | `-` | - |
|
|
49
49
|
| `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 | `-` | - |
|
|
50
|
-
| `columnGap` | `0 \| 1 \| 2 \|
|
|
50
|
+
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
51
51
|
| `dangerouslySetBackground` | `string \| OpaqueColorValue` | No | `-` | - |
|
|
52
52
|
| `dangerouslySetColor` | `string \| OpaqueColorValue` | No | `-` | - |
|
|
53
53
|
| `dataDetectorType` | `link \| none \| all \| email \| phoneNumber \| null` | No | `-` | Determines the types of data converted to clickable URLs in the text element. By default no data types are detected. |
|
|
@@ -66,7 +66,7 @@ The `NavigationTitle` should be used inside a `TopNavBar` or `BrowserBar` to pro
|
|
|
66
66
|
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
|
|
67
67
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
68
68
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
69
|
-
| `gap` | `0 \| 1 \| 2 \|
|
|
69
|
+
| `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
70
70
|
| `height` | `string \| number` | No | `-` | - |
|
|
71
71
|
| `id` | `string` | No | `-` | Used to reference react managed views from native code. |
|
|
72
72
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
@@ -74,13 +74,13 @@ The `NavigationTitle` should be used inside a `TopNavBar` or `BrowserBar` to pro
|
|
|
74
74
|
| `lineBreakMode` | `middle \| head \| tail \| clip` | No | `-` | Line Break mode. Works only with numberOfLines. clip is working only for iOS |
|
|
75
75
|
| `lineBreakStrategyIOS` | `none \| standard \| hangul-word \| push-out` | No | `-` | Set line break strategy on iOS. |
|
|
76
76
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
77
|
-
| `margin` | `0 \| -1 \| -2 \| -
|
|
78
|
-
| `marginBottom` | `0 \| -1 \| -2 \| -
|
|
79
|
-
| `marginEnd` | `0 \| -1 \| -2 \| -
|
|
80
|
-
| `marginStart` | `0 \| -1 \| -2 \| -
|
|
81
|
-
| `marginTop` | `0 \| -1 \| -2 \| -
|
|
82
|
-
| `marginX` | `0 \| -1 \| -2 \| -
|
|
83
|
-
| `marginY` | `0 \| -1 \| -2 \| -
|
|
77
|
+
| `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
78
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
79
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
80
|
+
| `marginStart` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
81
|
+
| `marginTop` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
82
|
+
| `marginX` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
83
|
+
| `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
84
84
|
| `maxFontSizeMultiplier` | `number \| null` | No | `-` | Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values: - null/undefined (default): inherit from the parent node or the global default (0) - 0: no max, ignore parent/global default - >= 1: sets the maxFontSizeMultiplier of this node to this value |
|
|
85
85
|
| `maxHeight` | `string \| number` | No | `-` | - |
|
|
86
86
|
| `maxWidth` | `string \| number` | No | `-` | - |
|
|
@@ -99,17 +99,17 @@ The `NavigationTitle` should be used inside a `TopNavBar` or `BrowserBar` to pro
|
|
|
99
99
|
| `onTextLayout` | `((event: NativeSyntheticEvent<TextLayoutEventData>) => void)` | No | `-` | Invoked on Text layout |
|
|
100
100
|
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
101
101
|
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
102
|
-
| `padding` | `0 \| 1 \| 2 \|
|
|
103
|
-
| `paddingBottom` | `0 \| 1 \| 2 \|
|
|
104
|
-
| `paddingEnd` | `0 \| 1 \| 2 \|
|
|
105
|
-
| `paddingStart` | `0 \| 1 \| 2 \|
|
|
106
|
-
| `paddingTop` | `0 \| 1 \| 2 \|
|
|
107
|
-
| `paddingX` | `0 \| 1 \| 2 \|
|
|
108
|
-
| `paddingY` | `0 \| 1 \| 2 \|
|
|
109
|
-
| `position` | `
|
|
102
|
+
| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
103
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
104
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
105
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
106
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
107
|
+
| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
108
|
+
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
109
|
+
| `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
|
|
110
110
|
| `renderEmptyNode` | `boolean` | No | `-` | - |
|
|
111
111
|
| `right` | `string \| number` | No | `-` | - |
|
|
112
|
-
| `rowGap` | `0 \| 1 \| 2 \|
|
|
112
|
+
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
113
113
|
| `selectable` | `boolean` | No | `-` | Lets the user select text, to use the native copy and paste functionality. |
|
|
114
114
|
| `selectionColor` | `string \| OpaqueColorValue` | No | `-` | The highlight color of the text. |
|
|
115
115
|
| `style` | `false \| Value \| AnimatedInterpolation<string \| number> \| RegisteredStyle<TextStyle> \| WithAnimatedObject<TextStyle> \| WithAnimatedArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle> \| RecursiveArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle>> \| readonly (Falsy \| TextStyle \| RegisteredStyle<TextStyle>)[]> \| null` | No | `-` | - |
|