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

desccc

Type: string

Conversion

// CSS
- background-filter: todo;

// React Native
+ backdropFilter: "todo",

backgroundAttachment

desccc

Type: string

Conversion

// CSS
- background-attachment: todo;

// React Native
+ backgroundAttachment: "todo",

backgroundBlendMode

desccc

Type: string

Conversion

// CSS
- background-blend-mode: todo;

// React Native
+ backgroundBlendMode: "todo",

backgroundClip

desccc

Type: string

Conversion

// CSS
- background-clip: todo;

// React Native
+ backgroundClip: "todo",

backgroundImage

desccc

Type: string

Conversion

// CSS
- background-image: todo;

// React Native
+ backgroundImage: "todo",

backgroundOrigin

desccc

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

Conversion

// CSS
- background-origin: todo;

// React Native
+ backgroundOrigin: "todo",

backgroundPosition

desccc

Type: string

Conversion

// CSS
- background-position: todo;

// React Native
+ backgroundPosition: "todo",

backgroundRepeat

desccc

Type: string

Conversion

// CSS
- background-repeat: todo;

// React Native
+ backgroundRepeat: "todo",

backgroundSize

desccc

Type: string

Conversion

// CSS
- background-size: todo;

// React Native
+ backgroundSize: "todo",

boxShadow

desccc

Type: string

Conversion

// CSS
- box-shadow: todo;

// React Native
+ boxShadow: "todo",

clip

desccc

Type: string

Conversion

// CSS
- clip: todo;

// React Native
+ clip: "todo",

filter

desccc

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

desccc

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

// CSS
- scrollbar-width: todo;

// React Native
+ scrollbarWidth: "todo",

scrollSnapAlign

desccc

Type: string

Conversion

// CSS
- scroll-snap-align: todo;

// React Native
+ scrollSnapAlign: "todo",

scrollSnapType

desccc

Type: string

Conversion

// CSS
- scroll-snap-type: todo;

// React Native
+ scrollSnapType: "todo",

WebkitMaskImage

desccc

Type: string

Conversion

// CSS
- text-indent: todo;

// React Native
+ textIndent: "todo",

WebkitOverflowScrolling

desccc

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

Conversion

// CSS
- text-indent: todo;

// React Native
+ textIndent: "todo",