Forked and fixed version of react-native-gradient-border
npm install @shubhamkumarbaranwals/react-native-gradient-borderreact-native-linear-gradient props to allow full customization of gradient``sh`
yarn add @good-react-native/gradient-border @react-native-masked-view/masked-view react-native-linear-gradient
Then install pods (iOS):
`sh`
cd ios && pod install
works just like a regular view, except it has an additional required prop called gradientProps, which are the props that will get passed to the :
`jsx
colors: ['red', 'orange']
}}
style={{
borderWidth: 5,
borderRadius: 5,
height: 50,
width: 50,
}}
/>
`!Screen Shot 2022-08-28 at 10 34 13 AM
Note we just use the views border styles to control things like border width, border radius, etc. All border styles are supported (
, borderBottomLeftRadius, etc).If you don't pass a border width there will be no gradient border shown.
colors is the only required property to pass to gradientProps, but there are other props for customizing the gradient. If you want more information on how to modify the gradient itself, check out the docs. (it's good).$3
#### Absolute positioning
One difference between the and a regular border is that when applying a border to a regular view, any absolute positioned child components will take into account the border width. It doesn't seem like there's any way to mimic this behavior in our . One solution is to wrap the inner view with an extra :`jsx
colors: ['red', 'orange']
}}
style={{
borderWidth: 5,
borderRadius: 5,
height: 50,
width: 50,
}}
>
>
position: 'absolute',
right: 0,
top: 0,
width: 5,
height: 5,
color: 'blue',
}}
/>
#### Percentage padding
applies its own padding internally to compensate for the border width. Since that padding is combined with the developers padding, we can't support percentage based padding.API Reference
GradientBorderView Props
support all props that React Native's view supports, but uses a modified version of the style prop. Specifically, the modified style prop does not accept any of the borderColor props, and only accepts number padding values.Additionally, it has the following props:
| Props | Description | Type | Required |
|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------|--------------|
| gradientProps | Props to be passed to the
from react-native-linear-gradient.
Requires at least a colors property. Supports all LinearGradient props except style and pointerEvents`. | GradientProps | Yes |