Expo Web
Search…
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

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%)",
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",
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",
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",
The backgroundImage CSS property sets one or more background images on an element.

Type: string

Conversion

// CSS
background-image: todo;
// React Native
backgroundImage: "todo",
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",
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%",
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",
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",
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",
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",
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",
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",
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",
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",
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",
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",
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",
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",
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",
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",
Last modified 2yr ago