@coinbase/cds-mcp-server 8.66.2 → 9.0.0-rc.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 +8 -0
- package/mcp-docs/mobile/components/AccordionItem.txt +4 -4
- package/mcp-docs/mobile/components/Alert.txt +2 -1
- package/mcp-docs/mobile/components/AreaChart.txt +40 -40
- package/mcp-docs/mobile/components/Avatar.txt +33 -33
- package/mcp-docs/mobile/components/AvatarButton.txt +35 -35
- package/mcp-docs/mobile/components/Banner.txt +55 -40
- package/mcp-docs/mobile/components/BarChart.txt +40 -40
- package/mcp-docs/mobile/components/Box.txt +34 -34
- package/mcp-docs/mobile/components/BrowserBar.txt +35 -35
- package/mcp-docs/mobile/components/Button.txt +52 -42
- package/mcp-docs/mobile/components/Calendar.txt +34 -34
- package/mcp-docs/mobile/components/Carousel.txt +48 -58
- package/mcp-docs/mobile/components/CartesianChart.txt +40 -40
- package/mcp-docs/mobile/components/CellMedia.txt +1 -1
- package/mcp-docs/mobile/components/Checkbox.txt +3 -3
- package/mcp-docs/mobile/components/CheckboxCell.txt +37 -37
- package/mcp-docs/mobile/components/CheckboxGroup.txt +4 -4
- package/mcp-docs/mobile/components/Chip.txt +39 -39
- package/mcp-docs/mobile/components/Coachmark.txt +39 -39
- package/mcp-docs/mobile/components/Collapsible.txt +2 -2
- package/mcp-docs/mobile/components/Combobox.txt +10 -10
- package/mcp-docs/mobile/components/ContainedAssetCard.txt +7 -7
- package/mcp-docs/mobile/components/ContentCard.txt +37 -37
- package/mcp-docs/mobile/components/ContentCardBody.txt +42 -42
- package/mcp-docs/mobile/components/ContentCardFooter.txt +34 -34
- package/mcp-docs/mobile/components/ContentCardHeader.txt +41 -41
- package/mcp-docs/mobile/components/ContentCell.txt +49 -49
- package/mcp-docs/mobile/components/ControlGroup.txt +36 -36
- package/mcp-docs/mobile/components/DataCard.txt +47 -47
- package/mcp-docs/mobile/components/DateInput.txt +25 -22
- package/mcp-docs/mobile/components/DatePicker.txt +25 -22
- package/mcp-docs/mobile/components/Divider.txt +33 -33
- package/mcp-docs/mobile/components/DotCount.txt +4 -2
- package/mcp-docs/mobile/components/DotStatusColor.txt +1 -1
- package/mcp-docs/mobile/components/DotSymbol.txt +6 -6
- package/mcp-docs/mobile/components/Fallback.txt +32 -32
- package/mcp-docs/mobile/components/FloatingAssetCard.txt +4 -4
- package/mcp-docs/mobile/components/HStack.txt +34 -34
- package/mcp-docs/mobile/components/HeroSquare.txt +1 -1
- package/mcp-docs/mobile/components/Icon.txt +3 -3
- package/mcp-docs/mobile/components/IconButton.txt +38 -58
- package/mcp-docs/mobile/components/InputChip.txt +39 -39
- package/mcp-docs/mobile/components/Interactable.txt +34 -34
- package/mcp-docs/mobile/components/Legend.txt +43 -41
- package/mcp-docs/mobile/components/LineChart.txt +40 -40
- package/mcp-docs/mobile/components/Link.txt +41 -38
- package/mcp-docs/mobile/components/ListCell.txt +52 -52
- package/mcp-docs/mobile/components/Lottie.txt +34 -34
- package/mcp-docs/mobile/components/LottieStatusAnimation.txt +2 -2
- package/mcp-docs/mobile/components/MediaCard.txt +41 -41
- package/mcp-docs/mobile/components/MediaChip.txt +39 -39
- package/mcp-docs/mobile/components/MessagingCard.txt +42 -42
- package/mcp-docs/mobile/components/Modal.txt +6 -2
- package/mcp-docs/mobile/components/ModalBody.txt +8 -8
- package/mcp-docs/mobile/components/ModalFooter.txt +33 -33
- package/mcp-docs/mobile/components/ModalHeader.txt +34 -34
- package/mcp-docs/mobile/components/MultiContentModule.txt +40 -40
- package/mcp-docs/mobile/components/NavigationTitle.txt +38 -36
- package/mcp-docs/mobile/components/NavigationTitleSelect.txt +38 -36
- package/mcp-docs/mobile/components/NudgeCard.txt +6 -6
- package/mcp-docs/mobile/components/Numpad.txt +37 -37
- package/mcp-docs/mobile/components/Overlay.txt +33 -33
- package/mcp-docs/mobile/components/PageFooter.txt +36 -30
- package/mcp-docs/mobile/components/PageHeader.txt +38 -32
- package/mcp-docs/mobile/components/PercentageBarChart.txt +40 -40
- package/mcp-docs/mobile/components/PeriodSelector.txt +39 -39
- package/mcp-docs/mobile/components/Pictogram.txt +1 -1
- package/mcp-docs/mobile/components/Point.txt +2 -2
- package/mcp-docs/mobile/components/PortalProvider.txt +2 -2
- package/mcp-docs/mobile/components/Pressable.txt +36 -36
- package/mcp-docs/mobile/components/ProgressBar.txt +2 -2
- 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 +3 -3
- package/mcp-docs/mobile/components/Radio.txt +3 -3
- package/mcp-docs/mobile/components/RadioCell.txt +37 -37
- package/mcp-docs/mobile/components/RadioGroup.txt +3 -3
- package/mcp-docs/mobile/components/ReferenceLine.txt +1 -1
- package/mcp-docs/mobile/components/RemoteImage.txt +6 -6
- package/mcp-docs/mobile/components/RemoteImageGroup.txt +1 -1
- package/mcp-docs/mobile/components/RollingNumber.txt +41 -39
- package/mcp-docs/mobile/components/Scrubber.txt +2 -2
- package/mcp-docs/mobile/components/SearchInput.txt +25 -22
- package/mcp-docs/mobile/components/SectionHeader.txt +7 -7
- package/mcp-docs/mobile/components/SegmentedTabs.txt +34 -34
- package/mcp-docs/mobile/components/Select.txt +3 -3
- package/mcp-docs/mobile/components/SelectAlpha.txt +10 -10
- package/mcp-docs/mobile/components/SelectChip.txt +42 -40
- package/mcp-docs/mobile/components/SelectChipAlpha.txt +11 -11
- package/mcp-docs/mobile/components/SelectOption.txt +10 -10
- package/mcp-docs/mobile/components/SlideButton.txt +40 -40
- package/mcp-docs/mobile/components/Spacer.txt +7 -7
- package/mcp-docs/mobile/components/Sparkline.txt +3 -3
- package/mcp-docs/mobile/components/SparklineGradient.txt +3 -3
- package/mcp-docs/mobile/components/SparklineInteractive.txt +6 -6
- package/mcp-docs/mobile/components/SparklineInteractiveHeader.txt +5 -5
- package/mcp-docs/mobile/components/Spinner.txt +2 -2
- package/mcp-docs/mobile/components/SpotIcon.txt +1 -1
- package/mcp-docs/mobile/components/SpotRectangle.txt +1 -1
- package/mcp-docs/mobile/components/SpotSquare.txt +1 -1
- package/mcp-docs/mobile/components/Stepper.txt +37 -36
- package/mcp-docs/mobile/components/Switch.txt +13 -3
- package/mcp-docs/mobile/components/TabIndicator.txt +1 -1
- package/mcp-docs/mobile/components/TabLabel.txt +39 -37
- package/mcp-docs/mobile/components/TabNavigation.txt +34 -34
- package/mcp-docs/mobile/components/TabbedChips.txt +34 -34
- package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +34 -34
- package/mcp-docs/mobile/components/Tabs.txt +34 -34
- package/mcp-docs/mobile/components/Tag.txt +41 -41
- package/mcp-docs/mobile/components/Text.txt +51 -58
- package/mcp-docs/mobile/components/TextInput.txt +25 -22
- package/mcp-docs/mobile/components/ThemeProvider.txt +3 -1
- package/mcp-docs/mobile/components/Toast.txt +34 -34
- package/mcp-docs/mobile/components/Tooltip.txt +2 -2
- package/mcp-docs/mobile/components/TopNavBar.txt +9 -9
- package/mcp-docs/mobile/components/Tray.txt +5 -3
- package/mcp-docs/mobile/components/UpsellCard.txt +15 -14
- package/mcp-docs/mobile/components/VStack.txt +34 -34
- package/mcp-docs/mobile/components/XAxis.txt +1 -1
- package/mcp-docs/mobile/components/YAxis.txt +1 -1
- package/mcp-docs/mobile/getting-started/installation.txt +9 -3
- package/mcp-docs/mobile/hooks/useMergeRefs.txt +5 -5
- package/mcp-docs/mobile/routes.txt +1 -1
- package/mcp-docs/web/components/AccordionItem.txt +4 -4
- package/mcp-docs/web/components/Alert.txt +3 -2
- package/mcp-docs/web/components/AreaChart.txt +63 -63
- package/mcp-docs/web/components/Avatar.txt +49 -49
- package/mcp-docs/web/components/AvatarButton.txt +54 -324
- package/mcp-docs/web/components/Banner.txt +71 -55
- package/mcp-docs/web/components/BarChart.txt +58 -58
- package/mcp-docs/web/components/Box.txt +49 -312
- package/mcp-docs/web/components/Button.txt +62 -324
- package/mcp-docs/web/components/Calendar.txt +49 -49
- package/mcp-docs/web/components/Carousel.txt +65 -72
- package/mcp-docs/web/components/CartesianChart.txt +63 -63
- package/mcp-docs/web/components/CellMedia.txt +1 -1
- package/mcp-docs/web/components/Checkbox.txt +9 -7
- package/mcp-docs/web/components/CheckboxCell.txt +52 -52
- package/mcp-docs/web/components/CheckboxGroup.txt +3 -3
- package/mcp-docs/web/components/Chip.txt +51 -51
- package/mcp-docs/web/components/Coachmark.txt +55 -55
- package/mcp-docs/web/components/Collapsible.txt +2 -2
- package/mcp-docs/web/components/Combobox.txt +8 -8
- package/mcp-docs/web/components/ContainedAssetCard.txt +60 -55
- package/mcp-docs/web/components/ContentCard.txt +54 -317
- package/mcp-docs/web/components/ContentCardBody.txt +57 -318
- package/mcp-docs/web/components/ContentCardFooter.txt +49 -312
- package/mcp-docs/web/components/ContentCardHeader.txt +56 -318
- package/mcp-docs/web/components/ContentCell.txt +63 -322
- package/mcp-docs/web/components/ControlGroup.txt +50 -50
- package/mcp-docs/web/components/DataCard.txt +60 -60
- package/mcp-docs/web/components/DateInput.txt +54 -54
- package/mcp-docs/web/components/DatePicker.txt +54 -54
- package/mcp-docs/web/components/Divider.txt +49 -49
- package/mcp-docs/web/components/DotCount.txt +3 -1
- package/mcp-docs/web/components/DotStatusColor.txt +1 -1
- package/mcp-docs/web/components/DotSymbol.txt +6 -6
- package/mcp-docs/web/components/Dropdown.txt +3 -3
- package/mcp-docs/web/components/Fallback.txt +49 -312
- package/mcp-docs/web/components/FloatingAssetCard.txt +53 -53
- package/mcp-docs/web/components/FullscreenAlert.txt +1 -1
- package/mcp-docs/web/components/FullscreenModal.txt +5 -4
- package/mcp-docs/web/components/FullscreenModalLayout.txt +3 -2
- package/mcp-docs/web/components/Grid.txt +51 -314
- package/mcp-docs/web/components/GridColumn.txt +48 -311
- package/mcp-docs/web/components/HStack.txt +49 -312
- package/mcp-docs/web/components/HeroSquare.txt +1 -1
- package/mcp-docs/web/components/Icon.txt +51 -51
- package/mcp-docs/web/components/IconButton.txt +51 -341
- package/mcp-docs/web/components/InputChip.txt +51 -51
- package/mcp-docs/web/components/Interactable.txt +48 -319
- package/mcp-docs/web/components/Legend.txt +62 -62
- package/mcp-docs/web/components/LineChart.txt +63 -63
- package/mcp-docs/web/components/Link.txt +48 -318
- package/mcp-docs/web/components/ListCell.txt +66 -325
- package/mcp-docs/web/components/Lottie.txt +49 -49
- package/mcp-docs/web/components/LottieStatusAnimation.txt +2 -2
- package/mcp-docs/web/components/MediaCard.txt +53 -53
- package/mcp-docs/web/components/MediaChip.txt +51 -51
- package/mcp-docs/web/components/MessagingCard.txt +54 -54
- package/mcp-docs/web/components/Modal.txt +51 -50
- package/mcp-docs/web/components/ModalBody.txt +49 -49
- package/mcp-docs/web/components/ModalFooter.txt +49 -49
- package/mcp-docs/web/components/ModalHeader.txt +50 -50
- package/mcp-docs/web/components/MultiContentModule.txt +55 -316
- package/mcp-docs/web/components/NavigationBar.txt +53 -53
- package/mcp-docs/web/components/NavigationTitle.txt +103 -0
- package/mcp-docs/web/components/NavigationTitleSelect.txt +48 -48
- package/mcp-docs/web/components/NudgeCard.txt +53 -53
- package/mcp-docs/web/components/Overlay.txt +49 -49
- package/mcp-docs/web/components/PageFooter.txt +54 -48
- package/mcp-docs/web/components/PageHeader.txt +58 -52
- package/mcp-docs/web/components/Pagination.txt +49 -49
- package/mcp-docs/web/components/PercentageBarChart.txt +58 -58
- package/mcp-docs/web/components/PeriodSelector.txt +62 -62
- package/mcp-docs/web/components/Pictogram.txt +1 -1
- package/mcp-docs/web/components/Point.txt +5 -14
- package/mcp-docs/web/components/PopoverPanel.txt +1 -1
- package/mcp-docs/web/components/PortalProvider.txt +2 -2
- package/mcp-docs/web/components/Pressable.txt +48 -319
- package/mcp-docs/web/components/ProgressBar.txt +1 -1
- package/mcp-docs/web/components/ProgressCircle.txt +2 -2
- package/mcp-docs/web/components/Radio.txt +9 -7
- package/mcp-docs/web/components/RadioCell.txt +52 -52
- package/mcp-docs/web/components/RadioGroup.txt +3 -3
- package/mcp-docs/web/components/ReferenceLine.txt +2 -2
- package/mcp-docs/web/components/RemoteImage.txt +48 -48
- package/mcp-docs/web/components/RemoteImageGroup.txt +3 -3
- package/mcp-docs/web/components/RollingNumber.txt +51 -313
- package/mcp-docs/web/components/Scrubber.txt +2 -2
- package/mcp-docs/web/components/SearchInput.txt +56 -56
- package/mcp-docs/web/components/SectionHeader.txt +55 -55
- package/mcp-docs/web/components/SegmentedControl.txt +1 -1
- package/mcp-docs/web/components/SegmentedTabs.txt +49 -49
- package/mcp-docs/web/components/Select.txt +3 -3
- package/mcp-docs/web/components/SelectAlpha.txt +8 -8
- package/mcp-docs/web/components/SelectChip.txt +55 -55
- package/mcp-docs/web/components/SelectChipAlpha.txt +8 -8
- package/mcp-docs/web/components/SelectOption.txt +56 -56
- package/mcp-docs/web/components/Sidebar.txt +66 -56
- package/mcp-docs/web/components/SidebarItem.txt +10 -111
- package/mcp-docs/web/components/SidebarMoreMenu.txt +2 -2
- package/mcp-docs/web/components/Spacer.txt +55 -318
- package/mcp-docs/web/components/Sparkline.txt +3 -3
- package/mcp-docs/web/components/SparklineGradient.txt +3 -3
- package/mcp-docs/web/components/SparklineInteractive.txt +4 -4
- package/mcp-docs/web/components/SparklineInteractiveHeader.txt +4 -4
- package/mcp-docs/web/components/Spinner.txt +49 -49
- package/mcp-docs/web/components/SpotIcon.txt +1 -1
- package/mcp-docs/web/components/SpotRectangle.txt +1 -1
- package/mcp-docs/web/components/SpotSquare.txt +1 -1
- package/mcp-docs/web/components/Stepper.txt +53 -53
- package/mcp-docs/web/components/Switch.txt +21 -7
- package/mcp-docs/web/components/TabIndicator.txt +1 -1
- package/mcp-docs/web/components/TabLabel.txt +50 -50
- package/mcp-docs/web/components/TabNavigation.txt +48 -48
- package/mcp-docs/web/components/TabbedChips.txt +49 -49
- package/mcp-docs/web/components/TabbedChipsAlpha.txt +49 -49
- package/mcp-docs/web/components/Table.txt +4 -4
- package/mcp-docs/web/components/TableCaption.txt +1 -1
- package/mcp-docs/web/components/TableCell.txt +2 -2
- package/mcp-docs/web/components/TableRow.txt +1 -1
- package/mcp-docs/web/components/Tabs.txt +49 -49
- package/mcp-docs/web/components/Tag.txt +52 -52
- package/mcp-docs/web/components/Text.txt +49 -312
- package/mcp-docs/web/components/TextInput.txt +56 -56
- package/mcp-docs/web/components/ThemeProvider.txt +24 -4
- package/mcp-docs/web/components/TileButton.txt +48 -318
- package/mcp-docs/web/components/Toast.txt +51 -51
- package/mcp-docs/web/components/Tooltip.txt +3 -3
- package/mcp-docs/web/components/Tray.txt +2 -2
- package/mcp-docs/web/components/UpsellCard.txt +15 -14
- package/mcp-docs/web/components/VStack.txt +49 -312
- package/mcp-docs/web/components/XAxis.txt +1 -1
- package/mcp-docs/web/components/YAxis.txt +1 -1
- package/mcp-docs/web/getting-started/installation.txt +13 -5
- package/mcp-docs/web/hooks/useMergeRefs.txt +5 -5
- package/mcp-docs/web/routes.txt +1 -1
- package/package.json +1 -1
|
@@ -42,7 +42,7 @@ function Example() {
|
|
|
42
42
|
thumbnail={exampleThumbnail}
|
|
43
43
|
title="Progress Bar Card"
|
|
44
44
|
titleAccessory={
|
|
45
|
-
<Text
|
|
45
|
+
<Text font="label1" style={{ color: `rgb(${spectrum.green70})` }}>
|
|
46
46
|
↗ 25.25%
|
|
47
47
|
</Text>
|
|
48
48
|
}
|
|
@@ -225,7 +225,7 @@ function Example() {
|
|
|
225
225
|
thumbnail={exampleThumbnail}
|
|
226
226
|
title="Positive Trend"
|
|
227
227
|
titleAccessory={
|
|
228
|
-
<Text
|
|
228
|
+
<Text font="label1" style={{ color: `rgb(${spectrum.green70})` }}>
|
|
229
229
|
↗ 8.5%
|
|
230
230
|
</Text>
|
|
231
231
|
}
|
|
@@ -298,7 +298,7 @@ function Example() {
|
|
|
298
298
|
thumbnail={exampleThumbnail}
|
|
299
299
|
title="Tap to View Details"
|
|
300
300
|
titleAccessory={
|
|
301
|
-
<Text
|
|
301
|
+
<Text font="label1" style={{ color: `rgb(${spectrum.green70})` }}>
|
|
302
302
|
↗ 8.5%
|
|
303
303
|
</Text>
|
|
304
304
|
}
|
|
@@ -437,7 +437,7 @@ function Example() {
|
|
|
437
437
|
thumbnail={exampleThumbnail}
|
|
438
438
|
title="Steps Today"
|
|
439
439
|
titleAccessory={
|
|
440
|
-
<Text
|
|
440
|
+
<Text font="label1" style={{ color: `rgb(${spectrum.green70})` }}>
|
|
441
441
|
6,500 / 10,000
|
|
442
442
|
</Text>
|
|
443
443
|
}
|
|
@@ -549,7 +549,7 @@ const { spectrum } = useTheme();
|
|
|
549
549
|
{
|
|
550
550
|
/* Gain text */
|
|
551
551
|
}
|
|
552
|
-
<Text
|
|
552
|
+
<Text font="label1" style={{ color: `rgb(${spectrum.green70})` }}>
|
|
553
553
|
↗ 12.5%
|
|
554
554
|
</Text>;
|
|
555
555
|
|
|
@@ -581,7 +581,7 @@ function Example() {
|
|
|
581
581
|
thumbnail={exampleThumbnail}
|
|
582
582
|
title="ETH Holdings"
|
|
583
583
|
titleAccessory={
|
|
584
|
-
<Text
|
|
584
|
+
<Text font="label1" style={{ color: `rgb(${spectrum.green70})` }}>
|
|
585
585
|
↗ 12.5%
|
|
586
586
|
</Text>
|
|
587
587
|
}
|
|
@@ -661,7 +661,7 @@ import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
|
|
|
661
661
|
| Prop | Type | Required | Default | Description |
|
|
662
662
|
| --- | --- | --- | --- | --- |
|
|
663
663
|
| `layout` | `horizontal \| vertical` | Yes | `'vertical'` | Layout orientation of the card. Horizontal places header and visualization side by side, vertical stacks them. |
|
|
664
|
-
| `title` | `null \| string \| number \| false \| true \| ReactElement<
|
|
664
|
+
| `title` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | Yes | `-` | Text or React node to display as the card title. Use a Text component to override default color and font. |
|
|
665
665
|
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
666
666
|
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
667
667
|
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
@@ -687,19 +687,19 @@ import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
|
|
|
687
687
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
688
688
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
689
689
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
690
|
-
| `bottom` | `
|
|
691
|
-
| `children` | `null \| string \| number \| false \| true \| ReactElement<
|
|
690
|
+
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
691
|
+
| `children` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Child node to display as the visualization (e.g., ProgressBar or ProgressCircle). |
|
|
692
692
|
| `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 | `-` | - |
|
|
693
|
-
| `columnGap` | `0 \| 1 \| 2 \|
|
|
694
|
-
| `contentStyle` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<
|
|
693
|
+
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
694
|
+
| `contentStyle` | `null \| false \| \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Apply animated styles to the inner container. |
|
|
695
695
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
696
696
|
| `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. |
|
|
697
697
|
| `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. |
|
|
698
698
|
| `disabled` | `boolean` | No | `-` | Is the element currently disabled. Whether the press behavior is disabled. |
|
|
699
|
-
| `display` | `flex \| none` | No | `-` | - |
|
|
699
|
+
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
700
700
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
|
|
701
|
-
| `feedback` | `none \|
|
|
702
|
-
| `flexBasis` | `
|
|
701
|
+
| `feedback` | `none \| normal \| light \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
702
|
+
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
703
703
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
704
704
|
| `flexGrow` | `number` | No | `-` | - |
|
|
705
705
|
| `flexShrink` | `number` | No | `-` | - |
|
|
@@ -708,24 +708,24 @@ import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
|
|
|
708
708
|
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
|
|
709
709
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
710
710
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
711
|
-
| `gap` | `0 \| 1 \| 2 \|
|
|
712
|
-
| `height` | `
|
|
711
|
+
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
712
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
713
713
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
714
714
|
| `key` | `Key \| null` | No | `-` | - |
|
|
715
|
-
| `left` | `
|
|
715
|
+
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
716
716
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
717
717
|
| `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. |
|
|
718
|
-
| `margin` | `0 \| -1 \| -2 \| -
|
|
719
|
-
| `marginBottom` | `0 \| -1 \| -2 \| -
|
|
720
|
-
| `marginEnd` | `0 \| -1 \| -2 \| -
|
|
721
|
-
| `marginStart` | `0 \| -1 \| -2 \| -
|
|
722
|
-
| `marginTop` | `0 \| -1 \| -2 \| -
|
|
723
|
-
| `marginX` | `0 \| -1 \| -2 \| -
|
|
724
|
-
| `marginY` | `0 \| -1 \| -2 \| -
|
|
725
|
-
| `maxHeight` | `
|
|
726
|
-
| `maxWidth` | `
|
|
727
|
-
| `minHeight` | `
|
|
728
|
-
| `minWidth` | `
|
|
718
|
+
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
719
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
720
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
721
|
+
| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
722
|
+
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
723
|
+
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
724
|
+
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
725
|
+
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
726
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
727
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
728
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
729
729
|
| `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |
|
|
730
730
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
731
731
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -744,35 +744,35 @@ import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
|
|
|
744
744
|
| `onPressOut` | `(((event: GestureResponderEvent) => void) & ((event: GestureResponderEvent) => void))` | No | `-` | Callback fired before onPress when button is released. Called when a touch is released before onPress. |
|
|
745
745
|
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
746
746
|
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
747
|
-
| `padding` | `0 \| 1 \| 2 \|
|
|
748
|
-
| `paddingBottom` | `0 \| 1 \| 2 \|
|
|
749
|
-
| `paddingEnd` | `0 \| 1 \| 2 \|
|
|
750
|
-
| `paddingStart` | `0 \| 1 \| 2 \|
|
|
751
|
-
| `paddingTop` | `0 \| 1 \| 2 \|
|
|
752
|
-
| `paddingX` | `0 \| 1 \| 2 \|
|
|
753
|
-
| `paddingY` | `0 \| 1 \| 2 \|
|
|
747
|
+
| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
748
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
749
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
750
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
751
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
752
|
+
| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
753
|
+
| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
754
754
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
755
|
-
| `position` | `
|
|
756
|
-
| `ref` | `(
|
|
755
|
+
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
756
|
+
| `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
|
|
757
757
|
| `renderAsPressable` | `boolean` | No | `false` | If true, the CardRoot will be rendered as a Pressable component. When false, renders as an HStack for layout purposes. |
|
|
758
|
-
| `right` | `
|
|
759
|
-
| `rowGap` | `0 \| 1 \| 2 \|
|
|
760
|
-
| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<
|
|
758
|
+
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
759
|
+
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
760
|
+
| `style` | `null \| false \| \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
|
|
761
761
|
| `styles` | `({ layoutContainer?: StyleProp<ViewStyle>; headerContainer?: StyleProp<ViewStyle>; textContainer?: StyleProp<ViewStyle>; titleContainer?: StyleProp<ViewStyle>; } & { root?: StyleProp<ViewStyle>; })` | No | `-` | - |
|
|
762
|
-
| `subtitle` | `null \| string \| number \| false \| true \| ReactElement<
|
|
763
|
-
| `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. |
|
|
762
|
+
| `subtitle` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Text or React node to display as the card subtitle. Use a Text component to override default color and font. |
|
|
763
|
+
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID Used to locate this view in end-to-end tests. |
|
|
764
764
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
765
765
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
766
766
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
767
767
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
768
|
-
| `thumbnail` | `null \| string \| number \| false \| true \| ReactElement<
|
|
769
|
-
| `titleAccessory` | `null \| string \| number \| false \| true \| ReactElement<
|
|
770
|
-
| `top` | `
|
|
771
|
-
| `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 | `-` | - |
|
|
768
|
+
| `thumbnail` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | React node to display as a thumbnail in the header area. |
|
|
769
|
+
| `titleAccessory` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | React node to display as a title accessory. |
|
|
770
|
+
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
771
|
+
| `transform` | `string \| readonly (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
|
|
772
772
|
| `transparentWhileInactive` | `boolean` | No | `-` | Mark the background and border as transparent until the element is interacted with (hovered, pressed, etc). Must be used in conjunction with the pressed prop |
|
|
773
773
|
| `transparentWhilePressed` | `boolean` | No | `-` | Mark the background and border as transparent even while element is interacted with (elevation underlay issue). Must be used in conjunction with the pressed prop |
|
|
774
774
|
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
775
|
-
| `width` | `
|
|
775
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
776
776
|
| `wrapperStyles` | `{ base?: StyleProp<ViewStyle>; pressed?: StyleProp<ViewStyle>; disabled?: StyleProp<ViewStyle>; }` | No | `-` | Apply styles to the outer container. |
|
|
777
777
|
| `zIndex` | `number` | No | `-` | - |
|
|
778
778
|
|
|
@@ -497,7 +497,7 @@ The DateInput fires events in a specific order:
|
|
|
497
497
|
| `autoComplete` | `off \| email \| name \| additional-name \| address-line1 \| address-line2 \| birthdate-day \| birthdate-full \| birthdate-month \| birthdate-year \| cc-csc \| cc-exp \| cc-exp-day \| cc-exp-month \| cc-exp-year \| cc-number \| cc-name \| cc-given-name \| cc-middle-name \| cc-family-name \| cc-type \| country \| current-password \| family-name \| gender \| given-name \| honorific-prefix \| honorific-suffix \| name-family \| name-given \| name-middle \| name-middle-initial \| name-prefix \| name-suffix \| new-password \| nickname \| one-time-code \| organization \| organization-title \| password \| password-new \| postal-address \| postal-address-country \| postal-address-extended \| postal-address-extended-postal-code \| postal-address-locality \| postal-address-region \| postal-code \| street-address \| sms-otp \| tel \| tel-country-code \| tel-national \| tel-device \| url \| username \| username-new` | No | `-` | Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set autoComplete to off. The following values work across platforms: - additional-name - address-line1 - address-line2 - cc-number - country - current-password - email - family-name - given-name - honorific-prefix - honorific-suffix - name - new-password - off - one-time-code - postal-code - street-address - tel - username The following values work on iOS only: - nickname - organization - organization-title - url The following values work on Android only: - birthdate-day - birthdate-full - birthdate-month - birthdate-year - cc-csc - cc-exp - cc-exp-day - cc-exp-month - cc-exp-year - gender - name-family - name-given - name-middle - name-middle-initial - name-prefix - name-suffix - password - password-new - postal-address - postal-address-country - postal-address-extended - postal-address-extended-postal-code - postal-address-locality - postal-address-region - sms-otp - tel-country-code - tel-national - tel-device - username-new |
|
|
498
498
|
| `autoCorrect` | `boolean` | No | `-` | If false, disables auto-correct. The default value is true. |
|
|
499
499
|
| `autoFocus` | `boolean` | No | `-` | If true, focuses the input on componentDidMount. The default value is false. |
|
|
500
|
-
| `blurOnSubmit` | `boolean` | No | `-` | If true, the text field will blur when submitted. The default value is true. |
|
|
500
|
+
| `blurOnSubmit` | `boolean` | No | `-` | If true, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting blurOnSubmit to true means that pressing return will blur the field and trigger the onSubmitEditing event instead of inserting a newline into the field. |
|
|
501
501
|
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `200` | Leverage one of the borderRadius styles we offer to round the corners of the input. |
|
|
502
502
|
| `bordered` | `boolean` | No | `true` | Determines if the input should have a border. When set to false, focus border styling is disabled by default. |
|
|
503
503
|
| `caretHidden` | `boolean` | No | `-` | If true, caret is hidden. The default value is false. |
|
|
@@ -508,22 +508,24 @@ The DateInput fires events in a specific order:
|
|
|
508
508
|
| `cursorColor` | `ColorValue \| null` | No | `-` | When provided it will set the color of the cursor (or caret) in the component. Unlike the behavior of selectionColor the cursor color will be set independently from the color of the text selection box. |
|
|
509
509
|
| `dataDetectorTypes` | `DataDetectorTypes \| DataDetectorTypes[]` | No | `-` | Determines the types of data converted to clickable URLs in the text input. Only valid if multiline={true} and editable={false}. By default no data types are detected. You can provide one type or an array of many types. Possible values for dataDetectorTypes are: - phoneNumber - link - address - calendarEvent - none - all |
|
|
510
510
|
| `disableFullscreenUI` | `boolean` | No | `-` | When false, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When true, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to false. |
|
|
511
|
+
| `disableKeyboardShortcuts` | `boolean` | No | `-` | If true, the keyboard shortcuts (undo/redo and copy buttons) are disabled. The default value is false. |
|
|
511
512
|
| `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
|
|
512
513
|
| `disabledDateError` | `string` | No | `'Date unavailable'` | Error text to display when a disabled date is selected, including dates before the minDate or after the maxDate. However if the selected date is more than 100 years before the minDate or more than 100 years after the maxDate, the invalidDateError will be displayed instead. |
|
|
513
514
|
| `disabledDates` | `(Date \| [Date, Date])[]` | No | `-` | Array of disabled dates, and date tuples for date ranges. Make sure to set disabledDateError as well. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges. |
|
|
514
515
|
| `editable` | `boolean` | No | `-` | If false, text is not editable. The default value is true. |
|
|
515
516
|
| `enableColorSurge` | `boolean` | No | `-` | Enable Color Surge motion |
|
|
516
517
|
| `enablesReturnKeyAutomatically` | `boolean` | No | `-` | If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. |
|
|
517
|
-
| `end` | `null \| string \| number \| false \| true \| ReactElement<
|
|
518
|
+
| `end` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
|
|
518
519
|
| `enterKeyHint` | `search \| done \| go \| next \| send \| previous \| enter` | No | `-` | Determines what text should be shown to the return key on virtual keyboards. Has precedence over the returnKeyType prop. |
|
|
519
520
|
| `focusedBorderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `borderWidth` | Additional border width when focused. |
|
|
520
521
|
| `font` | `display1 \| display2 \| display3 \| title1 \| title2 \| title3 \| title4 \| headline \| body \| label1 \| label2 \| caption \| legal` | No | `body` | Typography font token for the field (passed through to NativeInput as font), same token family as align. |
|
|
521
|
-
| `height` | `
|
|
522
|
-
| `helperText` | `null \| string \| number \| false \| true \| ReactElement<
|
|
522
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | Height of input |
|
|
523
|
+
| `helperText` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | For cases where label is not enough information to describe what the text input is for. Can also be used for showing positive/negative messages |
|
|
523
524
|
| `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |
|
|
524
525
|
| `importantForAutofill` | `auto \| yes \| no \| noExcludeDescendants \| yesExcludeDescendants` | No | `-` | Determines whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Defaults to auto. To disable auto complete, use off. *Android Only* The following values work on Android only: - auto - let Android decide - no - not important for autofill - noExcludeDescendants - this view and its children arent important for autofill - yes - is important for autofill - yesExcludeDescendants - this view is important for autofill but its children arent |
|
|
525
526
|
| `inlineImageLeft` | `string` | No | `-` | If defined, the provided image resource will be rendered on the left. |
|
|
526
527
|
| `inlineImagePadding` | `number` | No | `-` | Padding between the inline image, if any, and the text input itself. |
|
|
528
|
+
| `inputAccessoryViewButtonLabel` | `string` | No | `-` | An optional label that overrides the default input accessory view button label. |
|
|
527
529
|
| `inputAccessoryViewID` | `string` | No | `-` | Used to connect to an InputAccessoryView. Not part of react-natives documentation, but present in examples and code. See https://reactnative.dev/docs/inputaccessoryview for more information. |
|
|
528
530
|
| `inputBackground` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `'bg'` | Background color of the input |
|
|
529
531
|
| `inputMode` | `search \| none \| text \| email \| tel \| url \| numeric \| decimal` | No | `-` | Works like the inputmode attribute in HTML, it determines which keyboard to open, e.g. numeric and has precedence over keyboardType. |
|
|
@@ -532,23 +534,24 @@ The DateInput fires events in a specific order:
|
|
|
532
534
|
| `keyboardAppearance` | `light \| default \| dark` | No | `-` | Determines the color of the keyboard. |
|
|
533
535
|
| `keyboardType` | `default \| url \| number-pad \| decimal-pad \| numeric \| email-address \| phone-pad \| visible-password \| ascii-capable \| numbers-and-punctuation \| name-phone-pad \| twitter \| web-search` | No | `-` | enum(default, numeric, email-address, ascii-capable, numbers-and-punctuation, url, number-pad, phone-pad, name-phone-pad, decimal-pad, twitter, web-search, visible-password) Determines which keyboard to open, e.g.numeric. The following values work across platforms: - default - numeric - email-address - phone-pad The following values work on iOS: - ascii-capable - numbers-and-punctuation - url - number-pad - name-phone-pad - decimal-pad - twitter - web-search The following values work on Android: - visible-password |
|
|
534
536
|
| `label` | `string` | No | `-` | Short messageArea indicating purpose of input |
|
|
535
|
-
| `labelNode` | `null \| string \| number \| false \| true \| ReactElement<
|
|
537
|
+
| `labelNode` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | React node to render label. Takes precedence over label. |
|
|
536
538
|
| `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
|
|
539
|
+
| `lineBreakModeIOS` | `middle \| wordWrapping \| char \| clip \| head \| tail` | No | `-` | Set line break mode on iOS. |
|
|
537
540
|
| `lineBreakStrategyIOS` | `none \| standard \| hangul-word \| push-out` | No | `-` | Set line break strategy on iOS. |
|
|
538
541
|
| `maxDate` | `Date` | No | `-` | Maximum date allowed to be selected, inclusive. Dates after the maxDate are disabled. Make sure to set disabledDateError as well. |
|
|
539
542
|
| `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 |
|
|
540
543
|
| `maxLength` | `number` | No | `-` | Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. |
|
|
541
544
|
| `minDate` | `Date` | No | `-` | Minimum date allowed to be selected, inclusive. Dates before the minDate are disabled. Make sure to set disabledDateError as well. |
|
|
542
|
-
| `minHeight` | `
|
|
545
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `auto` | minimum height of input |
|
|
543
546
|
| `multiline` | `boolean` | No | `-` | If true, the text input can be multiple lines. The default value is false. |
|
|
544
547
|
| `numberOfLines` | `number` | No | `-` | Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines. |
|
|
545
|
-
| `onBlur` | `((e:
|
|
546
|
-
| `onChange` | `((e:
|
|
548
|
+
| `onBlur` | `((e: BlurEvent) => void)` | No | `-` | Callback that is called when the text input is blurred Note: If you are trying to find the last value of TextInput, you can use the onEndEditing event, which is fired upon completion of editing. |
|
|
549
|
+
| `onChange` | `((e: TextInputChangeEvent) => void)` | No | `-` | - |
|
|
547
550
|
| `onChangeText` | `((text: string) => void)` | No | `-` | - |
|
|
548
|
-
| `onContentSizeChange` | `((e:
|
|
549
|
-
| `onEndEditing` | `((e:
|
|
550
|
-
| `onFocus` | `((e:
|
|
551
|
-
| `onKeyPress` | `((e:
|
|
551
|
+
| `onContentSizeChange` | `((e: TextInputContentSizeChangeEvent) => void)` | No | `-` | Callback that is called when the text inputs content size changes. This will be called with { nativeEvent: { contentSize: { width, height } } }. Only called for multiline text inputs. |
|
|
552
|
+
| `onEndEditing` | `((e: TextInputEndEditingEvent) => void)` | No | `-` | Callback that is called when text input ends. |
|
|
553
|
+
| `onFocus` | `((e: FocusEvent) => void)` | No | `-` | Callback that is called when the text input is focused |
|
|
554
|
+
| `onKeyPress` | `((e: TextInputKeyPressEvent) => void)` | No | `-` | Callback that is called when a key is pressed. This will be called with { nativeEvent: { key: keyValue } } where keyValue is Enter or Backspace for respective keys and the typed-in character otherwise including for space. Fires before onChange callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs. |
|
|
552
555
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
553
556
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
554
557
|
| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -564,20 +567,19 @@ The DateInput fires events in a specific order:
|
|
|
564
567
|
| `onPress` | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void)` | No | `-` | Called when a single tap gesture is detected. |
|
|
565
568
|
| `onPressIn` | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void)` | No | `-` | Callback that is called when a touch is engaged. |
|
|
566
569
|
| `onPressOut` | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void)` | No | `-` | Callback that is called when a touch is released. |
|
|
567
|
-
| `onScroll` | `((e:
|
|
568
|
-
| `onSelectionChange` | `((e:
|
|
569
|
-
| `onSubmitEditing` | `((e:
|
|
570
|
-
| `onTextInput` | `((e: NativeSyntheticEvent<TextInputTextInputEventData>) => void)` | No | `-` | Callback that is called on new text input with the argument { nativeEvent: { text, previousText, range: { start, end } } }. This prop requires multiline={true} to be set. |
|
|
570
|
+
| `onScroll` | `((e: TextInputScrollEvent) => void)` | No | `-` | Invoked on content scroll with { nativeEvent: { contentOffset: { x, y } } }. May also contain other properties from ScrollEvent but on Android contentSize is not provided for performance reasons. |
|
|
571
|
+
| `onSelectionChange` | `((e: TextInputSelectionChangeEvent) => void)` | No | `-` | Callback that is called when the text input selection is changed. |
|
|
572
|
+
| `onSubmitEditing` | `((e: TextInputSubmitEditingEvent) => void)` | No | `-` | Callback that is called when the text inputs submit button is pressed. |
|
|
571
573
|
| `passwordRules` | `string \| null` | No | `-` | Provide rules for your password. For example, say you want to require a password with at least eight characters consisting of a mix of uppercase and lowercase letters, at least one number, and at most two consecutive characters. required: upper; required: lower; required: digit; max-consecutive: 2; minlength: 8; |
|
|
572
574
|
| `placeholder` | `string` | No | `-` | Placeholder text displayed inside of the input. Will be replaced if there is a value. The string that will be rendered before text input has been entered |
|
|
573
575
|
| `placeholderTextColor` | `string \| OpaqueColorValue` | No | `-` | The text color of the placeholder string |
|
|
574
576
|
| `readOnly` | `boolean` | No | `-` | If true, text is not editable. The default value is false. |
|
|
575
|
-
| `ref` | `(
|
|
577
|
+
| `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
|
|
576
578
|
| `rejectResponderTermination` | `boolean \| null` | No | `-` | If true, allows TextInput to pass touch events to the parent component. This allows components to be swipeable from the TextInput on iOS, as is the case on Android by default. If false, TextInput always asks to handle the input (except when disabled). |
|
|
577
579
|
| `required` | `boolean` | No | `-` | If required, the requiredError will be displayed if a user blurs the input, without a date selected, after having typed into it. |
|
|
578
580
|
| `requiredError` | `string` | No | `'This field is required'` | Error text to display when required is true and a user blurs the input without a date selected, after having typed into it. |
|
|
579
581
|
| `returnKeyLabel` | `string` | No | `-` | Sets the return key to the label. Use it instead of returnKeyType. |
|
|
580
|
-
| `returnKeyType` | `
|
|
582
|
+
| `returnKeyType` | `join \| search \| done \| none \| default \| go \| next \| send \| previous \| google \| route \| yahoo \| emergency-call` | No | `-` | enum(default, go, google, join, next, route, search, send, yahoo, done, emergency-call) Determines how the return key should look. |
|
|
581
583
|
| `scrollEnabled` | `boolean` | No | `-` | If false, scrolling of the text view will be disabled. The default value is true. Only works with multiline={true} |
|
|
582
584
|
| `secureTextEntry` | `boolean` | No | `-` | If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. |
|
|
583
585
|
| `selectTextOnFocus` | `boolean` | No | `-` | If true, all text will automatically be selected on focus |
|
|
@@ -589,18 +591,19 @@ The DateInput fires events in a specific order:
|
|
|
589
591
|
| `showSoftInputOnFocus` | `boolean` | No | `-` | When false, it will prevent the soft keyboard from showing when the field is focused. The default value is true |
|
|
590
592
|
| `smartInsertDelete` | `boolean` | No | `-` | If false, the iOS system will not insert an extra space after a paste operation neither delete one or two spaces after a cut or delete operation. The default value is true. |
|
|
591
593
|
| `spellCheck` | `boolean` | No | `-` | If false, disables spell-check style (i.e. red underlines). The default value is inherited from autoCorrect |
|
|
592
|
-
| `start` | `null \| string \| number \| false \| true \| ReactElement<
|
|
593
|
-
| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<
|
|
594
|
+
| `start` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component |
|
|
595
|
+
| `style` | `null \| false \| \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
|
|
596
|
+
| `submitBehavior` | `submit \| blurAndSubmit \| newline` | No | `-` | When the return key is pressed, For single line inputs: - newline defaults to blurAndSubmit - undefined defaults to blurAndSubmit For multiline inputs: - newline adds a newline - undefined defaults to newline For both single line and multiline inputs: - submit will only send a submit event and not blur the input - blurAndSubmit will both blur the input and send a submit event |
|
|
594
597
|
| `suffix` | `string` | No | `-` | Adds suffix text to the end of input |
|
|
595
598
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID Used to locate this view in end-to-end tests |
|
|
596
599
|
| `testIDMap` | `{ start?: string; end?: string \| undefined; label?: string \| undefined; helperText?: string \| undefined; } \| undefined` | No | `-` | Add ability to test individual parts of the input |
|
|
597
600
|
| `textAlign` | `left \| right \| center \| unset` | No | `-` | Native TextInput textAlign with the extra unset option to remove the textAlign style. Use this to workaround the issue where long text does not ellipsis in TextInput |
|
|
598
601
|
| `textAlignVertical` | `top \| bottom \| auto \| center` | No | `-` | Vertically align text when multiline is set to true |
|
|
599
602
|
| `textBreakStrategy` | `simple \| highQuality \| balanced` | No | `-` | Set text break strategy on Android API Level 23+, possible values are simple, highQuality, balanced The default value is simple. |
|
|
600
|
-
| `textContentType` | `none \| location \| name \| nickname \| password \| username \| URL \| addressCity \| addressCityAndState \| addressState \| countryName \| creditCardNumber \| creditCardExpiration \| creditCardExpirationMonth \| creditCardExpirationYear \| creditCardSecurityCode \| creditCardType \| creditCardName \| creditCardGivenName \| creditCardMiddleName \| creditCardFamilyName \| emailAddress \| familyName \| fullStreetAddress \| givenName \| jobTitle \| middleName \| namePrefix \| nameSuffix \| organizationName \| postalCode \| streetAddressLine1 \| streetAddressLine2 \| sublocality \| telephoneNumber \| newPassword \| oneTimeCode \| birthdate \| birthdateDay \| birthdateMonth \| birthdateYear` | No | `-` | Give the keyboard and the system information about the expected semantic meaning for the content that users enter. To disable autofill, set textContentType to none. Possible values for textContentType are: - none - URL - addressCity - addressCityAndState - addressState - countryName - creditCardNumber - creditCardExpiration (iOS 17+) - creditCardExpirationMonth (iOS 17+) - creditCardExpirationYear (iOS 17+) - creditCardSecurityCode (iOS 17+) - creditCardType (iOS 17+) - creditCardName (iOS 17+) - creditCardGivenName (iOS 17+) - creditCardMiddleName (iOS 17+) - creditCardFamilyName (iOS 17+) - emailAddress - familyName - fullStreetAddress - givenName - jobTitle - location - middleName - name - namePrefix - nameSuffix - nickname - organizationName - postalCode - streetAddressLine1 - streetAddressLine2 - sublocality - telephoneNumber - username - password - newPassword - oneTimeCode - birthdate (iOS 17+) - birthdateDay (iOS 17+) - birthdateMonth (iOS 17+) - birthdateYear (iOS 17+) |
|
|
603
|
+
| `textContentType` | `none \| location \| name \| nickname \| password \| username \| flightNumber \| URL \| addressCity \| addressCityAndState \| addressState \| countryName \| creditCardNumber \| creditCardExpiration \| creditCardExpirationMonth \| creditCardExpirationYear \| creditCardSecurityCode \| creditCardType \| creditCardName \| creditCardGivenName \| creditCardMiddleName \| creditCardFamilyName \| emailAddress \| familyName \| fullStreetAddress \| givenName \| jobTitle \| middleName \| namePrefix \| nameSuffix \| organizationName \| postalCode \| streetAddressLine1 \| streetAddressLine2 \| sublocality \| telephoneNumber \| newPassword \| oneTimeCode \| birthdate \| birthdateDay \| birthdateMonth \| birthdateYear \| cellularEID \| cellularIMEI \| dateTime \| shipmentTrackingNumber` | No | `-` | Give the keyboard and the system information about the expected semantic meaning for the content that users enter. To disable autofill, set textContentType to none. Possible values for textContentType are: - none - URL - addressCity - addressCityAndState - addressState - countryName - creditCardNumber - creditCardExpiration (iOS 17+) - creditCardExpirationMonth (iOS 17+) - creditCardExpirationYear (iOS 17+) - creditCardSecurityCode (iOS 17+) - creditCardType (iOS 17+) - creditCardName (iOS 17+) - creditCardGivenName (iOS 17+) - creditCardMiddleName (iOS 17+) - creditCardFamilyName (iOS 17+) - emailAddress - familyName - fullStreetAddress - givenName - jobTitle - location - middleName - name - namePrefix - nameSuffix - nickname - organizationName - postalCode - streetAddressLine1 - streetAddressLine2 - sublocality - telephoneNumber - username - password - newPassword - oneTimeCode - birthdate (iOS 17+) - birthdateDay (iOS 17+) - birthdateMonth (iOS 17+) - birthdateYear (iOS 17+) - cellularEID (iOS 17.4+) - cellularIMEI (iOS 17.4+) - dateTime (iOS 15+) - flightNumber (iOS 15+) - shipmentTrackingNumber (iOS 15+) |
|
|
601
604
|
| `underlineColorAndroid` | `string \| OpaqueColorValue` | No | `-` | The color of the textInput underline. |
|
|
602
605
|
| `variant` | `primary \| secondary \| positive \| negative \| foregroundMuted \| foreground` | No | `-` | Determines the sentiment of the input. Because we allow startContent and endContent to be custom ReactNode, the content placed inside these slots will not change colors according to the variant. You will have to add that yourself |
|
|
603
606
|
| `verticalAlign` | `top \| bottom \| auto \| middle` | No | `-` | Vertically align text when multiline is set to true |
|
|
604
|
-
| `width` | `
|
|
607
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `100%` | Width of input as a percentage string. |
|
|
605
608
|
|
|
606
609
|
|
|
@@ -709,7 +709,7 @@ function Example() {
|
|
|
709
709
|
| `autoComplete` | `off \| email \| name \| additional-name \| address-line1 \| address-line2 \| birthdate-day \| birthdate-full \| birthdate-month \| birthdate-year \| cc-csc \| cc-exp \| cc-exp-day \| cc-exp-month \| cc-exp-year \| cc-number \| cc-name \| cc-given-name \| cc-middle-name \| cc-family-name \| cc-type \| country \| current-password \| family-name \| gender \| given-name \| honorific-prefix \| honorific-suffix \| name-family \| name-given \| name-middle \| name-middle-initial \| name-prefix \| name-suffix \| new-password \| nickname \| one-time-code \| organization \| organization-title \| password \| password-new \| postal-address \| postal-address-country \| postal-address-extended \| postal-address-extended-postal-code \| postal-address-locality \| postal-address-region \| postal-code \| street-address \| sms-otp \| tel \| tel-country-code \| tel-national \| tel-device \| url \| username \| username-new` | No | `-` | Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set autoComplete to off. The following values work across platforms: - additional-name - address-line1 - address-line2 - cc-number - country - current-password - email - family-name - given-name - honorific-prefix - honorific-suffix - name - new-password - off - one-time-code - postal-code - street-address - tel - username The following values work on iOS only: - nickname - organization - organization-title - url The following values work on Android only: - birthdate-day - birthdate-full - birthdate-month - birthdate-year - cc-csc - cc-exp - cc-exp-day - cc-exp-month - cc-exp-year - gender - name-family - name-given - name-middle - name-middle-initial - name-prefix - name-suffix - password - password-new - postal-address - postal-address-country - postal-address-extended - postal-address-extended-postal-code - postal-address-locality - postal-address-region - sms-otp - tel-country-code - tel-national - tel-device - username-new |
|
|
710
710
|
| `autoCorrect` | `boolean` | No | `-` | If false, disables auto-correct. The default value is true. |
|
|
711
711
|
| `autoFocus` | `boolean` | No | `-` | If true, focuses the input on componentDidMount. The default value is false. |
|
|
712
|
-
| `blurOnSubmit` | `boolean` | No | `-` | If true, the text field will blur when submitted. The default value is true. |
|
|
712
|
+
| `blurOnSubmit` | `boolean` | No | `-` | If true, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting blurOnSubmit to true means that pressing return will blur the field and trigger the onSubmitEditing event instead of inserting a newline into the field. |
|
|
713
713
|
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `200` | Leverage one of the borderRadius styles we offer to round the corners of the input. |
|
|
714
714
|
| `bordered` | `boolean` | No | `true` | Determines if the input should have a border. When set to false, focus border styling is disabled by default. |
|
|
715
715
|
| `calendarIconButtonAccessibilityLabel` | `string` | No | `-` | Accessibility label describing the calendar IconButton, which opens the calendar when pressed. |
|
|
@@ -723,26 +723,28 @@ function Example() {
|
|
|
723
723
|
| `contextMenuHidden` | `boolean` | No | `-` | If true, context menu is hidden. The default value is false. |
|
|
724
724
|
| `cursorColor` | `ColorValue \| null` | No | `-` | When provided it will set the color of the cursor (or caret) in the component. Unlike the behavior of selectionColor the cursor color will be set independently from the color of the text selection box. |
|
|
725
725
|
| `dataDetectorTypes` | `DataDetectorTypes \| DataDetectorTypes[]` | No | `-` | Determines the types of data converted to clickable URLs in the text input. Only valid if multiline={true} and editable={false}. By default no data types are detected. You can provide one type or an array of many types. Possible values for dataDetectorTypes are: - phoneNumber - link - address - calendarEvent - none - all |
|
|
726
|
-
| `dateInputStyle` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<
|
|
726
|
+
| `dateInputStyle` | `null \| false \| \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom style to apply to the DateInput. |
|
|
727
727
|
| `disableFullscreenUI` | `boolean` | No | `-` | When false, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When true, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to false. |
|
|
728
|
+
| `disableKeyboardShortcuts` | `boolean` | No | `-` | If true, the keyboard shortcuts (undo/redo and copy buttons) are disabled. The default value is false. |
|
|
728
729
|
| `disabled` | `boolean` | No | `false` | Disables user interaction. Toggles input interactability and opacity |
|
|
729
730
|
| `disabledDateError` | `string` | No | `'Date unavailable'` | Tooltip content shown when hovering or focusing a disabled date, including dates before the minDate or after the maxDate. |
|
|
730
731
|
| `disabledDates` | `(Date \| [Date, Date])[]` | No | `-` | Array of disabled dates, and date tuples for date ranges. Make sure to set disabledDateError as well. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges. |
|
|
731
732
|
| `editable` | `boolean` | No | `-` | If false, text is not editable. The default value is true. |
|
|
732
733
|
| `enableColorSurge` | `boolean` | No | `-` | Enable Color Surge motion |
|
|
733
734
|
| `enablesReturnKeyAutomatically` | `boolean` | No | `-` | If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. |
|
|
734
|
-
| `end` | `null \| string \| number \| false \| true \| ReactElement<
|
|
735
|
+
| `end` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
|
|
735
736
|
| `enterKeyHint` | `search \| done \| go \| next \| send \| previous \| enter` | No | `-` | Determines what text should be shown to the return key on virtual keyboards. Has precedence over the returnKeyType prop. |
|
|
736
737
|
| `focusedBorderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `borderWidth` | Additional border width when focused. |
|
|
737
738
|
| `font` | `display1 \| display2 \| display3 \| title1 \| title2 \| title3 \| title4 \| headline \| body \| label1 \| label2 \| caption \| legal` | No | `body` | Typography font token for the field (passed through to NativeInput as font), same token family as align. |
|
|
738
|
-
| `height` | `
|
|
739
|
-
| `helperText` | `null \| string \| number \| false \| true \| ReactElement<
|
|
739
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | Height of input |
|
|
740
|
+
| `helperText` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | For cases where label is not enough information to describe what the text input is for. Can also be used for showing positive/negative messages |
|
|
740
741
|
| `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |
|
|
741
742
|
| `highlightedDateAccessibilityHint` | `string` | No | `'Highlighted'` | Accessibility hint announced for highlighted dates. Applied to all highlighted dates. |
|
|
742
743
|
| `highlightedDates` | `(Date \| [Date, Date])[]` | No | `-` | Array of highlighted dates, and date tuples for date ranges. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges. |
|
|
743
744
|
| `importantForAutofill` | `auto \| yes \| no \| noExcludeDescendants \| yesExcludeDescendants` | No | `-` | Determines whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Defaults to auto. To disable auto complete, use off. *Android Only* The following values work on Android only: - auto - let Android decide - no - not important for autofill - noExcludeDescendants - this view and its children arent important for autofill - yes - is important for autofill - yesExcludeDescendants - this view is important for autofill but its children arent |
|
|
744
745
|
| `inlineImageLeft` | `string` | No | `-` | If defined, the provided image resource will be rendered on the left. |
|
|
745
746
|
| `inlineImagePadding` | `number` | No | `-` | Padding between the inline image, if any, and the text input itself. |
|
|
747
|
+
| `inputAccessoryViewButtonLabel` | `string` | No | `-` | An optional label that overrides the default input accessory view button label. |
|
|
746
748
|
| `inputAccessoryViewID` | `string` | No | `-` | Used to connect to an InputAccessoryView. Not part of react-natives documentation, but present in examples and code. See https://reactnative.dev/docs/inputaccessoryview for more information. |
|
|
747
749
|
| `inputBackground` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `'bg'` | Background color of the input |
|
|
748
750
|
| `inputMode` | `search \| none \| text \| email \| tel \| url \| numeric \| decimal` | No | `-` | Works like the inputmode attribute in HTML, it determines which keyboard to open, e.g. numeric and has precedence over keyboardType. |
|
|
@@ -751,27 +753,28 @@ function Example() {
|
|
|
751
753
|
| `keyboardAppearance` | `light \| default \| dark` | No | `-` | Determines the color of the keyboard. |
|
|
752
754
|
| `keyboardType` | `default \| url \| number-pad \| decimal-pad \| numeric \| email-address \| phone-pad \| visible-password \| ascii-capable \| numbers-and-punctuation \| name-phone-pad \| twitter \| web-search` | No | `-` | enum(default, numeric, email-address, ascii-capable, numbers-and-punctuation, url, number-pad, phone-pad, name-phone-pad, decimal-pad, twitter, web-search, visible-password) Determines which keyboard to open, e.g.numeric. The following values work across platforms: - default - numeric - email-address - phone-pad The following values work on iOS: - ascii-capable - numbers-and-punctuation - url - number-pad - name-phone-pad - decimal-pad - twitter - web-search The following values work on Android: - visible-password |
|
|
753
755
|
| `label` | `string` | No | `-` | Short messageArea indicating purpose of input |
|
|
754
|
-
| `labelNode` | `null \| string \| number \| false \| true \| ReactElement<
|
|
756
|
+
| `labelNode` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | React node to render label. Takes precedence over label. |
|
|
755
757
|
| `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
|
|
758
|
+
| `lineBreakModeIOS` | `middle \| wordWrapping \| char \| clip \| head \| tail` | No | `-` | Set line break mode on iOS. |
|
|
756
759
|
| `lineBreakStrategyIOS` | `none \| standard \| hangul-word \| push-out` | No | `-` | Set line break strategy on iOS. |
|
|
757
760
|
| `maxDate` | `Date` | No | `-` | Maximum date allowed to be selected, inclusive. Dates after the maxDate are disabled. All navigation to months after the maxDate is disabled. |
|
|
758
761
|
| `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 |
|
|
759
762
|
| `maxLength` | `number` | No | `-` | Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. |
|
|
760
763
|
| `minDate` | `Date` | No | `-` | Minimum date allowed to be selected, inclusive. Dates before the minDate are disabled. All navigation to months before the minDate is disabled. |
|
|
761
|
-
| `minHeight` | `
|
|
764
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `auto` | minimum height of input |
|
|
762
765
|
| `multiline` | `boolean` | No | `-` | If true, the text input can be multiple lines. The default value is false. |
|
|
763
766
|
| `nextArrowAccessibilityLabel` | `string` | No | `'Go to next month'` | Accessibility label describing the Calendar next month arrow. |
|
|
764
767
|
| `numberOfLines` | `number` | No | `-` | Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines. |
|
|
765
|
-
| `onBlur` | `((e:
|
|
768
|
+
| `onBlur` | `((e: BlurEvent) => void)` | No | `-` | Callback that is called when the text input is blurred Note: If you are trying to find the last value of TextInput, you can use the onEndEditing event, which is fired upon completion of editing. |
|
|
766
769
|
| `onCancel` | `(() => void)` | No | `-` | Callback function fired when the user closes the picker without selecting a date. Interacting with the DateInput does not fire this callback. Will always be called before onClose. |
|
|
767
|
-
| `onChange` | `(((e:
|
|
770
|
+
| `onChange` | `(((e: TextInputChangeEvent) => void) & ((event: NativeSyntheticEvent<TextInputChangeEventData>) => void))` | No | `-` | Callback function fired when the DateInput text value changes. Prefer to use onChangeDate instead. Will always be called before onChangeDate. This prop should only be used for edge cases, such as custom error handling. |
|
|
768
771
|
| `onChangeText` | `((text: string) => void)` | No | `-` | - |
|
|
769
772
|
| `onClose` | `(() => void)` | No | `-` | Callback function fired when the picker is closed. Will always be called after onCancel, onConfirm, and onChangeDate. |
|
|
770
773
|
| `onConfirm` | `(() => void)` | No | `-` | Callback function fired when the user selects a date using the picker. Interacting with the DateInput does not fire this callback. Will always be called before onClose. |
|
|
771
|
-
| `onContentSizeChange` | `((e:
|
|
772
|
-
| `onEndEditing` | `((e:
|
|
773
|
-
| `onFocus` | `((e:
|
|
774
|
-
| `onKeyPress` | `((e:
|
|
774
|
+
| `onContentSizeChange` | `((e: TextInputContentSizeChangeEvent) => void)` | No | `-` | Callback that is called when the text inputs content size changes. This will be called with { nativeEvent: { contentSize: { width, height } } }. Only called for multiline text inputs. |
|
|
775
|
+
| `onEndEditing` | `((e: TextInputEndEditingEvent) => void)` | No | `-` | Callback that is called when text input ends. |
|
|
776
|
+
| `onFocus` | `((e: FocusEvent) => void)` | No | `-` | Callback that is called when the text input is focused |
|
|
777
|
+
| `onKeyPress` | `((e: TextInputKeyPressEvent) => void)` | No | `-` | Callback that is called when a key is pressed. This will be called with { nativeEvent: { key: keyValue } } where keyValue is Enter or Backspace for respective keys and the typed-in character otherwise including for space. Fires before onChange callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs. |
|
|
775
778
|
| `onOpen` | `(() => void)` | No | `-` | Callback function fired when the picker is opened. |
|
|
776
779
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
777
780
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -788,22 +791,21 @@ function Example() {
|
|
|
788
791
|
| `onPress` | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void)` | No | `-` | Called when a single tap gesture is detected. |
|
|
789
792
|
| `onPressIn` | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void)` | No | `-` | Callback that is called when a touch is engaged. |
|
|
790
793
|
| `onPressOut` | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void)` | No | `-` | Callback that is called when a touch is released. |
|
|
791
|
-
| `onScroll` | `((e:
|
|
792
|
-
| `onSelectionChange` | `((e:
|
|
793
|
-
| `onSubmitEditing` | `((e:
|
|
794
|
-
| `onTextInput` | `((e: NativeSyntheticEvent<TextInputTextInputEventData>) => void)` | No | `-` | Callback that is called on new text input with the argument { nativeEvent: { text, previousText, range: { start, end } } }. This prop requires multiline={true} to be set. |
|
|
794
|
+
| `onScroll` | `((e: TextInputScrollEvent) => void)` | No | `-` | Invoked on content scroll with { nativeEvent: { contentOffset: { x, y } } }. May also contain other properties from ScrollEvent but on Android contentSize is not provided for performance reasons. |
|
|
795
|
+
| `onSelectionChange` | `((e: TextInputSelectionChangeEvent) => void)` | No | `-` | Callback that is called when the text input selection is changed. |
|
|
796
|
+
| `onSubmitEditing` | `((e: TextInputSubmitEditingEvent) => void)` | No | `-` | Callback that is called when the text inputs submit button is pressed. |
|
|
795
797
|
| `openCalendarAccessibilityLabel` | `string` | No | `'Open calendar'` | Accessibility label for the calendar IconButton, which opens the calendar when pressed. |
|
|
796
798
|
| `passwordRules` | `string \| null` | No | `-` | Provide rules for your password. For example, say you want to require a password with at least eight characters consisting of a mix of uppercase and lowercase letters, at least one number, and at most two consecutive characters. required: upper; required: lower; required: digit; max-consecutive: 2; minlength: 8; |
|
|
797
799
|
| `placeholder` | `string` | No | `-` | Placeholder text displayed inside of the input. Will be replaced if there is a value. The string that will be rendered before text input has been entered |
|
|
798
800
|
| `placeholderTextColor` | `string \| OpaqueColorValue` | No | `-` | The text color of the placeholder string |
|
|
799
801
|
| `previousArrowAccessibilityLabel` | `string` | No | `'Go to previous month'` | Accessibility label describing the Calendar previous month arrow. |
|
|
800
802
|
| `readOnly` | `boolean` | No | `-` | If true, text is not editable. The default value is false. |
|
|
801
|
-
| `ref` | `(
|
|
803
|
+
| `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
|
|
802
804
|
| `rejectResponderTermination` | `boolean \| null` | No | `-` | If true, allows TextInput to pass touch events to the parent component. This allows components to be swipeable from the TextInput on iOS, as is the case on Android by default. If false, TextInput always asks to handle the input (except when disabled). |
|
|
803
805
|
| `required` | `boolean` | No | `-` | If required, the requiredError will be displayed if a user blurs the input, without a date selected, after having typed into it. |
|
|
804
806
|
| `requiredError` | `string` | No | `'This field is required'` | Error text to display when required is true and a user blurs the input without a date selected, after having typed into it. |
|
|
805
807
|
| `returnKeyLabel` | `string` | No | `-` | Sets the return key to the label. Use it instead of returnKeyType. |
|
|
806
|
-
| `returnKeyType` | `
|
|
808
|
+
| `returnKeyType` | `join \| search \| done \| none \| default \| go \| next \| send \| previous \| google \| route \| yahoo \| emergency-call` | No | `-` | enum(default, go, google, join, next, route, search, send, yahoo, done, emergency-call) Determines how the return key should look. |
|
|
807
809
|
| `scrollEnabled` | `boolean` | No | `-` | If false, scrolling of the text view will be disabled. The default value is true. Only works with multiline={true} |
|
|
808
810
|
| `secureTextEntry` | `boolean` | No | `-` | If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. |
|
|
809
811
|
| `seedDate` | `Date` | No | `-` | Date used to generate the Calendar month when there is no value for the selectedDate prop, defaults to today. |
|
|
@@ -815,18 +817,19 @@ function Example() {
|
|
|
815
817
|
| `showSoftInputOnFocus` | `boolean` | No | `-` | When false, it will prevent the soft keyboard from showing when the field is focused. The default value is true |
|
|
816
818
|
| `smartInsertDelete` | `boolean` | No | `-` | If false, the iOS system will not insert an extra space after a paste operation neither delete one or two spaces after a cut or delete operation. The default value is true. |
|
|
817
819
|
| `spellCheck` | `boolean` | No | `-` | If false, disables spell-check style (i.e. red underlines). The default value is inherited from autoCorrect |
|
|
818
|
-
| `start` | `null \| string \| number \| false \| true \| ReactElement<
|
|
820
|
+
| `start` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component |
|
|
819
821
|
| `styles` | `{ dateInput?: StyleProp<ViewStyle>; calendar?: StyleProp<ViewStyle>; calendarHeader?: StyleProp<ViewStyle>; calendarTitle?: StyleProp<TextStyle>; calendarNavigation?: StyleProp<ViewStyle>; calendarContent?: StyleProp<ViewStyle>; calendarDay?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for the DateInput and Calendar subcomponents. |
|
|
822
|
+
| `submitBehavior` | `submit \| blurAndSubmit \| newline` | No | `-` | When the return key is pressed, For single line inputs: - newline defaults to blurAndSubmit - undefined defaults to blurAndSubmit For multiline inputs: - newline adds a newline - undefined defaults to newline For both single line and multiline inputs: - submit will only send a submit event and not blur the input - blurAndSubmit will both blur the input and send a submit event |
|
|
820
823
|
| `suffix` | `string` | No | `-` | Adds suffix text to the end of input |
|
|
821
824
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID Used to locate this view in end-to-end tests |
|
|
822
825
|
| `testIDMap` | `{ start?: string; end?: string \| undefined; label?: string \| undefined; helperText?: string \| undefined; } \| undefined` | No | `-` | Add ability to test individual parts of the input |
|
|
823
826
|
| `textAlign` | `left \| right \| center \| unset` | No | `-` | Native TextInput textAlign with the extra unset option to remove the textAlign style. Use this to workaround the issue where long text does not ellipsis in TextInput |
|
|
824
827
|
| `textAlignVertical` | `top \| bottom \| auto \| center` | No | `-` | Vertically align text when multiline is set to true |
|
|
825
828
|
| `textBreakStrategy` | `simple \| highQuality \| balanced` | No | `-` | Set text break strategy on Android API Level 23+, possible values are simple, highQuality, balanced The default value is simple. |
|
|
826
|
-
| `textContentType` | `none \| location \| name \| nickname \| password \| username \| URL \| addressCity \| addressCityAndState \| addressState \| countryName \| creditCardNumber \| creditCardExpiration \| creditCardExpirationMonth \| creditCardExpirationYear \| creditCardSecurityCode \| creditCardType \| creditCardName \| creditCardGivenName \| creditCardMiddleName \| creditCardFamilyName \| emailAddress \| familyName \| fullStreetAddress \| givenName \| jobTitle \| middleName \| namePrefix \| nameSuffix \| organizationName \| postalCode \| streetAddressLine1 \| streetAddressLine2 \| sublocality \| telephoneNumber \| newPassword \| oneTimeCode \| birthdate \| birthdateDay \| birthdateMonth \| birthdateYear` | No | `-` | Give the keyboard and the system information about the expected semantic meaning for the content that users enter. To disable autofill, set textContentType to none. Possible values for textContentType are: - none - URL - addressCity - addressCityAndState - addressState - countryName - creditCardNumber - creditCardExpiration (iOS 17+) - creditCardExpirationMonth (iOS 17+) - creditCardExpirationYear (iOS 17+) - creditCardSecurityCode (iOS 17+) - creditCardType (iOS 17+) - creditCardName (iOS 17+) - creditCardGivenName (iOS 17+) - creditCardMiddleName (iOS 17+) - creditCardFamilyName (iOS 17+) - emailAddress - familyName - fullStreetAddress - givenName - jobTitle - location - middleName - name - namePrefix - nameSuffix - nickname - organizationName - postalCode - streetAddressLine1 - streetAddressLine2 - sublocality - telephoneNumber - username - password - newPassword - oneTimeCode - birthdate (iOS 17+) - birthdateDay (iOS 17+) - birthdateMonth (iOS 17+) - birthdateYear (iOS 17+) |
|
|
829
|
+
| `textContentType` | `none \| location \| name \| nickname \| password \| username \| flightNumber \| URL \| addressCity \| addressCityAndState \| addressState \| countryName \| creditCardNumber \| creditCardExpiration \| creditCardExpirationMonth \| creditCardExpirationYear \| creditCardSecurityCode \| creditCardType \| creditCardName \| creditCardGivenName \| creditCardMiddleName \| creditCardFamilyName \| emailAddress \| familyName \| fullStreetAddress \| givenName \| jobTitle \| middleName \| namePrefix \| nameSuffix \| organizationName \| postalCode \| streetAddressLine1 \| streetAddressLine2 \| sublocality \| telephoneNumber \| newPassword \| oneTimeCode \| birthdate \| birthdateDay \| birthdateMonth \| birthdateYear \| cellularEID \| cellularIMEI \| dateTime \| shipmentTrackingNumber` | No | `-` | Give the keyboard and the system information about the expected semantic meaning for the content that users enter. To disable autofill, set textContentType to none. Possible values for textContentType are: - none - URL - addressCity - addressCityAndState - addressState - countryName - creditCardNumber - creditCardExpiration (iOS 17+) - creditCardExpirationMonth (iOS 17+) - creditCardExpirationYear (iOS 17+) - creditCardSecurityCode (iOS 17+) - creditCardType (iOS 17+) - creditCardName (iOS 17+) - creditCardGivenName (iOS 17+) - creditCardMiddleName (iOS 17+) - creditCardFamilyName (iOS 17+) - emailAddress - familyName - fullStreetAddress - givenName - jobTitle - location - middleName - name - namePrefix - nameSuffix - nickname - organizationName - postalCode - streetAddressLine1 - streetAddressLine2 - sublocality - telephoneNumber - username - password - newPassword - oneTimeCode - birthdate (iOS 17+) - birthdateDay (iOS 17+) - birthdateMonth (iOS 17+) - birthdateYear (iOS 17+) - cellularEID (iOS 17.4+) - cellularIMEI (iOS 17.4+) - dateTime (iOS 15+) - flightNumber (iOS 15+) - shipmentTrackingNumber (iOS 15+) |
|
|
827
830
|
| `underlineColorAndroid` | `string \| OpaqueColorValue` | No | `-` | The color of the textInput underline. |
|
|
828
831
|
| `variant` | `primary \| secondary \| positive \| negative \| foregroundMuted \| foreground` | No | `-` | Determines the sentiment of the input. Because we allow startContent and endContent to be custom ReactNode, the content placed inside these slots will not change colors according to the variant. You will have to add that yourself |
|
|
829
832
|
| `verticalAlign` | `top \| bottom \| auto \| middle` | No | `-` | Vertically align text when multiline is set to true |
|
|
830
|
-
| `width` | `
|
|
833
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `100%` | Width of input as a percentage string. |
|
|
831
834
|
|
|
832
835
|
|