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
string
Conversion
// CSS
- background-filter: todo;
// React Native
+ backdropFilter: "todo",
desccc
Type: string
string
Conversion
// CSS
- background-attachment: todo;
// React Native
+ backgroundAttachment: "todo",
desccc
Type: string
string
Conversion
// CSS
- background-blend-mode: todo;
// React Native
+ backgroundBlendMode: "todo",
desccc
Type: string
string
Conversion
// CSS
- background-clip: todo;
// React Native
+ backgroundClip: "todo",
desccc
Type: string
string
Conversion
// CSS
- background-image: todo;
// React Native
+ backgroundImage: "todo",
desccc
Type: enum('border-box', 'content-box', 'padding-box')
enum('border-box', 'content-box', 'padding-box')
Conversion
// CSS
- background-origin: todo;
// React Native
+ backgroundOrigin: "todo",
desccc
Type: string
string
Conversion
// CSS
- background-position: todo;
// React Native
+ backgroundPosition: "todo",
desccc
Type: string
string
Conversion
// CSS
- background-repeat: todo;
// React Native
+ backgroundRepeat: "todo",
desccc
Type: string
string
Conversion
// CSS
- background-size: todo;
// React Native
+ backgroundSize: "todo",
desccc
Type: string
string
Conversion
// CSS
- box-shadow: todo;
// React Native
+ boxShadow: "todo",
desccc
Type: string
string
Conversion
// CSS
- clip: todo;
// React Native
+ clip: "todo",
desccc
Type: string
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 theoutlineColor
property. An element must have an outline before you change the color of it.
Type: ColorPropType
ColorPropType
Conversion
// CSS
- outline-color: todo;
// React Native
+ outlineColor: "todo",
desccc
Type: enum(string, number)
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
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 theoutlineWidth
property. An element must have an outline before you change the width of it.
Type: enum(string, number)
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')
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')
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')
enum('auto', 'contain', 'none')
Conversion
// CSS
- overscroll-behavior-y: contain;
// React Native
+ overscrollBehaviorY: "contain",
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')
enum('auto', 'thin', 'none')
Conversion
// CSS
- scrollbar-width: todo;
// React Native
+ scrollbarWidth: "todo",
desccc
Type: string
string
Conversion
// CSS
- scroll-snap-align: todo;
// React Native
+ scrollSnapAlign: "todo",
desccc
Type: string
string
Conversion
// CSS
- scroll-snap-type: todo;
// React Native
+ scrollSnapType: "todo",
WebkitMaskImage
desccc
Type: string
string
Conversion
// CSS
- text-indent: todo;
// React Native
+ textIndent: "todo",
WebkitOverflowScrolling
desccc
Type: enum('auto', 'touch')
enum('auto', 'touch')
Conversion
// CSS
- text-indent: todo;
// React Native
+ textIndent: "todo",
Last updated
Was this helpful?