​

Example

import React from 'react';
import {View, StyleSheet} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const App = () => (
  <SafeAreaProvider>
    <SafeAreaView style={styles.container}>
      <View style={styles.top} />
      <View style={styles.middle} />
      <View style={styles.bottom} />
    </SafeAreaView>
  </SafeAreaProvider>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    padding: 20,
    margin: 10,
  },
  top: {
    flex: 0.3,
    backgroundColor: 'grey',
    borderWidth: 5,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
  middle: {
    flex: 0.3,
    backgroundColor: 'beige',
    borderWidth: 5,
  },
  bottom: {
    flex: 0.3,
    backgroundColor: 'pink',
    borderWidth: 5,
    borderBottomLeftRadius: 20,
    borderBottomRightRadius: 20,
  },
});

export default App;

​

Reference

​

Props

​

backfaceVisibility

​

backgroundColor

​

experimental_backgroundImage Vega

// Simple usage:
<View style={{
  experimental_backgroundImage: 'linear-gradient(45deg, blue, red)'
}} />
<View style={{
  experimental_backgroundImage: 'radial-gradient(ellipse farthest-corner at 30% 40%, red, blue)'
}} />

​

borderBottomColor

​

borderBlockColor

​

borderBlockEndColor

​

borderBlockStartColor

​

borderBottomEndRadius

​

borderBottomLeftRadius

​

borderBottomRightRadius

​

borderBottomStartRadius

​

borderStartEndRadius

​

borderStartStartRadius

​

borderEndEndRadius

​

borderEndStartRadius

​

borderBottomWidth

​

borderColor

​

borderCurve iOS

​

borderEndColor

​

borderLeftColor

​

borderLeftWidth

​

borderRadius

​

borderRightColor

​

borderRightWidth

​

borderStartColor

​

borderStyle

​

borderTopColor

​

borderTopEndRadius

​

borderTopLeftRadius

​

borderTopRightRadius

​

borderTopStartRadius

​

borderTopWidth

​

borderWidth

​

boxShadow Vega Not Available

​

cursor iOS Vega Not Available

​

elevation Android Vega Not Available

​

filter Vega Not Available

• brightness: Changes the brightness of the View. Takes a non-negative number or percentage.
• opacity: Changes the opacity, or alpha, of the View. Takes a non-negative number or percentage.

• blur: Blurs the View with a Gaussian blur, where the specified length represents the radius used in the blurring algorithm. Any non-negative DIP value is valid (no percents). The larger the value, the blurrier the result.
• contrast: Changes the contrast of the View. Takes a non-negative number or percentage.
• dropShadow: Adds a shadow around the alpha mask of the View (only non-zero alpha pixels in the View will cast a shadow). Takes an optional color representing the shadow color, and 2 or 3 lengths. If 2 lengths are specified they are interpreted as offsetX and offsetY which will translate the shadow in the X and Y dimensions respectfully. If a 3rd length is given it is interpreted as the standard deviation of the Gaussian blur used on the shadow - so a larger value will blur the shadow more. Read more about the arguments in DropShadowValue.
• grayscale: Converts the View to grayscale by the specified amount. Takes a non-negative number or percentage, where 1 or 100% represents complete grayscale.
• hueRotate: Changes the hue of the View. The argument of this function defines the angle of a color wheel around which the hue will be rotated, so e.g., 360deg would have no effect. This angle can have either deg or rad units.
• invert: Inverts the colors in the View. Takes a non-negative number or percentage, where 1 or 100% represents complete inversion.
• sepia: Converts the View to sepia. Takes a non-negative number or percentage, where 1 or 100% represents complete sepia.
• saturate: Changes the saturation of the View. Takes a non-negative number or percentage.

​

mixBlendMode Vega

mixBlendMode Values

• normal: The element is drawn on top of its background without blending.
• multiply: The source color is multiplied by the destination color and replaces the destination.
• screen: Multiplies the complements of the backdrop and source color values, then complements the result.
• overlay: Multiplies or screens the colors, depending on the backdrop color value.
• darken: Selects the darker of the backdrop and source colors.
• lighten: Selects the lighter of the backdrop and source colors.
• color-dodge: Brightens the backdrop color to reflect the source color. Painting with black produces no changes.
• color-burn: Darkens the backdrop color to reflect the source color. Painting with white produces no change.
• hard-light: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop.
• soft-light: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop.
• difference: Subtracts the darker of the two constituent colors from the lighter color.
• exclusion: Produces an effect similar to that of the Difference mode but lower in contrast.
• hue: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color.
• saturation: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color.
• color: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images.
• luminosity: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode.

​

opacity

​

outlineColor

​

outlineOffset

​

outlineStyle

​

outlineWidth

​

pointerEvents

• 'auto': The View can be the target of touch events.
• 'none': The View is never the target of touch events.
• 'box-none': The View is never the target of touch events but its subviews can be.
• 'box-only': The view can be the target of touch events but its subviews cannot be.