View

React Native for web provides access to browser-only style properties. The following styles apply to any primitive that extends `ViewStylePropTypes` like Text, Image, TextInput, ScrollView, etc...

The API

backdropFilter

The backdropFilter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.

Type: string

Conversion

// CSS
background-filter: brightness(60%);

// React Native
backdropFilter: "brightness(60%)",

backgroundAttachment

The backgroundAttachment CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.

Type: string

Conversion

// CSS
background-attachment: todo;

// React Native
backgroundAttachment: "todo",

backgroundBlendMode

The backgroundBlendMode CSS property sets how an element's background images should blend with each other and with the element's background color.

Type: string

Conversion

// CSS
background-blend-mode: todo;

// React Native
backgroundBlendMode: "todo",

backgroundClip

The backgroundClip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.

Type: string

Conversion

// CSS
background-clip: todo;

// React Native
backgroundClip: "todo",

backgroundImage

The backgroundImage CSS property sets one or more background images on an element.

Type: string

Conversion

// CSS
background-image: todo;

// React Native
backgroundImage: "todo",

backgroundOrigin

The backgroundOrigin CSS property sets the background's origin: from the border start, inside the border, or inside the padding.

Type: enum('border-box', 'content-box', 'padding-box')

Conversion

// CSS
background-origin: todo;

// React Native
backgroundOrigin: "todo",

backgroundPosition

The backgroundPosition CSS property sets the initial position for each background image. The position is relative to the position layer set by backgroundOrigin.

Type: string

Conversion

// CSS
background-position: 50%;

// React Native
backgroundPosition: "50%",

backgroundRepeat

The backgroundRepeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.

Type: string

Conversion

// CSS
background-repeat: todo;

// React Native
backgroundRepeat: "todo",

backgroundSize

The backgroundSize CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.

Type: string

Conversion

// CSS
background-size: todo;

// React Native
backgroundSize: "todo",

boxShadow

The boxShadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.

Type: string

Conversion

// CSS
box-shadow: todo;

// React Native
boxShadow: "todo",

clip

The clip CSS property defines what portion of an element is visible. The clip property applies only to absolutely positioned elements, that is elements with position: "absolute" or position: "fixed".

Type: string

Conversion

// CSS
clip: todo;

// React Native
clip: "todo",

filter

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

Type: string

Conversion

// CSS
fliter: todo;

// React Native
filter: "todo",

outlineColor

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

The outlineColor property specifies the color of an outline.

Note: Always declare the outlineStyle property before the outlineColor property. An element must have an outline before you change the color of it.

Type: ColorPropType

Conversion

// CSS
outline-color: todo;

// React Native
outlineColor: "todo",

outlineOffset

The outlineOffset CSS property sets the amount of space between an outline and the edge or border of an element.

Type: enum(string, number)

Conversion

// CSS
outline-offset: todo;

// React Native
outlineOffset: "todo",

outlineStyle

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

Type: string

Conversion

// CSS
outline-style: todo;

// React Native
outlineStyle: "todo",

outlineWidth

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

Note: Always declare the outlineStyle property before the outlineWidth property. An element must have an outline before you change the width of it.

Type: enum(string, number)

Conversion

// CSS
outline-width: todo;

// React Native
outlineWidth: "todo",

overscrollBehavior

The overscrollBehavior CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for overscrollBehaviorX and overscrollBehaviorY.

Type: enum('auto', 'contain', 'none')

Conversion

// CSS
overscroll-behavior: auto;

// React Native
overscrollBehavior: "auto",

overscrollBehaviorX

The overscrollBehaviorX CSS property sets the browser's behavior when the horizontal boundary of a scrolling area is reached.

Type: enum('auto', 'contain', 'none')

Conversion

// CSS
overscroll-behavior-x: contain;

// React Native
overscrollBehaviorX: "contain",

overscrollBehaviorY

The overscrollBehaviorY CSS property sets the browser's behavior when the vertical boundary of a scrolling area is reached.

Type: enum('auto', 'contain', 'none')

Conversion

// CSS
overscroll-behavior-y: contain;

// React Native
overscrollBehaviorY: "contain",

scrollbarWidth

The scrollbarWidth property allows the author to set the maximum thickness of an element’s scrollbars when they are shown.

Type: enum('auto', 'thin', 'none')

Conversion

// CSS
scrollbar-width: todo;

// React Native
scrollbarWidth: "todo",

scrollSnapAlign

The scrollSnapAlign property specifies the box’s snap position as an alignment of its snap area (as the alignment subject) within its snap container’s snapport (as the alignment container). The two values specify the snapping alignment in the block axis and inline axis, respectively. If only one value is specified, the second value defaults to the same value.

Type: string

Conversion

// CSS
scroll-snap-align: todo;

// React Native
scrollSnapAlign: "todo",

scrollSnapType

The scrollSnapType CSS property sets how strictly snap points are enforced on the scroll container in case there is one.

Type: string

Conversion

// CSS
scroll-snap-type: todo;

// React Native
scrollSnapType: "todo",

WebkitMaskImage

The maskImage CSS property sets the image that is used as mask layer for an element.

Type: string

Conversion

// CSS
text-indent: todo;

// React Native
textIndent: "todo",

WebkitOverflowScrolling

The WebkitOverflowScrolling CSS property controls whether or not touch devices use momentum-based scrolling for a given element.

Type: enum('auto', 'touch')

Conversion

// CSS
text-indent: todo;

// React Native
textIndent: "todo",