Interface ViewStyle

See

https://reactnative.dev/docs/view#style

interface ViewStyle {
    alignContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch";
    alignItems?: FlexAlignType;
    alignSelf?: "auto" | FlexAlignType;
    aspectRatio?: string | number;
    backfaceVisibility?: "visible" | "hidden";
    backgroundColor?: ColorValue;
    borderBlockColor?: ColorValue;
    borderBlockEndColor?: ColorValue;
    borderBlockStartColor?: ColorValue;
    borderBottomColor?: ColorValue;
    borderBottomEndRadius?: string | AnimatableNumericValue;
    borderBottomLeftRadius?: string | AnimatableNumericValue;
    borderBottomRightRadius?: string | AnimatableNumericValue;
    borderBottomStartRadius?: string | AnimatableNumericValue;
    borderBottomWidth?: number;
    borderColor?: ColorValue;
    borderCurve?: "circular" | "continuous";
    borderEndColor?: ColorValue;
    borderEndEndRadius?: string | AnimatableNumericValue;
    borderEndStartRadius?: string | AnimatableNumericValue;
    borderEndWidth?: number;
    borderLeftColor?: ColorValue;
    borderLeftWidth?: number;
    borderRadius?: string | AnimatableNumericValue;
    borderRightColor?: ColorValue;
    borderRightWidth?: number;
    borderStartColor?: ColorValue;
    borderStartEndRadius?: string | AnimatableNumericValue;
    borderStartStartRadius?: string | AnimatableNumericValue;
    borderStartWidth?: number;
    borderStyle?: "solid" | "dotted" | "dashed";
    borderTopColor?: ColorValue;
    borderTopEndRadius?: string | AnimatableNumericValue;
    borderTopLeftRadius?: string | AnimatableNumericValue;
    borderTopRightRadius?: string | AnimatableNumericValue;
    borderTopStartRadius?: string | AnimatableNumericValue;
    borderTopWidth?: number;
    borderWidth?: number;
    bottom?: DimensionValue;
    columnGap?: string | number;
    cursor?: CursorValue;
    direction?: "inherit" | "ltr" | "rtl";
    display?: "none" | "flex";
    elevation?: number;
    end?: DimensionValue;
    flex?: number;
    flexBasis?: DimensionValue;
    flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
    flexGrow?: number;
    flexShrink?: number;
    flexWrap?: "wrap" | "nowrap" | "wrap-reverse";
    gap?: string | number;
    height?: DimensionValue;
    justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
    left?: DimensionValue;
    margin?: DimensionValue;
    marginBottom?: DimensionValue;
    marginEnd?: DimensionValue;
    marginHorizontal?: DimensionValue;
    marginLeft?: DimensionValue;
    marginRight?: DimensionValue;
    marginStart?: DimensionValue;
    marginTop?: DimensionValue;
    marginVertical?: DimensionValue;
    maxHeight?: DimensionValue;
    maxWidth?: DimensionValue;
    minHeight?: DimensionValue;
    minWidth?: DimensionValue;
    opacity?: AnimatableNumericValue;
    overflow?: "visible" | "hidden" | "scroll";
    padding?: DimensionValue;
    paddingBottom?: DimensionValue;
    paddingEnd?: DimensionValue;
    paddingHorizontal?: DimensionValue;
    paddingLeft?: DimensionValue;
    paddingRight?: DimensionValue;
    paddingStart?: DimensionValue;
    paddingTop?: DimensionValue;
    paddingVertical?: DimensionValue;
    pointerEvents?: "box-none" | "none" | "box-only" | "auto";
    position?: "absolute" | "relative" | "static";
    right?: DimensionValue;
    rotation?: AnimatableNumericValue;
    rowGap?: string | number;
    scaleX?: AnimatableNumericValue;
    scaleY?: AnimatableNumericValue;
    shadowColor?: ColorValue;
    shadowOffset?: Readonly<{
        height: number;
        width: number;
    }>;
    shadowOpacity?: AnimatableNumericValue;
    shadowRadius?: number;
    start?: DimensionValue;
    top?: DimensionValue;
    transform?: string | ({
        perspective: AnimatableNumericValue;
    } & {
        matrix: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewX: undefined;
        skewY: undefined;
        translateX: undefined;
        translateY: undefined;
    } | {
        rotate: AnimatableStringValue;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotateX: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewX: undefined;
        skewY: undefined;
        translateX: undefined;
        translateY: undefined;
    } | {
        rotateX: AnimatableStringValue;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotate: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewX: undefined;
        skewY: undefined;
        translateX: undefined;
        translateY: undefined;
    } | {
        rotateY: AnimatableStringValue;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewX: undefined;
        skewY: undefined;
        translateX: undefined;
        translateY: undefined;
    } | {
        rotateZ: AnimatableStringValue;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateY: undefined;
        scale: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewX: undefined;
        skewY: undefined;
        translateX: undefined;
        translateY: undefined;
    } | {
        scale: AnimatableNumericValue;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewX: undefined;
        skewY: undefined;
        translateX: undefined;
        translateY: undefined;
    } | {
        scaleX: AnimatableNumericValue;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleY: undefined;
        skewX: undefined;
        skewY: undefined;
        translateX: undefined;
        translateY: undefined;
    } | {
        scaleY: AnimatableNumericValue;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleX: undefined;
        skewX: undefined;
        skewY: undefined;
        translateX: undefined;
        translateY: undefined;
    } | {
        translateX: AnimatableNumericValue | `${number}%`;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewX: undefined;
        skewY: undefined;
        translateY: undefined;
    } | {
        translateY: AnimatableNumericValue | `${number}%`;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewX: undefined;
        skewY: undefined;
        translateX: undefined;
    } | {
        skewX: AnimatableStringValue;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewY: undefined;
        translateX: undefined;
        translateY: undefined;
    } | {
        skewY: AnimatableStringValue;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewX: undefined;
        translateX: undefined;
        translateY: undefined;
    } | {
        matrix: AnimatableNumericValue[];
    } & {
        perspective: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewX: undefined;
        skewY: undefined;
        translateX: undefined;
        translateY: undefined;
    })[];
    transformMatrix?: number[];
    transformOrigin?: string | (string | number)[];
    translateX?: AnimatableNumericValue;
    translateY?: AnimatableNumericValue;
    width?: DimensionValue;
    zIndex?: number;
}

