Optional alignContent alignment through the element axis
Example:
<alignContent="center" />
Optional alignItem alignment through the element axis
Example:
<alignItems="center" />
Optional alignSelf alignment through the element axis
Example:
<alignSelf="center" />
Optional backgroundbackgroundAttachment defines how a background image behaves in relation to the scrolling of content on the page.
The option for attaching the background image.
Example:
<backgroundAttachment="scrooll" />
Optional backgroundDefines how background layers blend with each other. It applies blending effects between multiple background images, gradients, or colors within the same element.
Example:
<View backgroundBlendMode="multiply" />
Optional backgroundThe background clip area.
Example:
<backgroundClip="border-box" />
Optional backgroundBackground color of component
Check the token table to know which values to use
Example:
<backgroundColor="background-color" />
Optional backgroundChange the background Image
Example:
<backgroundImage="myBoxShadow" />
Optional backgroundSets the origin of background positioning
Example:
<backgroundOrigin="border-box" />
Optional backgroundThe position of background
Example:
<backgroundPosition="center" />
Optional backgroundThe horizontal position of background
Example:
<backgroundPositionX="center" />
Optional backgroundThe vertical position of background
Example:
<backgroundPositionY="center" />
Optional backgroundAllows background repetition
Example:
<backgroundRepeat="repeat" />
Optional backgroundSets the background sizing
Example:
<backgroundSize="cover" />
Optional basisControls grow and shrink in one index
Example:
<basis={1} />
Optional borderborderColor sets the color of borders in the design system, allowing you to control the visual appearance of elements' outlines.
Check the token table to know which values to use
Example:
<borderColor="neutral-900" />
Optional borderDefines the border style of a component. You need to define borderWidth before use this property.
Example:
<View borderWidth="hairline" borderStyle="dashed" />
Optional borderborderBottomWidth focuses on adjusting the thickness of the bottom border in the design system, allowing you to fine-tune the visual appearance of the bottom border for elements.
Check the token table to know which values to use
Example:
<borderBottomWidth="hairline" />
Optional borderBorder Color of component
Check the token table to know which values to use
Example:
<borderColor="neutral-900" />
Optional borderDefines the border style of a component. You need to define borderWidth before use this property.
Example:
<View borderWidth="hairline" borderStyle="dashed" />
Optional borderborderBottomWidth is used to control the thickness of the bottom border in the design system, giving you control over the visual appearance of the bottom edges of elements.
Check the token table to know which values to use
Example:
<borderBottomWidth="hairline" />
Optional borderborderRadius defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.
Check the token table to know which values to use
Example:
<borderRadius="micro" />
Optional borderborderRadiusLeftBottom defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.
Check the token table to know which values to use
Example:
<borderRadiusLeftBottom="micro" />
Optional borderborderRadiusLeftTop defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.
Check the token table to know which values to use
Example:
<borderRadiusLeftTop="micro" />
Optional borderborderRadiusRightBottom defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.
Check the token table to know which values to use
Example:
<borderRadiusRightBottom="micro" />
Optional borderborderRadiusRightTop defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.
Check the token table to know which values to use
Example:
<borderRadiusRightTop="micro" />
Optional borderDefines the border style of a component. You need to define borderWidth before use this property.
Example:
<View borderWidth="hairline" borderStyle="dashed" />
Optional borderborderRightWidth is used to control the thickness of the right border in the design system, giving you control over the visual appearance of the right edges of elements.
Check the token table to know which values to use
Example:
<borderRightWidth="hairline" />
Optional borderDefines the border style of a component. You need to define borderWidth before use this property.
Example:
<View borderWidth="hairline" borderStyle="dashed" />
Optional borderDefines the border style of a component. You need to define borderWidth before use this property.
Example:
<View borderWidth="hairline" borderStyle="dashed" />
Optional borderborderTopWidth specifically adjusts the thickness of the top border in the design system, giving you precise control over the visual aspect of the top border of elements.
Check the token table to know which values to use
Example:
<borderTopWidth="hairline" />
Optional borderThe borderWidth determines the thickness of borders in the design system.
It's a crucial property for defining the visual weight of elements.
Check the token table to know which values to use
Example:
<borderWidth="hairline" />
Optional bottomA distance from the bottom.
Example:
<bottom={20} />
Optional bottomIt makes the element have the exact size of the bottom bar of the phone (which contains the gesture bar) to separate the content above it.
Example:
<View bottomInset={true}>
Optional boxEfeito de sombra
Example:
<boxShadow="myBoxShadow" />
Optional colorText color of components
Check the token table to know which values to use
Example:
<color="neutral-900" />
Optional containerRoot element ref of the component
Optional content"Use contrast colors for text and background"
Example:
<View contentColors backgroundColor="primary-500" />
Optional customThis property is used to specify a color, whether in hexadecimal or RGB format.
Example:
<View customColor="#d844ec">
<Text>View com background em hexadecimal</Text>
<Input />
</View>
Optional directionDirection of the FlexBox axis
Example:
<direction="row" />
Optional displayChanges the element exhibition
Example:
<display="flex"/>
Optional elevationAdjust elevation of component
Example:
<View elevation="low" ></View>
Optional filterSets a filter to image render.
Example:
<Image filter="sepia(60%)" />
Optional flexAnnulate flex properties
Example:
<flexNone={true} />
Optional flexActivate content wrapping
Example:
<flexWrap="wrap" />
Optional gapChanges the gap between elements
Example:
<gap={1} />
Optional growGrowth ratio of element
Example:
<grow={1} />
Optional heightAdjust component height
Example:
<height={100} />
Optional id"Fills the ID of the element (not very practical)."
Example:
<View id="id" />
Optional justifyContent distribution through the element axis
Example:
<justifyContent="center" />
Optional justifyItem distribution through the element axis
Example:
<JustifyItems="center" />
Optional justifySelf distribution through the element axis
Example:
<justifySelf="center" />
Optional leftA distance from the left.
Example:
<left={20} />
Optional marginGeneral margin size
Check the token table to know which values to use
Example:
<margin="quark" />
Optional marginBottom margin size
Check the token table to know which values to use
Example:
<marginBottom="quark" />
Optional marginHorizontal (left and right) margin size
Check the token table to know which values to use
Example:
<marginHorizontal="quark" />
Optional marginLeft margin size
Check the token table to know which values to use
Example:
<marginLeft="quark" />
Optional marginRight margin size
Check the token table to know which values to use
Example:
<marginRight="quark" />
Optional marginTop margin size
Check the token table to know which values to use
Example:
<marginTop="quark" />
Optional marginVertical (top and bottom) margin size
Check the token table to know which values to use
Example:
<marginVertical="quark" />
Optional maxAdjust component maximum height
Example:
<maxHeight={100} />
Optional maxAdjust component maximum width
Example:
<maxwidth={100} />
Optional minAdjust component minimum height
Example:
<minHeight={100} />
Optional minAdjust component minimum width
Example:
<minWidth={100} />
Optional mixDetermines how an element’s content blends with the background or elements behind it. It affects the entire element, including text and images, and creates effects similar to those in graphic design software.
Example:
<View mixBlendMode="screen" />
Optional modeSetup a skeleton on this view
Example:
<View mode="skeleton" width={50} height={50} />
Optional objectSets the object fit
Example:
<objectFit="cover" />
Optional onCallback function to be executed when the user scrolls the view
The function receives an object by argument with the following properties:
onViewport: boolean, indicates if the element is in the viewportExample:
<View onScroll={(e) => console.log(e)} />
Optional opacityChanges the element opacity
Example:
<opacity="light" />
Optional orderChanges the order of elements
Example:
<order="center" />
Optional overflowThe overall overflow behavior.
Example:
<overflow="hidden" />
Optional overflowXThe horizontal overflow behavior.
Example:
<overflowX="hidden" />
Optional overflowYThe vertical overflow behavior.
Example:
<overflowY="hidden" />
Optional paddingGeneral padding size
Check the token table to know which values to use
Example:
<padding="quark" />
Optional paddingBottom padding size
Check the token table to know which values to use
Example:
<paddingBottom="quark" />
Optional paddingHorizontal (left and right) padding size
Check the token table to know which values to use
Example:
<paddingHorizontal="quark" />
Optional paddingLeft padding size
Check the token table to know which values to use
Example:
<paddingLeft="quark" />
Optional paddingRight padding size
Check the token table to know which values to use
Example:
<paddingRight="quark" />
Optional paddingTop padding size
Check the token table to know which values to use
Example:
<paddingTop="quark" />
Optional paddingVertical (top and bottom) padding size
Check the token table to know which values to use
Example:
<paddingVertical="quark" />
Optional positionThe element positioning.
Example:
<position="relative" />
Optional rightA distance from the right.
Example:
<right={20} />
Optional scrollSets the behavior for a scrolling box when scrolling is triggered by the navigation.
Optional scrollSets the scroll margin.
Optional scrollSets the scroll margin on the block.
Optional scrollSets the scroll margin at the end of the block.
Optional scrollSets the scroll margin at the start of the block.
Optional scrollSets the scroll margin at the bottom.
Optional scrollSets the scroll margin on the inline.
Optional scrollSets the scroll margin at the end of the inline.
Optional scrollSets the scroll margin at the start of the inline.
Optional scrollSets the scroll margin on the left.
Optional scrollSets the scroll margin on the right.
Optional scrollSets the scroll margin at the top.
Optional scrollSets the scroll padding.
Optional scrollSets the scroll padding on the block.
Optional scrollSets the scroll padding at the end of the block.
Optional scrollSets the scroll padding at the start of the block.
Optional scrollSets the scroll padding at the bottom.
Optional scrollSets the scroll padding on the inline.
Optional scrollSets the scroll padding at the end of the inline.
Optional scrollSets the scroll padding at the start of the inline.
Optional scrollSets the scroll padding on the left.
Optional scrollSets the scroll padding on the right.
Optional scrollSets the scroll padding at the top.
Optional scrollSets the alignment of scroll snap.
Optional scrollSets the scroll snap to stop normally or always.
Optional scrollSets the type of scroll snap.
Optional sendThis option should be used when there is a form component; it triggers focus on the contained form component when you touch the entire element.
Example:
<View sendFocusToInput>
<Text>Acima de um input</Text>
<Input />
</View>
Optional showThis property controls the display of scrollbars.
<View showScrollbars>
</View>
Optional shrinkShrink ratio of element
Example:
<shrink={1} />
Optional topA distance from the top.
Example:
<top={20} />
Optional topIt makes the element have the exact size of the top bar of the phone (which contains the camera, clock, and notifications) to separate the content below it.
Example:
<View topInset={true}>
Optional transform"Prepare a position transforming of element"
Example:
<View transform="rotate(45deg)" />
Optional transition"Prepare a transition of visual state change"
Example:
<View transition="background-color 0.5s ease-in-out" />
Optional visibilityChanges the element visibility
Example:
<visibility="visible" />
Optional visual"Determines the visual state of the component and its children."
Example:
<View visualState="success" />
Optional widthAdjust component width
Example:
<width={100} />
Optional zValue of z-index
Example:
<zIndex={1} />
Accepted values for View Component.
Here's an example using some of the properties: