Skip to main content

View Style Props

Example​

Reference

Props​

backfaceVisibility​

Type
enum('visible', 'hidden')

backgroundColor​

Type
color

backgroundImage​

backgroundImage provides the ability to draw a linear-gradient() and radial-gradient() using a web-like syntax.

React TSX
// Simple usage:
<View style={{ backgroundImage: 'linear-gradient(45deg, blue, red)' }} />

<View style={{ backgroundImage: 'radial-gradient(ellipse farthest-corner at 30% 40%, red, blue)' }} />

// Also with PlatformColor:
<View
style={{
  backgroundImage: [
    {
      type: 'linear-gradient',
      direction: 'to bottom',
      colorStops: [
        {
          color: Platform.select({
            ios: PlatformColor('systemTealColor'),
            android: PlatformColor('@android:color/holo_purple'),
            default: 'blue',
          }),
          positions: ['0%'],
        },
        {color: 'green', positions: ['100%']},
      ],
    },
  ],
}}
/>

More complex examples of usage can be found in the RNTester app (with PlatformColor supports):

Type
string, array of objects: {type: 'linear-gradient', direction: string, colorStops: object[] }, {type: 'radial-gradient', shape: string, position: object, size: string, colorStops: object[] }

backgroundPosition​

Controls where the background gradient is placed inside the view. This is useful when backgroundImage is set, and you want to offset or center it instead of filling the full area.

React TSX
<View
  style={{
    backgroundImage: 'radial-gradient(circle, #ff6b6b, #4ecdc4)',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    backgroundSize: '50px 50px',
  }}
/>
Type
string | array of objects {top: string, left: string, right: string, bottom: string}

backgroundRepeat​

Controls whether the background gradient is repeated, and how. This works together with backgroundImage to tile gradients across the view.

React TSX
<View
  style={{
    backgroundImage: 'linear-gradient(45deg, #ff6b6b, #4ecdc4)',
    backgroundRepeat: 'repeat',