Hierarchy (view full)

Properties

alignContent? alignItems? alignSelf? aspectRatio? backfaceVisibility? backgroundColor? borderBlockColor? borderBlockEndColor? borderBlockStartColor? borderBottomColor? borderBottomEndRadius? borderBottomLeftRadius? borderBottomRightRadius? borderBottomStartRadius? borderBottomWidth? borderColor? borderCurve? borderEndColor? borderEndEndRadius? borderEndStartRadius? borderEndWidth? borderLeftColor? borderLeftWidth? borderRadius? borderRightColor? borderRightWidth? borderStartColor? borderStartEndRadius? borderStartStartRadius? borderStartWidth? borderStyle? borderTopColor? borderTopEndRadius? borderTopLeftRadius? borderTopRightRadius? borderTopStartRadius? borderTopWidth? borderWidth? bottom? columnGap? cursor? direction? display? elevation? end? flex? flexBasis? flexDirection? flexGrow? flexShrink? flexWrap? gap? height? justifyContent? left? margin? marginBottom? marginEnd? marginHorizontal? marginLeft? marginRight? marginStart? marginTop? marginVertical? maxHeight? maxWidth? minHeight? minWidth? opacity? overflow? padding? paddingBottom? paddingEnd? paddingHorizontal? paddingLeft? paddingRight? paddingStart? paddingTop? paddingVertical? pointerEvents? position? right? rotation? rowGap? scaleX? scaleY? shadowColor? shadowOffset? shadowOpacity? shadowRadius? start? top? transform? transformMatrix? transformOrigin? translateX? translateY? width? zIndex?

Properties

Optional alignContent

alignContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch"

Optional alignItems

alignItems?: FlexAlignType

Optional alignSelf

alignSelf?: "auto" | FlexAlignType

Optional aspectRatio

aspectRatio?: string | number

Optional backfaceVisibility

backfaceVisibility?: "visible" | "hidden"

Optional backgroundColor

backgroundColor?: ColorValue

Optional borderBlockColor

borderBlockColor?: ColorValue

Optional borderBlockEndColor

borderBlockEndColor?: ColorValue

Optional borderBlockStartColor

borderBlockStartColor?: ColorValue

Optional borderBottomColor

borderBottomColor?: ColorValue

Optional borderBottomEndRadius

