How to apply border radius to certain corners of the Expo LinearGradient component

Question

I am applying border radii to the top left and bottom left corners of a LinearGradient component by setting its style property to include the following parameters:

{
   borderTopLeftRadius: 5,
   borderBottomLeftRadius: 5
}

With Expo SDK version 32 this worked without trouble. But after updating the project to use the Expo SDK version 34 the LinearGradient component no longer accepts this styling. The radii just does not show up.

When I simply apply borderRadius: 5 then the styling is applied and the LinearGradient has a border radius of 5 on all the corners. As soon as I change these to borderTopLeftRadius and borderBottomLeftRadius the radii just does not show up.

Here is my code as it is now:

import React from 'react';
import { View } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

const StatusBox = () => {
   const { statusStyle } = styles;
   return (
      <View style={{ flex: 1 }}>
         <LinearGradient
            colors={['#222', '#333']}
            start={[0, 0.5]}
            end={[1, 0.5]}
            style={[statusStyle, {}]}
         >
            //...other JSX here
         </LinearGradient>
      </View>
   );
};

const styles = {
   statusStyle: {
      //...other styling here
      borderTopLeftRadius: 5,
      borderBottomLeftRadius: 5
   }
};

export { StatusBox };

There are no warnings or errors in the console. The application runs in the Expo Client on an iOS device without check. As said, when applying merely borderRadius: 5 it works and the borders show on all four corners, but when trying to apply radii to only two borders i.e. borderTopLeftRadius and borderBottomLeftRadius it simply does not show.

Answer 1

You might fixed it by wrapping the LinearGradient on a View component and applying the borderRadius to it instead of directly applying it to the LinearGradient.

<View style={styles.imageContainerIOS}>
    <LinearGradient ... />
</View>

const imageContainerIOS: {
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 0,
    borderTopLeftRadius: 5,
    borderTopRightRadius: 0,
    overflow: 'hidden',
},

...

Except this, you can try to add overflow: 'hidden' to your style object. It may be fixed your problem directly.