Properties

note

All standard React-Native properties still work.

@see https://reactnative.dev/docs/image-style-props#reference
@see https://reactnative.dev/docs/layout-props#reference
@see https://reactnative.dev/docs/shadow-props#reference
@see https://reactnative.dev/docs/text-style-props#reference
@see https://reactnative.dev/docs/view-style-props#reference

Size
Position
Flex
Spacing
Transform
Transition
Border
Font
Text
Image
- tintColor
- overlayColor Android
View
Other
- content New

Size#

display#

width#

height#

minWidth#

maxWidth#

minHeight#

maxHeight#

aspectRatio#

Position#

position#

start#

end#

top#

left#

right#

bottom#

zIndex#

Flex#

flex#

flexDirection#

flexWrap#

placeContent New#

placeContent: string | string[];

justifyContent#

alignItems#

alignSelf#

alignContent#

flexGrow#

flexShrink#

flexBasis#

Spacing#

margin#

margin: string | number | (string | number)[];

marginVertical / marginY Change#

marginHorizontal / marginX Change#

marginTop#

marginBottom#

marginLeft#

marginRight#

marginStart#

marginEnd#

padding Change#

padding: string | number | (string | number)[];

paddingVertical / paddingY Change#

paddingHorizontal / paddingX Change#

paddingTop#

paddingBottom#

paddingLeft#

paddingRight#

paddingStart#

paddingEnd#

Transform#

transform#

transformMatrix Deprecated#

decomposedMatrix Deprecated#

scaleX Deprecated#

scaleY Deprecated#

rotation Deprecated#

translateX Deprecated#

translateY Deprecated#

Transition#

transition New#

transitionProperty: string | [string | string[], string | number, string | Easing, string | number][];

transitionProperty New#

transitionProperty: string | string[];

transitionDuration New#

transitionDuration: string | number | object;

transitionTimingFunction New#

transitionTimingFunction: string | number | object;

transitionDelay New#

transitionDelay: string | number | object;

Border#

border New#

border: string | [string | number, string, string];

borderWidth Change#

borderRadius: string | number | (string | number)[];

borderTopWidth#

borderStartWidth#

borderEndWidth#

borderRightWidth#

borderBottomWidth#

borderLeftWidth#

borderColor#

borderTopColor#

borderRightColor#

borderBottomColor#

borderLeftColor#

borderStartColor#

borderEndColor#

borderRadius Change#

borderRadius: string | number | (string | number)[];

borderTopRadius New#

borderTopRadius: string | number;

borderBottomRadius New#

borderBottomRadius: string | number;

borderTopLeftRadius#

borderTopRightRadius#

borderTopStartRadius#

borderTopEndRadius#

borderBottomLeftRadius#

borderBottomRightRadius#

borderBottomStartRadius#

borderBottomEndRadius#

borderStyle#

boxShadow New#

boxShadow: [number | string, number | string, number | string, (number | string)?, string?] | string;

shadowColor#

shadowOffset Change#

shadowOpacity Change#

shadowRadius Change#

elevation Android#

Font#

font New#

fontFamily#

fontSize#

fontStyle#

fontWeight#

fontVariant#

includeFontPadding Android#

Text#

color#

textShadow New#

textShadow: [number | string, number | string, (number | string)?, string?] | string;

textShadowOffset#

textShadowRadius#

textShadowColor#

letterSpacing#

lineHeight#

textAlign#

textAlignVertical Android#

textDecorationLine#

textDecorationStyle iOS#

textDecorationColor iOS#

textTransform#

writingDirection iOS#

Image#

tintColor#

overlayColor Android#

View#

pointerEvents New#

pointerEvents: string;

overflow#

direction#

backfaceVisibility#

background New#

backgroundColor#

backgroundAttachment No-op#

backgroundAttachment: 'scroll' | 'fixed' | 'local';

backgroundClip No-op#

backgroundClip: 'border-box' | 'padding-box' | 'content-box' | 'text';

backgroundImage New#

backgroundImage: string;

backgroundOrigin No-op#

backgroundOrigin: 'border-box' | 'padding-box' | 'content-box';

backgroundPosition New#

backgroundPosition: 'top' | 'bottom' | 'left' | 'right' | 'center' | number | string | (number | string)[];

backgroundRepeat New#

backgroundRepeat: 'repeat-x' | 'repeat-y' | 'repeat' | 'space' | 'round' | 'no-repeat' | string;

backgroundSize New#

backgroundSize: 'cover' | 'contain' | number | string | (number | string)[];

opacity#

Other#

content New#

content: string;