borderBottomEndRadius?: string | AnimatableNumericValue

Optional borderBottomLeftRadius

borderBottomLeftRadius?: string | AnimatableNumericValue

Optional borderBottomRightRadius

borderBottomRightRadius?: string | AnimatableNumericValue

Optional borderBottomStartRadius

borderBottomStartRadius?: string | AnimatableNumericValue

Optional borderBottomWidth

borderBottomWidth?: number

Optional borderColor

borderColor?: ColorValue

Optional borderCurve

borderCurve?: "circular" | "continuous"

On iOS 13+, it is possible to change the corner curve of borders.

Platform

ios

Optional borderEndColor

borderEndColor?: ColorValue

Optional borderEndEndRadius

borderEndEndRadius?: string | AnimatableNumericValue

Optional borderEndStartRadius

borderEndStartRadius?: string | AnimatableNumericValue

Optional borderEndWidth

borderEndWidth?: number

Optional borderLeftColor

borderLeftColor?: ColorValue

Optional borderLeftWidth

borderLeftWidth?: number

Optional borderRadius

borderRadius?: string | AnimatableNumericValue

Optional borderRightColor

borderRightColor?: ColorValue

Optional borderRightWidth

borderRightWidth?: number

Optional borderStartColor

borderStartColor?: ColorValue

Optional borderStartEndRadius

borderStartEndRadius?: string | AnimatableNumericValue

Optional borderStartStartRadius

borderStartStartRadius?: string | AnimatableNumericValue

Optional borderStartWidth

borderStartWidth?: number

Optional borderStyle

borderStyle?: "solid" | "dotted" | "dashed"

Optional borderTopColor

borderTopColor?: ColorValue

Optional borderTopEndRadius

borderTopEndRadius?: string | AnimatableNumericValue

Optional borderTopLeftRadius

borderTopLeftRadius?: string | AnimatableNumericValue

Optional borderTopRightRadius

borderTopRightRadius?: string | AnimatableNumericValue

Optional borderTopStartRadius

borderTopStartRadius?: string | AnimatableNumericValue

Optional borderTopWidth

borderTopWidth?: number

Optional borderWidth

borderWidth?: number

Optional bottom

bottom?: DimensionValue

Optional columnGap

columnGap?: string | number

Optional cursor

cursor?: CursorValue

Optional direction

direction?: "inherit" | "ltr" | "rtl"

Platform

ios

Optional display

display?: "none" | "flex"

Optional elevation

elevation?: number

Sets the elevation of a view, using Android's underlying elevation API. This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions.

Platform

android

Optional end

end?: DimensionValue

Optional flex

flex?: number

Optional flexBasis

flexBasis?: DimensionValue

Optional flexDirection

flexDirection?: "row" | "column" | "row-reverse" | "column-reverse"

Optional flexGrow

flexGrow?: number

Optional flexShrink

flexShrink?: number

Optional flexWrap

flexWrap?: "wrap" | "nowrap" | "wrap-reverse"

Optional gap

gap?: string | number

Optional height

height?: DimensionValue

Optional justifyContent

justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly"

Optional left

left?: DimensionValue

Optional margin

margin?: DimensionValue

Optional marginBottom

marginBottom?: DimensionValue

Optional marginEnd

marginEnd?: DimensionValue

Optional marginHorizontal

marginHorizontal?: DimensionValue

Optional marginLeft

marginLeft?: DimensionValue

Optional marginRight

marginRight?: DimensionValue

Optional marginStart

marginStart?: DimensionValue

Optional marginTop

marginTop?: DimensionValue

Optional marginVertical

marginVertical?: DimensionValue

Optional maxHeight

maxHeight?: DimensionValue

Optional maxWidth

maxWidth?: DimensionValue

Optional minHeight

minHeight?: DimensionValue

Optional minWidth

minWidth?: DimensionValue

Optional opacity

opacity?: AnimatableNumericValue

Optional overflow

overflow?: "visible" | "hidden" | "scroll"

Optional padding

padding?: DimensionValue

Optional paddingBottom

paddingBottom?: DimensionValue

Optional paddingEnd

paddingEnd?: DimensionValue

Optional paddingHorizontal

paddingHorizontal?: DimensionValue

Optional paddingLeft

paddingLeft?: DimensionValue

Optional paddingRight

paddingRight?: DimensionValue

