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