@coinbase/cds-mcp-server 9.0.0-rc.1 → 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 +4 -0
- package/mcp-docs/mobile/components/Alert.txt +1 -1
- package/mcp-docs/mobile/components/AreaChart.txt +13 -13
- package/mcp-docs/mobile/components/Avatar.txt +13 -13
- package/mcp-docs/mobile/components/AvatarButton.txt +14 -14
- package/mcp-docs/mobile/components/Banner.txt +14 -14
- package/mcp-docs/mobile/components/BarChart.txt +13 -13
- package/mcp-docs/mobile/components/Box.txt +13 -13
- package/mcp-docs/mobile/components/BrowserBar.txt +13 -13
- package/mcp-docs/mobile/components/Button.txt +16 -16
- package/mcp-docs/mobile/components/Calendar.txt +13 -13
- package/mcp-docs/mobile/components/Carousel.txt +13 -13
- package/mcp-docs/mobile/components/CartesianChart.txt +13 -13
- package/mcp-docs/mobile/components/CellMedia.txt +2 -2
- package/mcp-docs/mobile/components/CheckboxCell.txt +14 -14
- package/mcp-docs/mobile/components/Chip.txt +14 -14
- package/mcp-docs/mobile/components/Coachmark.txt +13 -13
- package/mcp-docs/mobile/components/ContainedAssetCard.txt +2 -2
- package/mcp-docs/mobile/components/ContentCard.txt +13 -13
- package/mcp-docs/mobile/components/ContentCardBody.txt +13 -13
- package/mcp-docs/mobile/components/ContentCardFooter.txt +13 -13
- package/mcp-docs/mobile/components/ContentCardHeader.txt +13 -13
- package/mcp-docs/mobile/components/ContentCell.txt +14 -14
- package/mcp-docs/mobile/components/ControlGroup.txt +13 -13
- package/mcp-docs/mobile/components/DataCard.txt +14 -14
- package/mcp-docs/mobile/components/DateInput.txt +6 -6
- package/mcp-docs/mobile/components/DatePicker.txt +6 -6
- package/mcp-docs/mobile/components/Divider.txt +13 -13
- package/mcp-docs/mobile/components/DotSymbol.txt +1 -1
- package/mcp-docs/mobile/components/Fallback.txt +12 -12
- package/mcp-docs/mobile/components/HStack.txt +13 -13
- package/mcp-docs/mobile/components/HeroSquare.txt +1 -1
- package/mcp-docs/mobile/components/Icon.txt +1 -1
- package/mcp-docs/mobile/components/IconButton.txt +15 -15
- package/mcp-docs/mobile/components/InputChip.txt +14 -14
- package/mcp-docs/mobile/components/Interactable.txt +13 -13
- package/mcp-docs/mobile/components/Legend.txt +13 -13
- package/mcp-docs/mobile/components/LineChart.txt +13 -13
- package/mcp-docs/mobile/components/Link.txt +15 -15
- package/mcp-docs/mobile/components/ListCell.txt +14 -14
- package/mcp-docs/mobile/components/Lottie.txt +13 -13
- package/mcp-docs/mobile/components/LottieStatusAnimation.txt +2 -2
- package/mcp-docs/mobile/components/MediaCard.txt +14 -14
- package/mcp-docs/mobile/components/MediaChip.txt +14 -14
- package/mcp-docs/mobile/components/MessagingCard.txt +14 -14
- package/mcp-docs/mobile/components/ModalFooter.txt +13 -13
- package/mcp-docs/mobile/components/ModalHeader.txt +13 -13
- package/mcp-docs/mobile/components/MultiContentModule.txt +13 -13
- package/mcp-docs/mobile/components/NavigationTitle.txt +15 -15
- package/mcp-docs/mobile/components/NavigationTitleSelect.txt +15 -15
- package/mcp-docs/mobile/components/NudgeCard.txt +3 -3
- package/mcp-docs/mobile/components/Numpad.txt +14 -14
- package/mcp-docs/mobile/components/Overlay.txt +13 -13
- package/mcp-docs/mobile/components/PageFooter.txt +13 -13
- package/mcp-docs/mobile/components/PageHeader.txt +13 -13
- package/mcp-docs/mobile/components/PercentageBarChart.txt +13 -13
- package/mcp-docs/mobile/components/PeriodSelector.txt +13 -13
- package/mcp-docs/mobile/components/Pictogram.txt +1 -1
- package/mcp-docs/mobile/components/Pressable.txt +14 -14
- package/mcp-docs/mobile/components/RadioCell.txt +14 -14
- package/mcp-docs/mobile/components/RemoteImage.txt +1 -1
- package/mcp-docs/mobile/components/RollingNumber.txt +15 -15
- package/mcp-docs/mobile/components/SearchInput.txt +6 -6
- package/mcp-docs/mobile/components/SegmentedTabs.txt +13 -13
- package/mcp-docs/mobile/components/SelectChip.txt +14 -14
- package/mcp-docs/mobile/components/SelectChipAlpha.txt +1 -1
- package/mcp-docs/mobile/components/SelectOption.txt +1 -1
- package/mcp-docs/mobile/components/SlideButton.txt +13 -13
- package/mcp-docs/mobile/components/SpotIcon.txt +1 -1
- package/mcp-docs/mobile/components/Stepper.txt +13 -13
- package/mcp-docs/mobile/components/TabLabel.txt +15 -15
- package/mcp-docs/mobile/components/TabNavigation.txt +13 -13
- package/mcp-docs/mobile/components/TabbedChips.txt +13 -13
- package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +13 -13
- package/mcp-docs/mobile/components/Tabs.txt +13 -13
- package/mcp-docs/mobile/components/Tag.txt +17 -17
- package/mcp-docs/mobile/components/Text.txt +15 -15
- package/mcp-docs/mobile/components/TextInput.txt +6 -6
- package/mcp-docs/mobile/components/Toast.txt +13 -13
- package/mcp-docs/mobile/components/VStack.txt +13 -13
- package/mcp-docs/web/components/Alert.txt +1 -1
- package/mcp-docs/web/components/Banner.txt +1 -1
- package/mcp-docs/web/components/Button.txt +2 -2
- package/mcp-docs/web/components/CellMedia.txt +1 -1
- package/mcp-docs/web/components/DotSymbol.txt +1 -1
- package/mcp-docs/web/components/FullscreenAlert.txt +1 -1
- package/mcp-docs/web/components/HeroSquare.txt +1 -1
- package/mcp-docs/web/components/Icon.txt +1 -1
- package/mcp-docs/web/components/IconButton.txt +1 -1
- package/mcp-docs/web/components/NudgeCard.txt +1 -1
- package/mcp-docs/web/components/Pictogram.txt +1 -1
- package/mcp-docs/web/components/SpotIcon.txt +1 -1
- package/mcp-docs/web/components/TableCellFallback.txt +2 -2
- package/mcp-docs/web/components/Tag.txt +2 -2
- package/mcp-docs/web/components/TileButton.txt +1 -1
- package/package.json +1 -1
|
@@ -60,9 +60,9 @@ Used for displaying pictographic illustrations with accessibility hints.
|
|
|
60
60
|
| Prop | Type | Required | Default | Description |
|
|
61
61
|
| --- | --- | --- | --- | --- |
|
|
62
62
|
| `illustration` | `ReactElement<PictogramBaseProps, string \| JSXElementConstructor<any>>` | Yes | `-` | - |
|
|
63
|
-
| `name` | `filter \| search \| key \| pin \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \|
|
|
63
|
+
| `name` | `filter \| search \| key \| pin \| visible \| continuous \| auto \| column \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseLock \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretCollapse \| caretDown \| caretExpand \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| overPredictions \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| underPredictions \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | Yes | `-` | - |
|
|
64
64
|
| `source` | `string \| number` | Yes | `-` | - |
|
|
65
|
-
| `type` | `
|
|
65
|
+
| `type` | `image \| avatar \| icon \| pictogram \| asset` | Yes | `-` | - |
|
|
66
66
|
| `active` | `boolean` | No | `-` | Whether the icon is active |
|
|
67
67
|
| `cache` | `default \| reload \| force-cache \| only-if-cached` | No | `-` | Determines how the requests handles potentially cached responses. Not applicable to type=icon. |
|
|
68
68
|
| `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 | `-` | - |
|
|
@@ -112,7 +112,7 @@ function CustomCheckboxCellExample() {
|
|
|
112
112
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
113
113
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
114
114
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
115
|
-
| `bottom` | `null \| number \|
|
|
115
|
+
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
116
116
|
| `checked` | `boolean` | No | `-` | Set the control to selected/on. |
|
|
117
117
|
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
|
|
118
118
|
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
@@ -126,9 +126,9 @@ function CustomCheckboxCellExample() {
|
|
|
126
126
|
| `disabled` | `boolean` | No | `-` | Disable user interaction. Is the element currently disabled. |
|
|
127
127
|
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
128
128
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Sets the elevation/drop shadow of the control. Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
|
|
129
|
-
| `feedback` | `
|
|
130
|
-
| `flexBasis` | `null \| number \|
|
|
131
|
-
| `flexDirection` | `
|
|
129
|
+
| `feedback` | `none \| normal \| light \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
130
|
+
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
131
|
+
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
132
132
|
| `flexGrow` | `number` | No | `-` | - |
|
|
133
133
|
| `flexShrink` | `number` | No | `-` | - |
|
|
134
134
|
| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
|
|
@@ -137,10 +137,10 @@ function CustomCheckboxCellExample() {
|
|
|
137
137
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
138
138
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
139
139
|
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
140
|
-
| `height` | `null \| number \|
|
|
140
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
141
141
|
| `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
|
|
142
142
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
143
|
-
| `left` | `null \| number \|
|
|
143
|
+
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
144
144
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
145
145
|
| `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. |
|
|
146
146
|
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
@@ -150,10 +150,10 @@ function CustomCheckboxCellExample() {
|
|
|
150
150
|
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
151
151
|
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
152
152
|
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
153
|
-
| `maxHeight` | `null \| number \|
|
|
154
|
-
| `maxWidth` | `null \| number \|
|
|
155
|
-
| `minHeight` | `null \| number \|
|
|
156
|
-
| `minWidth` | `null \| number \|
|
|
153
|
+
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
154
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
155
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
156
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
157
157
|
| `onChange` | `((value: CheckboxValue, checked?: boolean \| undefined) => void) \| undefined` | No | `-` | Toggle control selected state. |
|
|
158
158
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
159
159
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -183,7 +183,7 @@ function CustomCheckboxCellExample() {
|
|
|
183
183
|
| `pressedBorderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
184
184
|
| `readOnly` | `boolean` | No | `-` | Set the control to ready-only. Similar effect as disabled. |
|
|
185
185
|
| `ref` | `null \| (instance: View \| null) => void \| RefObject<View \| null>` | No | `-` | - |
|
|
186
|
-
| `right` | `null \| number \|
|
|
186
|
+
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
187
187
|
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
188
188
|
| `styles` | `{ root?: StyleProp<ViewStyle>; checkboxContainer?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; description?: StyleProp<TextStyle>; }` | No | `-` | - |
|
|
189
189
|
| `testID` | `string` | No | `-` | Used to locate this view in end-to-end tests. Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
@@ -191,13 +191,13 @@ function CustomCheckboxCellExample() {
|
|
|
191
191
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
192
192
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
193
193
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
194
|
-
| `top` | `null \| number \|
|
|
194
|
+
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
195
195
|
| `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 | `-` | - |
|
|
196
196
|
| `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 |
|
|
197
197
|
| `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 |
|
|
198
|
-
| `userSelect` | `
|
|
198
|
+
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
199
199
|
| `value` | `string` | No | `-` | Value of the option. Useful for multiple choice. |
|
|
200
|
-
| `width` | `null \| number \|
|
|
200
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
201
201
|
| `wrapperStyles` | `{ base?: StyleProp<ViewStyle>; pressed?: StyleProp<ViewStyle>; disabled?: StyleProp<ViewStyle>; }` | No | `-` | Apply styles to the outer container. |
|
|
202
202
|
| `zIndex` | `number` | No | `-` | - |
|
|
203
203
|
|
|
@@ -150,7 +150,7 @@ function Example() {
|
|
|
150
150
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
151
151
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
152
152
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
153
|
-
| `bottom` | `null \| number \|
|
|
153
|
+
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
154
154
|
| `children` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | ReactNode placed in the center of the Chip |
|
|
155
155
|
| `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 | `-` | - |
|
|
156
156
|
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
@@ -163,9 +163,9 @@ function Example() {
|
|
|
163
163
|
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
164
164
|
| `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. |
|
|
165
165
|
| `end` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | ReactNode placed after the value |
|
|
166
|
-
| `feedback` | `
|
|
167
|
-
| `flexBasis` | `null \| number \|
|
|
168
|
-
| `flexDirection` | `
|
|
166
|
+
| `feedback` | `none \| normal \| light \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
167
|
+
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
168
|
+
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
169
169
|
| `flexGrow` | `number` | No | `-` | - |
|
|
170
170
|
| `flexShrink` | `number` | No | `-` | - |
|
|
171
171
|
| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
|
|
@@ -174,12 +174,12 @@ function Example() {
|
|
|
174
174
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
175
175
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
176
176
|
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
177
|
-
| `height` | `null \| number \|
|
|
177
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
178
178
|
| `invertColorScheme` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
|
|
179
179
|
| `inverted` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
|
|
180
180
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
181
181
|
| `key` | `Key \| null` | No | `-` | - |
|
|
182
|
-
| `left` | `null \| number \|
|
|
182
|
+
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
183
183
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
184
184
|
| `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. |
|
|
185
185
|
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
@@ -189,10 +189,10 @@ function Example() {
|
|
|
189
189
|
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
190
190
|
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
191
191
|
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
192
|
-
| `maxHeight` | `null \| number \|
|
|
193
|
-
| `maxWidth` | `null \| number \|
|
|
194
|
-
| `minHeight` | `null \| number \|
|
|
195
|
-
| `minWidth` | `null \| number \|
|
|
192
|
+
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
193
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
|
|
194
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
195
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
196
196
|
| `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |
|
|
197
197
|
| `numberOfLines` | `number` | No | `1` | How many lines the text in the chip will be broken into. |
|
|
198
198
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -222,7 +222,7 @@ function Example() {
|
|
|
222
222
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
223
223
|
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
224
224
|
| `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). |
|
|
225
|
-
| `right` | `null \| number \|
|
|
225
|
+
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
226
226
|
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
227
227
|
| `start` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | ReactNode placed before the value |
|
|
228
228
|
| `style` | `null \| false \| \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
|
|
@@ -232,12 +232,12 @@ function Example() {
|
|
|
232
232
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
233
233
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
234
234
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
235
|
-
| `top` | `null \| number \|
|
|
235
|
+
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
236
236
|
| `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 | `-` | - |
|
|
237
237
|
| `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 |
|
|
238
238
|
| `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 |
|
|
239
|
-
| `userSelect` | `
|
|
240
|
-
| `width` | `null \| number \|
|
|
239
|
+
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
240
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
241
241
|
| `wrapperStyles` | `{ base?: StyleProp<ViewStyle>; pressed?: StyleProp<ViewStyle>; disabled?: StyleProp<ViewStyle>; }` | No | `-` | Apply styles to the outer container. |
|
|
242
242
|
| `zIndex` | `number` | No | `-` | - |
|
|
243
243
|
|
|
@@ -82,7 +82,7 @@ import { Coachmark } from '@coinbase/cds-mobile/coachmark/Coachmark'
|
|
|
82
82
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
83
83
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
84
84
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
85
|
-
| `bottom` | `null \| number \|
|
|
85
|
+
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
86
86
|
| `checkbox` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Checkbox component to be rendered below the content |
|
|
87
87
|
| `closeButtonAccessibilityLabel` | `string` | No | `-` | a11y label of the close button |
|
|
88
88
|
| `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 | `-` | - |
|
|
@@ -90,8 +90,8 @@ import { Coachmark } from '@coinbase/cds-mobile/coachmark/Coachmark'
|
|
|
90
90
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
91
91
|
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
92
92
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
|
|
93
|
-
| `flexBasis` | `null \| number \|
|
|
94
|
-
| `flexDirection` | `
|
|
93
|
+
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
94
|
+
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
95
95
|
| `flexGrow` | `number` | No | `-` | - |
|
|
96
96
|
| `flexShrink` | `number` | No | `-` | - |
|
|
97
97
|
| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
|
|
@@ -100,10 +100,10 @@ import { Coachmark } from '@coinbase/cds-mobile/coachmark/Coachmark'
|
|
|
100
100
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
101
101
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
102
102
|
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
103
|
-
| `height` | `null \| number \|
|
|
103
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
104
104
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
105
105
|
| `key` | `Key \| null` | No | `-` | - |
|
|
106
|
-
| `left` | `null \| number \|
|
|
106
|
+
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
107
107
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
108
108
|
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
109
109
|
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
@@ -112,11 +112,11 @@ import { Coachmark } from '@coinbase/cds-mobile/coachmark/Coachmark'
|
|
|
112
112
|
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
113
113
|
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
114
114
|
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
115
|
-
| `maxHeight` | `null \| number \|
|
|
116
|
-
| `maxWidth` | `null \| number \|
|
|
115
|
+
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
116
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
117
117
|
| `media` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Media of the Coachmark |
|
|
118
|
-
| `minHeight` | `null \| number \|
|
|
119
|
-
| `minWidth` | `null \| number \|
|
|
118
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
119
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
120
120
|
| `onClose` | `(() => void)` | No | `-` | Callback function fired when close button is pressed |
|
|
121
121
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
122
122
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -142,7 +142,7 @@ import { Coachmark } from '@coinbase/cds-mobile/coachmark/Coachmark'
|
|
|
142
142
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
143
143
|
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
144
144
|
| `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). |
|
|
145
|
-
| `right` | `null \| number \|
|
|
145
|
+
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
146
146
|
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
147
147
|
| `style` | `false \| \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
|
|
148
148
|
| `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. |
|
|
@@ -150,10 +150,10 @@ import { Coachmark } from '@coinbase/cds-mobile/coachmark/Coachmark'
|
|
|
150
150
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
151
151
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
152
152
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
153
|
-
| `top` | `null \| number \|
|
|
153
|
+
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
154
154
|
| `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 | `-` | - |
|
|
155
|
-
| `userSelect` | `
|
|
156
|
-
| `width` | `null \| number \|
|
|
155
|
+
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
156
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | Desired width of the Coachmark with respect to max width of windowWidth - spacing2 * 2 |
|
|
157
157
|
| `zIndex` | `number` | No | `-` | - |
|
|
158
158
|
|
|
159
159
|
|
|
@@ -126,8 +126,8 @@ function Example() {
|
|
|
126
126
|
| `title` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | Yes | `-` | Text or ReactNode to be displayed in TextHeadline |
|
|
127
127
|
| `children` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Children to be rendered in the card |
|
|
128
128
|
| `description` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Content to be displayed below the title |
|
|
129
|
-
| `maxWidth` | `null \| number \|
|
|
130
|
-
| `minWidth` | `null \| number \|
|
|
129
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
130
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
131
131
|
| `onPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a single tap gesture is detected. |
|
|
132
132
|
| `size` | `s \| l` | No | `'s'` | Variant for card size. Can be small or large. |
|
|
133
133
|
| `subtitle` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Text or ReactNode to be displayed above Title |
|
|
@@ -342,14 +342,14 @@ When customizing card backgrounds, ensure sufficient color contrast between text
|
|
|
342
342
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
343
343
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
344
344
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
345
|
-
| `bottom` | `null \| number \|
|
|
345
|
+
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
346
346
|
| `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 | `-` | - |
|
|
347
347
|
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
348
348
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
349
349
|
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
350
350
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
|
|
351
|
-
| `flexBasis` | `null \| number \|
|
|
352
|
-
| `flexDirection` | `
|
|
351
|
+
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
352
|
+
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
353
353
|
| `flexGrow` | `number` | No | `-` | - |
|
|
354
354
|
| `flexShrink` | `number` | No | `-` | - |
|
|
355
355
|
| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
|
|
@@ -358,10 +358,10 @@ When customizing card backgrounds, ensure sufficient color contrast between text
|
|
|
358
358
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
359
359
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
360
360
|
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
361
|
-
| `height` | `null \| number \|
|
|
361
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
362
362
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
363
363
|
| `key` | `Key \| null` | No | `-` | - |
|
|
364
|
-
| `left` | `null \| number \|
|
|
364
|
+
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
365
365
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
366
366
|
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
367
367
|
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
@@ -370,10 +370,10 @@ When customizing card backgrounds, ensure sufficient color contrast between text
|
|
|
370
370
|
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
371
371
|
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
372
372
|
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
373
|
-
| `maxHeight` | `null \| number \|
|
|
374
|
-
| `maxWidth` | `null \| number \|
|
|
375
|
-
| `minHeight` | `null \| number \|
|
|
376
|
-
| `minWidth` | `null \| number \|
|
|
373
|
+
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
374
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
375
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
376
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
377
377
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
378
378
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
379
379
|
| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -398,7 +398,7 @@ When customizing card backgrounds, ensure sufficient color contrast between text
|
|
|
398
398
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
399
399
|
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
400
400
|
| `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). |
|
|
401
|
-
| `right` | `null \| number \|
|
|
401
|
+
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
402
402
|
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
403
403
|
| `style` | `false \| \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
|
|
404
404
|
| `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. |
|
|
@@ -406,10 +406,10 @@ When customizing card backgrounds, ensure sufficient color contrast between text
|
|
|
406
406
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
407
407
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
408
408
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
409
|
-
| `top` | `null \| number \|
|
|
409
|
+
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
410
410
|
| `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 | `-` | - |
|
|
411
|
-
| `userSelect` | `
|
|
412
|
-
| `width` | `null \| number \|
|
|
411
|
+
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
412
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
413
413
|
| `zIndex` | `number` | No | `-` | - |
|
|
414
414
|
|
|
415
415
|
|
|
@@ -164,7 +164,7 @@ function Example() {
|
|
|
164
164
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
165
165
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
166
166
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
167
|
-
| `bottom` | `null \| number \|
|
|
167
|
+
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
168
168
|
| `children` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Custom content to display below the main content box (title/description/media). Use this when you need to render custom content that doesnt fit the standard media/title/description layout. |
|
|
169
169
|
| `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 | `-` | - |
|
|
170
170
|
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
@@ -172,8 +172,8 @@ function Example() {
|
|
|
172
172
|
| `description` | `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 description. Use a Text component to override default color and font. |
|
|
173
173
|
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
174
174
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
|
|
175
|
-
| `flexBasis` | `null \| number \|
|
|
176
|
-
| `flexDirection` | `
|
|
175
|
+
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
176
|
+
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
177
177
|
| `flexGrow` | `number` | No | `-` | - |
|
|
178
178
|
| `flexShrink` | `number` | No | `-` | - |
|
|
179
179
|
| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
|
|
@@ -182,11 +182,11 @@ function Example() {
|
|
|
182
182
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
183
183
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
184
184
|
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
185
|
-
| `height` | `null \| number \|
|
|
185
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
186
186
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
187
187
|
| `key` | `Key \| null` | No | `-` | - |
|
|
188
188
|
| `label` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | - |
|
|
189
|
-
| `left` | `null \| number \|
|
|
189
|
+
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
190
190
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
191
191
|
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
192
192
|
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
@@ -195,13 +195,13 @@ function Example() {
|
|
|
195
195
|
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
196
196
|
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
197
197
|
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
198
|
-
| `maxHeight` | `null \| number \|
|
|
199
|
-
| `maxWidth` | `null \| number \|
|
|
198
|
+
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
199
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
200
200
|
| `media` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | React node to display as media content (e.g., Image or RemoteImage). |
|
|
201
201
|
| `mediaPlacement` | `top \| bottom \| end \| start` | No | `'top'` | Placement of the media content relative to the text content. |
|
|
202
202
|
| `mediaPosition` | `top \| bottom \| left \| right` | No | `-` | - |
|
|
203
|
-
| `minHeight` | `null \| number \|
|
|
204
|
-
| `minWidth` | `null \| number \|
|
|
203
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
204
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
205
205
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
206
206
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
207
207
|
| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -226,7 +226,7 @@ function Example() {
|
|
|
226
226
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
227
227
|
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
228
228
|
| `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). |
|
|
229
|
-
| `right` | `null \| number \|
|
|
229
|
+
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
230
230
|
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
231
231
|
| `style` | `false \| \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
|
|
232
232
|
| `styles` | `{ root?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; textContainer?: StyleProp<ViewStyle>; mediaContainer?: StyleProp<ViewStyle>; }` | No | `-` | - |
|
|
@@ -236,10 +236,10 @@ function Example() {
|
|
|
236
236
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
237
237
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
238
238
|
| `title` | `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 title. Use a Text component to override default color and font. |
|
|
239
|
-
| `top` | `null \| number \|
|
|
239
|
+
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
240
240
|
| `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 | `-` | - |
|
|
241
|
-
| `userSelect` | `
|
|
242
|
-
| `width` | `null \| number \|
|
|
241
|
+
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
242
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
243
243
|
| `zIndex` | `number` | No | `-` | - |
|
|
244
244
|
|
|
245
245
|
|
|
@@ -118,14 +118,14 @@ function Example() {
|
|
|
118
118
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
119
119
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
120
120
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
121
|
-
| `bottom` | `null \| number \|
|
|
121
|
+
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
122
122
|
| `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 | `-` | - |
|
|
123
123
|
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
124
124
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
125
125
|
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
126
126
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
|
|
127
|
-
| `flexBasis` | `null \| number \|
|
|
128
|
-
| `flexDirection` | `
|
|
127
|
+
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
128
|
+
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
129
129
|
| `flexGrow` | `number` | No | `-` | - |
|
|
130
130
|
| `flexShrink` | `number` | No | `-` | - |
|
|
131
131
|
| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
|
|
@@ -134,10 +134,10 @@ function Example() {
|
|
|
134
134
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
135
135
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
136
136
|
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
137
|
-
| `height` | `null \| number \|
|
|
137
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
138
138
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
139
139
|
| `key` | `Key \| null` | No | `-` | - |
|
|
140
|
-
| `left` | `null \| number \|
|
|
140
|
+
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
141
141
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
142
142
|
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
143
143
|
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
@@ -146,10 +146,10 @@ function Example() {
|
|
|
146
146
|
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
147
147
|
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
148
148
|
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
149
|
-
| `maxHeight` | `null \| number \|
|
|
150
|
-
| `maxWidth` | `null \| number \|
|
|
151
|
-
| `minHeight` | `null \| number \|
|
|
152
|
-
| `minWidth` | `null \| number \|
|
|
149
|
+
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
150
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
151
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
152
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
153
153
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
154
154
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
155
155
|
| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -174,7 +174,7 @@ function Example() {
|
|
|
174
174
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
175
175
|
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
176
176
|
| `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). |
|
|
177
|
-
| `right` | `null \| number \|
|
|
177
|
+
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
178
178
|
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
179
179
|
| `style` | `false \| \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
|
|
180
180
|
| `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. |
|
|
@@ -182,10 +182,10 @@ function Example() {
|
|
|
182
182
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
183
183
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
184
184
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
185
|
-
| `top` | `null \| number \|
|
|
185
|
+
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
186
186
|
| `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 | `-` | - |
|
|
187
|
-
| `userSelect` | `
|
|
188
|
-
| `width` | `null \| number \|
|
|
187
|
+
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
188
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
189
189
|
| `zIndex` | `number` | No | `-` | - |
|
|
190
190
|
|
|
191
191
|
|