Optional paddingStart

paddingStart?: DimensionValue

Optional paddingTop

paddingTop?: DimensionValue

Optional paddingVertical

paddingVertical?: DimensionValue

Optional pointerEvents

pointerEvents?: "box-none" | "none" | "box-only" | "auto"

Controls whether the View can be the target of touch events.

Optional position

position?: "absolute" | "relative" | "static"

Optional right

right?: DimensionValue

Optional rotation

rotation?: AnimatableNumericValue

Deprecated

Use rotate in transform prop instead.

Optional rowGap

rowGap?: string | number

Optional scaleX

scaleX?: AnimatableNumericValue

Deprecated

Use scaleX in transform prop instead.

Optional scaleY

scaleY?: AnimatableNumericValue

Deprecated

Use scaleY in transform prop instead.

Optional shadowColor

shadowColor?: ColorValue

Optional shadowOffset

shadowOffset?: Readonly<{
    height: number;
    width: number;
}>

Type declaration

  • height: number
  • width: number

Optional shadowOpacity

shadowOpacity?: AnimatableNumericValue

Optional shadowRadius

shadowRadius?: number

Optional start

start?: DimensionValue

Optional top

top?: DimensionValue

Optional transform

transform?: string | ({
    perspective: AnimatableNumericValue;
} & {
    matrix: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewX: undefined;
    skewY: undefined;
    translateX: undefined;
    translateY: undefined;
} | {
    rotate: AnimatableStringValue;
} & {
    matrix: undefined;
    perspective: undefined;
    rotateX: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewX: undefined;
    skewY: undefined;
    translateX: undefined;
    translateY: undefined;
} | {
    rotateX: AnimatableStringValue;
} & {
    matrix: undefined;
    perspective: undefined;
    rotate: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewX: undefined;
    skewY: undefined;
    translateX: undefined;
    translateY: undefined;
} | {
    rotateY: AnimatableStringValue;
} & {
    matrix: undefined;
    perspective: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewX: undefined;
    skewY: undefined;
    translateX: undefined;
    translateY: undefined;
} | {
    rotateZ: AnimatableStringValue;
} & {
    matrix: undefined;
    perspective: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateY: undefined;
    scale: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewX: undefined;
    skewY: undefined;
    translateX: undefined;
    translateY: undefined;
} | {
    scale: AnimatableNumericValue;
} & {
    matrix: undefined;
    perspective: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewX: undefined;
    skewY: undefined;
    translateX: undefined;
    translateY: undefined;
} | {
    scaleX: AnimatableNumericValue;
} & {
    matrix: undefined;
    perspective: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleY: undefined;
    skewX: undefined;
    skewY: undefined;
    translateX: undefined;
    translateY: undefined;
} | {
    scaleY: AnimatableNumericValue;
} & {
    matrix: undefined;
    perspective: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleX: undefined;
    skewX: undefined;
    skewY: undefined;
    translateX: undefined;
    translateY: undefined;
} | {
    translateX: AnimatableNumericValue | `${number}%`;
} & {
    matrix: undefined;
    perspective: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewX: undefined;
    skewY: undefined;
    translateY: undefined;
} | {
    translateY: AnimatableNumericValue | `${number}%`;
} & {
    matrix: undefined;
    perspective: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewX: undefined;
    skewY: undefined;
    translateX: undefined;
} | {
    skewX: AnimatableStringValue;
} & {
    matrix: undefined;
    perspective: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewY: undefined;
    translateX: undefined;
    translateY: undefined;
} | {
    skewY: AnimatableStringValue;
} & {
    matrix: undefined;
    perspective: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewX: undefined;
    translateX: undefined;
    translateY: undefined;
} | {
    matrix: AnimatableNumericValue[];
} & {
    perspective: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewX: undefined;
    skewY: undefined;
    translateX: undefined;
    translateY: undefined;
})[]

Optional transformMatrix

transformMatrix?: number[]

Deprecated

Use matrix in transform prop instead.

Optional transformOrigin

transformOrigin?: string | (string | number)[]

Optional translateX

translateX?: AnimatableNumericValue

Deprecated

Use translateX in transform prop instead.

Optional translateY

translateY?: AnimatableNumericValue

Deprecated

Use translateY in transform prop instead.

Optional width

width?: DimensionValue

Optional zIndex

zIndex?: number

On This Page