From f188667a1a27f05578e6ca0b95574fd3672923ab Mon Sep 17 00:00:00 2001 From: Isaac Way Date: Sun, 28 Aug 2022 13:25:28 -0500 Subject: [PATCH 1/4] Update README.md --- README.md | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 9528573..d866fa6 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,15 @@ # 🤯 Actual Gradient Borders in React Native 🤯 +![banner](https://user-images.githubusercontent.com/12774588/187088570-5463dd82-6870-41a1-8b8a-6f6aa8c3f74c.png) ## Features - Easily create views with gradient borders - Supports any background (including transparent) - Uses same style properties as `` - - borderWidth, borderRadius, borderLeftWidth etc. + - borderWidth, borderRadius, borderLeftWidth, borderTopRightRadius etc. - Exposes `expo-linear-gradient` props to allow full customization of gradient - Great typesafety to prevent potential usage issues + + ## Installation This module uses `expo-linear-gradient`, which requires `expo` to be installed. @@ -43,11 +46,13 @@ cd ios && pod install /> ``` +![Screen Shot 2022-08-28 at 10 34 13 AM](https://user-images.githubusercontent.com/12774588/187088606-53acce3f-41c2-4536-8e18-8f8c4b3506a7.png) + 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`. If you want more information on how to modify the gradient itself, [check out Expo's docuementation.](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) (it's good). +`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 Expo's docuementation.](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) (it's good). ### Differences with `` #### Absolute positioning @@ -83,4 +88,13 @@ One difference between the `` and a regular `` borde ``` #### 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. \ No newline at end of file +`` 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** | **Required** | **Type** | **Description** | +|---------------|--------------|---------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| gradientProps | Yes | GradientProps | Props to be passed to the `` from [`expo-linear-gradient`](https://docs.expo.dev/versions/latest/sdk/linear-gradient/
).
Requires at least a `colors` property. Supports all `LinearGradient` props except `style` and
`pointerEvents`. | From 62cb1eadd94d0ef317c2f084caf59784dac1d90e Mon Sep 17 00:00:00 2001 From: Isaac Way Date: Sun, 28 Aug 2022 13:26:25 -0500 Subject: [PATCH 2/4] Update README.md --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index d866fa6..fb9c58f 100644 --- a/README.md +++ b/README.md @@ -95,6 +95,6 @@ One difference between the `` and a regular `` borde `` 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** | **Required** | **Type** | **Description** | -|---------------|--------------|---------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| gradientProps | Yes | GradientProps | Props to be passed to the `` from [`expo-linear-gradient`](https://docs.expo.dev/versions/latest/sdk/linear-gradient/
).
Requires at least a `colors` property. Supports all `LinearGradient` props except `style` and
`pointerEvents`. | +| **Props** | **Description** | **Type** | **Required** | +|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------|--------------| +| gradientProps | Props to be passed to the `` from [`expo-linear-gradient`](https://docs.expo.dev/versions/latest/sdk/linear-gradient/
).
Requires at least a `colors` property. Supports all `LinearGradient` props except `style` and `pointerEvents`. | GradientProps | Yes | From 3a7a6c1a2e8772c32dd27f55349c67c570c0063f Mon Sep 17 00:00:00 2001 From: Isaac Way Date: Sun, 28 Aug 2022 13:27:54 -0500 Subject: [PATCH 3/4] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index fb9c58f..8e0b7f8 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ - Exposes `expo-linear-gradient` props to allow full customization of gradient - Great typesafety to prevent potential usage issues - +[API Reference](api-reference) ## Installation This module uses `expo-linear-gradient`, which requires `expo` to be installed. @@ -56,7 +56,7 @@ If you don't pass a border width there will be no gradient border shown. ### Differences with `` #### 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 ``, if it's bothering you you'll have to deal with it. For example one solution is to wrap the inner view with an extra ``: +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 Date: Sun, 28 Aug 2022 13:28:15 -0500 Subject: [PATCH 4/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8e0b7f8..259f431 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ - Exposes `expo-linear-gradient` props to allow full customization of gradient - Great typesafety to prevent potential usage issues -[API Reference](api-reference) +[API Reference](#api-reference) ## Installation This module uses `expo-linear-gradient`, which requires `expo` to be installed.