5 React Native Styles You Didn't Know Existed

1. Linear Gradient

Linear gradients work the same way as CSS linear gradients, but they are available under the experimental_backgroundImage style prop. Just pass the gradient string directly, and it will render beautifully.

You can even use multi-position color stops, where adjacent colors share the same stop value, creating a striped effect.

Linear Gradient Demo

<View
  style={[
    styles.gradientBox,
    {
      experimental_backgroundImage:
        "linear-gradient( to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%)",
    },
  ]}
/>
 
<View
  style={[
    styles.gradientBox,
    {
      experimental_backgroundImage: "linear-gradient(135deg, orange 60%, cyan)",
    },
  ]}
/>

2. Filter

The filter property landed in React Native 0.76, alongside the New Architecture. If you're not on it yet, this one won't work for you.

It works exactly like CSS filters on the web: you attach one or more filter functions to a View or Image, and React Native composites them on top of the element's rendered output. Filters apply to the element and all of its descendants.

There are two ways to write it. A string that mirrors CSS syntax, or an array of objects if you need to interpolate variables:

Filter Demo

// string syntax
filter: "saturate(0.5) grayscale(0.25)";

// array syntax, same result
filter: [{ saturate: 0.5 }, { grayscale: 0.25 }];

What's available depends on the platform This is where things get interesting. iOS has a much more limited implementation due to how UIKit handles compositing. Only brightness and opacity are supported. Android gets the full set: blur, contrast, dropShadow, grayscale, hueRotate, invert, sepia, and saturate. Worth noting that blur and dropShadow require Android 12+.