Actual Gradient Borders in React Native (the almighty Masked View)

(Just want the package? check it out here)

If you Google "React Native gradient border" like I did you may find yourself a little disappointed.

I needed to make something like this:

I needed just a gradient border with a transparent background, but when I searched the internet for solutions all that showed up in my search had something like:

<LinearGradient
    style={{
      height: 150,
      width: 200,
      borderRadius: 20,
    }}
>
    <View
        style={{
          borderRadius: 15,
          flex: 1,
          margin: 5,
          backgroundColor: '#fff',
          justifyContent: 'center',
        }}
    >
       {/* some other stuff */}
    </View>
</LinearGradient>

Which might look something like:

This is simulates a gradient border but it is not a gradient border. It is a full on gradient view hidden behind some other view with a certain background color.

This solution can work sometimes, but it isn't a universal solution and it's a bit janky to work with (because making changes becomes more difficult since we're adjusting multiple props in both the parent and child, and it requires two views to have their backgrounds in sync).

If you needed a non-static background, like say you wanted to show an image like I needed too, none of these solutions would work at all (because, again we're needing two views to have matching backgrounds).

So, I was discouraged, but then I came across a library that could easily allow me to implement a true gradient border.

Masked Views to the rescue 💯

@react-native-masked-view/masked-view is an incredibly powerful library. CSS has view masking if you're in web dev as well, but for React Native we will need a library (of course). Luckily @react-native-masked-view/masked-view is well maintained and even used by @react-navigation

What's masking

Masking applies one view as a mask to another target view, which means it takes the opacity values from the mask view view and applies them to the target view.

That may not sound like much, but it can be used to create absolutely amazing visuals if used correctly. Here's a really simple example with some really cool text effects:

The masked view is great because it's both simple to use once you know how it works, but also has huge potential for creating compelling visuals in your UI.

You can think of it as sort of "cutting out a slice" of one view in the shape of another view, but it also works with any opacity value including gradients. So you can create things like this, too, using an image plus a gradient:

So in our React Native app, if we wanted to create a gradient giraffe cutout with @react-native-masked-view/masked-view, we can do:

<MaskedView
  style={{ flex: 1 }}
  maskElement={(
    <View
      style={[StyleSheet.absoluteFill]}
    >
      <ImageBackground
        style={[StyleSheet.absoluteFill]}
        resizeMode='contain'
        source={require('./giraffe.png')}
      />
    </View>

  )}
>
  <LinearGradient
    colors={['red', 'blue']}
    style={StyleSheet.absoluteFill}
    pointerEvents='none'
  />
</MaskedView>

Here the mask is a giraffe shape, and the target view is a gradient, so we get a gradient giraffe. Note that the actual image has a transparent background, which is very important when masking things because, again, masks apply only the opacity of the image to the target element (LinearGradient).

By the way, I'm not saying that you should or shouldn't have a gradient giraffe in your app, I'm just trying to make the point the MaskedView can apply the opacity values from any mask element to any target view. The actual image looks like this:

Notice the colors of the image don't actually matter, just the opacity.

Anyways, we don't need to get that fancy for what we're doing.

All we need to do is create a border-shaped mask and apply it to a LinearGradient. Seems so simple when you think about it. In @react-native-masked-view/masked-view it's just a little bit of code.

💯 A universal solution to gradient borders 💯

<MaskedView
    maskElement={(
        <View
            pointerEvents='none'
            style={[
                StyleSheet.absoluteFill, 
                { borderWidth, borderRadius }]}
        />
    )}
    style={[StyleSheet.absoluteFill]}
>
    <LinearGradient
        colors={['red', 'orange']}
        pointerEvents='none'
    />
</MaskedView>

This component would go inside the component to which we want to apply a gradient border. Notice the absolute fill style, this will make sure it applies the borders to the edge of the immediate parent view.

It's actually kind of hilarious how much less code this is to achieve a better result than the solutions that you'll find when you google this question.

Issues

The main issue with this approach is that it doesn't adjust the layout to compensate for the border. For example, if you don't apply padding to the parent view the gradient border can overlaid on top of components:

So we'll need to apply additional padding to compensate:

style={{
  width: 200,
  height: 200,
  padding: 20,
}}

That can be a pain to do, because when changing the border width we'd also need to change the view's padding.

🤔 How do we solve this once and for all?

As is often possible in React (Native), we can create reusable components with a great APIs that do all of the tedious stuff for us, and then in the future we can reach for it by default! We just need to make sure it's well-thought out enough to support any future use cases.

SO, we can create a reusable component that automatically applies padding, which is what I've done in my package @good-react-native/gradient-border:

<GradientBorderView
  gradientProps={{
    colors: ['red', 'blue']
  }}
  style={{
    borderWidth: 5,
    width: 200,
    height: 200,
  }}
>
  <Text>
    Automatic Padding!
  </Text>
</GradientBorderView>

Notice the gradientProps prop getting passed to <GradientBorderView/>. That can have any prop that expo-linear-gradient's <LinearGradient/> component supports, and it's typesafe! Sweet. That means we can get creative with our settings:

gradientProps={{
  colors: ['red', 'orange', 'blue', 'green'],
  start: { x: 0.5, y: 0, },
  end: { x: 1, y: 1 }
}}

I did my best to try and make sure the GradientBorderView behaves exactly like a normal view, except it has a gradient border. That means it supports any of the typical border styles and we can change the border radius of individual corners as well as the width of sides:

style={{
  justifyContent: 'center',
  alignItems: 'center',
  width: 100,
  height: 100,
  borderLeftWidth: 5,
  borderTopLeftRadius: 10,
  borderRightWidth: 5,
  borderBottomRightRadius: 5,
  borderBottomWidth: 2,
  borderBottomLeftRadius: 20,
  borderTopWidth: 0.25
}}

Like I said, you don't need to do any of this yourself, you can just download my package to create an actual gradient border.

This is only the beginning

The last thing I want to say is that this is just one potential application of @react-native-masked-view/masked-view, there are so many other possibilities with this tool!

For example something like this fade away scroll view where components fade out as they get near the top of the view:

It's really powerful, so get creative!

Thanks for reading I really do appreciate it ❤️