iway1 / react-native-gradient-border

🤯 Actual Gradient Borders in React Native 🤯

Features

• Easily create views with gradient borders
• Supports any background (including transparent)
• Uses same style properties as <View/>
  • borderWidth, borderRadius, borderLeftWidth, borderTopRightRadius etc.
• Exposes react-native-linear-gradient props to allow full customization of gradient
• Great typesafety to prevent potential usage issues

API Reference

Not Maintained

This library is not being actively maintained.

Installation

Install package and peer dependencies:

yarn add @good-react-native/gradient-border @react-native-masked-view/masked-view react-native-linear-gradient

Then install pods (iOS):

cd ios && pod install

Usage

<GradientBorderView> 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 <LinearGradient/>:

<GradientBorderView
    gradientProps={{
        colors: ['red', 'orange']
    }}
    style={{
        borderWidth: 5,
        borderRadius: 5,
        height: 50,
        width: 50,
    }}
/>

Note we just use the views border styles to control things like border width, border radius, etc. All border styles are supported (borderTopWidth, 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).

Differences with <View/>

Absolute positioning

One difference between the <GradientBorderView/> and a regular <View/> 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 <GradientBorderView/>. One solution is to wrap the inner view with an extra <View/>:

<GradientBorderView
    gradientProps={{
        colors: ['red', 'orange']
    }}
    style={{
        borderWidth: 5,
        borderRadius: 5,
        height: 50,
        width: 50,
    }}
>
    <View
        style={{width: '100%', height: '100%',}}
    >
        <View 
            style={{
                position: 'absolute',
                right: 0,
                top: 0,
                width: 5, 
                height: 5,
                color: 'blue',
            }}
        />
    </View>
</GradientBorderView>

Percentage padding

<GradientBorderView/> 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

<GradientBorderView/> 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 <LinearGradient/> from react-native-linear-gradient. Requires at least a colors property. Supports all LinearGradient props except style and pointerEvents.	GradientProps	Yes

react-native-gradient-border's Issues

Export style type

By exporting the style type it will be easier for consumers to build the correct prop when using the library with typescript.

eg add

export type GradientBorderViewStyle = StyleProp<
            GradientBorderViewProps & 
            {paddingLeft?: number, paddingRight?: number, paddingTop?: number, paddingBottom?: number, padding?: number}
        >

Can use internally as needed eg:

export default function GradientBorderView({
    gradientProps,
    ...props
}: Omit<ViewProps, 'style'> &
    {
        style?: GradientBorderViewStyle
    } &
    RequiredGradientBorderProps
) {

Build source code

Currently getting tsc issues depending on this project. #2
addresses the issues experienced however, if the code is transpired and then published it will avoid the issue happening again in the future.

The library should be published with a /lib directory containing the javascript and type definitions. The package can reference this directory as the entry file and /src can then be excluded from the artefact published to npm.

Either tsc or a bundling tool like webpack/esbuild/rollup can help achieve this

Not working with react 18 version

# npm resolution error report

While resolving: [email protected]
Found: [email protected]
node_modules/react
  react@"18.2.0" from the root project
  peer react@">=16" from @react-native-masked-view/[email protected]
  node_modules/@react-native-masked-view/masked-view
    @react-native-masked-view/masked-view@"^0.2.9" from the root project
    peer @react-native-masked-view/masked-view@"^0.2.7" from @good-react-native/[email protected]
    node_modules/@good-react-native/gradient-border
      @good-react-native/gradient-border@"*" from the root project
  peer react@"18.2.0" from [email protected]
  node_modules/react-native
    react-native@"0.72.3" from the root project
    peer react-native@">=0.57" from @react-native-masked-view/[email protected]
    node_modules/@react-native-masked-view/masked-view
      @react-native-masked-view/masked-view@"^0.2.9" from the root project
      peer @react-native-masked-view/masked-view@"^0.2.7" from @good-react-native/[email protected]
      node_modules/@good-react-native/gradient-border
        @good-react-native/gradient-border@"*" from the root project

Could not resolve dependency:
peer react@"^17.0.0" from @good-react-native/[email protected]
node_modules/@good-react-native/gradient-border
  @good-react-native/gradient-border@"*" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Can you please guide me how can i get it work. In my previous project it's working fine.
Thanks