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

desccc

Type: string

Conversion

1
// CSS
2
- background-filter: todo;
3
​
4
// React Native
5
+ backdropFilter: "todo",
Copied!
desccc

Type: string

Conversion

1
// CSS
2
- background-attachment: todo;
3
​
4
// React Native
5
+ backgroundAttachment: "todo",
Copied!
desccc

Type: string

Conversion

1
// CSS
2
- background-blend-mode: todo;
3
​
4
// React Native
5
+ backgroundBlendMode: "todo",
Copied!
desccc

Type: string

Conversion

1
// CSS
2
- background-clip: todo;
3
​
4
// React Native
5
+ backgroundClip: "todo",
Copied!
desccc

Type: string

Conversion

1
// CSS
2
- background-image: todo;
3
​
4
// React Native
5
+ backgroundImage: "todo",
Copied!
desccc

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

Conversion

1
// CSS
2
- background-origin: todo;
3
​
4
// React Native
5
+ backgroundOrigin: "todo",
Copied!
desccc

Type: string

Conversion

1
// CSS
2
- background-position: todo;
3
​
4
// React Native
5
+ backgroundPosition: "todo",
Copied!
desccc

Type: string

Conversion

1
// CSS
2
- background-repeat: todo;
3
​
4
// React Native
5
+ backgroundRepeat: "todo",
Copied!
desccc

Type: string

Conversion

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

​boxShadow​

desccc

Type: string

Conversion

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

​clip​

desccc

Type: string

Conversion

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

​filter​

desccc

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!
desccc

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 scrollbar-width 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!
desccc

Type: string

Conversion

1
// CSS
2
- scroll-snap-align: todo;
3
​
4
// React Native
5
+ scrollSnapAlign: "todo",
Copied!
desccc

Type: string

Conversion

1
// CSS
2
- scroll-snap-type: todo;
3
​
4
// React Native
5
+ scrollSnapType: "todo",
Copied!

WebkitMaskImage

desccc

Type: string

Conversion

1
// CSS
2
- text-indent: todo;
3
​
4
// React Native
5
+ textIndent: "todo",
Copied!

WebkitOverflowScrolling

desccc

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

Conversion

1
// CSS
2
- text-indent: todo;
3
​
4
// React Native
5
+ textIndent: "todo",
Copied!
Primitives - Previous
Intro to Primitives
Next - Primitives
TextInput
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