Expo Web
Search…
Expo Web
Awesome Web!
Intro
FAQ
Anti-Pitch
Primitives
Intro to Primitives
View
TextInput
Styling
Animations
Aspect Ratio
Grids
Interactions
Text
Transforms
Transitions
View
Powered By GitBook
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

1
// CSS
2
background-filter: brightness(60%);
3
​
4
// React Native
5
backdropFilter: "brightness(60%)",
Copied!
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

1
// CSS
2
background-attachment: todo;
3
​
4
// React Native
5
backgroundAttachment: "todo",
Copied!
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

1
// CSS
2
background-blend-mode: todo;
3
​
4
// React Native
5
backgroundBlendMode: "todo",
Copied!
The backgroundClip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.

Type: string

Conversion

1
// CSS
2
background-clip: todo;
3
​
4
// React Native
5
backgroundClip: "todo",
Copied!
The backgroundImage CSS property sets one or more background images on an element.

Type: string

Conversion

1
// CSS
2
background-image: todo;
3
​
4
// React Native
5
backgroundImage: "todo",
Copied!
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

1
// CSS
2
background-origin: todo;
3
​
4
// React Native
5
backgroundOrigin: "todo",
Copied!
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

1
// CSS
2
background-position: 50%;
3
​
4
// React Native
5
backgroundPosition: "50%",
Copied!
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

1
// CSS
2
background-repeat: todo;
3
​
4
// React Native
5
backgroundRepeat: "todo",
Copied!
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

1
// CSS
2
background-size: todo;
3
​
4
// React Native
5
backgroundSize: "todo",
Copied!

​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

1
// CSS
2
box-shadow: todo;
3
​
4
// React Native
5
boxShadow: "todo",
Copied!

​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

1
// CSS
2
clip: todo;
3
​
4
// React Native
5
clip: "todo",
Copied!

​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

1
// CSS
2
fliter: todo;
3
​
4
// React Native
5
filter: "todo",
Copied!
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

1
// CSS
2
outline-color: todo;
3
​
4
// React Native
5
outlineColor: "todo",
Copied!
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

1
// CSS
2
outline-offset: todo;
3
​
4
// React Native
5
outlineOffset: "todo",
Copied!
An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

Type: string

Conversion

1
// CSS
2
outline-style: todo;
3
​
4
// React Native
5
outlineStyle: "todo",
Copied!
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

1
// CSS
2
outline-width: todo;
3
​
4
// React Native
5
outlineWidth: "todo",
Copied!
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

1
// CSS
2
overscroll-behavior: auto;
3
​
4
// React Native
5
overscrollBehavior: "auto",
Copied!
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

1
// CSS
2
overscroll-behavior-x: contain;
3
​
4
// React Native
5
overscrollBehaviorX: "contain",
Copied!
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

1
// CSS
2
overscroll-behavior-y: contain;
3
​
4
// React Native
5
overscrollBehaviorY: "contain",
Copied!
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

1
// CSS
2
scrollbar-width: todo;
3
​
4
// React Native
5
scrollbarWidth: "todo",
Copied!
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

1
// CSS
2
scroll-snap-align: todo;
3
​
4
// React Native
5
scrollSnapAlign: "todo",
Copied!
The scrollSnapType CSS property sets how strictly snap points are enforced on the scroll container in case there is one.

Type: string

Conversion

1
// CSS
2
scroll-snap-type: todo;
3
​
4
// React Native
5
scrollSnapType: "todo",
Copied!
The maskImage CSS property sets the image that is used as mask layer for an element.

Type: string

Conversion

1
// CSS
2
text-indent: todo;
3
​
4
// React Native
5
textIndent: "todo",
Copied!
The WebkitOverflowScrolling CSS property controls whether or not touch devices use momentum-based scrolling for a given element.

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

Conversion

1
// CSS
2
text-indent: todo;
3
​
4
// React Native
5
textIndent: "todo",
Copied!
Styling - Previous
Transitions
Last modified 2yr ago
Copy link
Contents
The API
backdropFilter
backgroundAttachment
backgroundBlendMode
backgroundClip
backgroundImage
backgroundOrigin
backgroundPosition
backgroundRepeat
backgroundSize
boxShadow
clip
filter
outlineColor
outlineOffset
outlineStyle
outlineWidth
overscrollBehavior
overscrollBehaviorX
overscrollBehaviorY
scrollbarWidth
scrollSnapAlign
scrollSnapType
WebkitMaskImage
WebkitOverflowScrolling