You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: CHANGELOG.md
+45Lines changed: 45 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,3 +1,48 @@
1
+
# 7.0.0 - 2022-07-26
2
+
> Major changes to improve the performance, simplify the library usage and improve the Developer Experience. An important update that consolidates this library's maturity.
*`disabled` property - Easy and performatic way to disable the shadow (but to keep rendering the children).
7
+
*`containerViewProps` property.
8
+
*`childrenViewProps` property.
9
+
10
+
### Changes
11
+
* Renamed `viewStyle` to `style`.
12
+
* Renamed `containerViewStyle` to `containerStyle`.
13
+
* Renamed `finalColor` to `endColor`, to follow the `start/end` pattern of the following change.
14
+
*`left`/`right` in `sides` and `corners` were changed to `start`/`end` for [RTL friendliness](https://reactnative.dev/blog/2016/08/19/right-to-left-support-for-react-native-apps)
15
+
*`sides` and `corners` properties are now objects instead of arrays.
> Note that you may still use `borderTopLeftRadius` etc in `style` besides `borderTopStartRadius` if you want to.
21
+
22
+
### Removals
23
+
<ul>
24
+
<li><code>size</code> property. The size now can only be defined in the Shadow's or child's <code>style</code>'s <code>width</code> and <code>height</code> properties.</li>
25
+
<li><code>radius</code> property. The radii now can only be defined in the Shadow's or child's <code>style</code>'s <code>borderRadius</code> related properties, such as <code>borderTopStartRadius</code>/<code>borderTopLeftRadius</code> etc.</li>
26
+
<li>
27
+
<details>
28
+
<summary><code>getChildRadius</code> and <code>getViewStyleRadius</code>.</summary>
29
+
Properties removed for the sake of simplicity of this package. Probably no one used them anyway. If you did use them and want or need them, open an issue about it with your use case. They are always active now. Before, they were active by default.
30
+
</details>
31
+
</li>
32
+
</ul>
33
+
34
+
### Improvements
35
+
* Significant performance and RAM usage due to general refactorings, SVGs' simplification (with the same appearence), improved memoizations and micro performance improvements.
36
+
* Now using `colord` package instead of `polished` to deal with colors' alpha.
37
+
38
+
### Fixes
39
+
*[RTL in web](https://github.com/necolas/react-native-web/issues/2350#issuecomment-1193642853).
40
+
* Error when there is more than a child. [#38](https://github.com/SrBrahma/react-native-shadow-2/issues/38)
41
+
* Error when there isn't a child. [#38 (comment)](https://github.com/SrBrahma/react-native-shadow-2/issues/38#issuecomment-1059716569)
42
+
* Situational 1-pixel overlap of corners.
43
+
44
+
<br/><hr/><br/>
45
+
1
46
## 6.0.6 - 2022-07-21
2
47
* Fixed Web Shadow when there are more than one being rendered. [#53](https://github.com/SrBrahma/react-native-shadow-2/issues/53). Many thanks, [@GreyJohnsonGit](https://github.com/GreyJohnsonGit)!
Copy file name to clipboardExpand all lines: README.md
+55-31Lines changed: 55 additions & 31 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,27 +10,36 @@
10
10
11
11
# react-native-shadow-2
12
12
13
-
[react-native-shadow](https://github.com/879479119/react-native-shadow) is dead for years. This one is an improved version with more functionalities, Typescript support and written from scratch. It doesn't require the usage of the `size` property: the shadow is smartly applied on the first render and then precisely reapplied on the following renders.
13
+
[react-native-shadow](https://github.com/879479119/react-native-shadow) is dead for years. This is an improved version with more functionalities, Typescript support and written from scratch. It's not required to define its size: the shadow is smartly applied on the first render and then precisely reapplied on the following ones.
14
14
15
15
It solves the old React Native issue of not having the same shadow appearence and usage for Android, iOS and Web.
16
16
17
-
The [ethercreative/react-native-shadow-generator](https://ethercreative.github.io/react-native-shadow-generator) website won't give you very similar results between the two platforms, for the reasons I described [here](https://github.com/ethercreative/react-native-shadow-generator/issues/2#issuecomment-738130722), when I started to think more seriously about this shadow issue.
17
+
The [ethercreative/react-native-shadow-generator](https://ethercreative.github.io/react-native-shadow-generator) website won't give you very similar results between the two platforms, for the reasons I described [here](https://github.com/ethercreative/react-native-shadow-generator/issues/2#issuecomment-738130722). It's also not as customizable as this library.
18
18
19
19
Compatible with Android, iOS and Web. **And Expo!**
@@ -66,38 +75,46 @@ import { Shadow } from 'react-native-shadow-2';
66
75
## Properties
67
76
68
77
#### All properties are optional.
69
-
70
-
<!--$shadowProperties-->
71
-
72
78
| Property | Description | Type | Default
73
79
| --- | --- | --- | ---
74
-
| **startColor** | The color of the shadow when it's right next to the given content, leaving it. Accepts alpha channel. | `string` | `'#00000020'`
75
-
| **finalColor** | The color of the shadow at the maximum distance from the content. Accepts alpha channel. | `string` | Transparent startColor. [Explanation](https://github.com/SrBrahma/react-native-shadow-2/issues/31#issuecomment-985578972)
80
+
| **startColor** | The initial gradient color of the shadow. | `string` | `'#00000020'`
81
+
| **endColor** | The final gradient color of the shadow. | `string` | Transparent startColor. [Explanation](https://github.com/SrBrahma/react-native-shadow-2/issues/31#issuecomment-985578972)
76
82
| **distance** | How far the shadow goes. | `number` | `10`
77
-
| **radius** | The radius of each corner of your child component. Passing a number will apply it to all corners.<br/><br/>If passing an object, `undefined` corners will have the radius of the `default` property if defined.<br/><br/>If `undefined`, it will try to get `viewStyle` radii if **`getViewStyleRadius`**, and then child's view style radii if **`getChildRadius`**, both true as default.<br/><br/>Each corner fallbacks to 0. | `number \| { default?: number ; topLeft?: number ; topRight?: number ; bottomLeft?: number ; bottomRight?: number }` | `undefined`
78
-
| **offset** | Moves the shadow. Negative `x` moves it left, negative `y` moves it up.<br/><br/>Accepts `'x%'` values, in relation to the child's size.<br/><br/>Setting an offset will default `paintInside` to true, as it's usually the desired behaviour. | `[x: string \| number, y: string \| number]` | `[0, 0]`
79
-
| **paintInside** | If the shadow should be applied inside the external shadows, below the child. `startColor` is used as fill color.<br/><br/>Useful when using `offset` or if your child has some transparency. | `boolean` | `false`, but `true` if `offset` is defined
80
-
| **sides** | The sides that will have their shadows drawn. Doesn't include corners. | `("left" \| "right" \| "top" \| "bottom")[]` | `['left', 'right', 'top', 'bottom']`
81
-
| **corners** | The corners that will have their shadows drawn. | `("topLeft" \| "topRight" \| "bottomLeft" \| "bottomRight")[]` | `['topLeft', 'topRight', 'bottomLeft', 'bottomRight']`
82
-
| **size** | If you don't want the 2 renders of the shadow (1st applies the relative positioning and sizing that may contain a quick pixel gap, 2nd uses exact pixel size from onLayout), you may want to use this. Using this won't trigger the onLayout on 2nd render and beyond, as the values entered here are already precisely rounded and are equal to the onLayout values.<br/><br/>You may want to set `backgroundColor` in the `viewStyle` property for your child background color.<br/><br/>Useful for animations. | `[width: number, height: number]` | `undefined`
83
-
| **safeRender** | If you don't want the relative sizing and positioning of the shadow on the 1st render but only on the 2nd render and beyond with the exact onLayout sizes. Useful if dealing with radii greater than the sides sizes, to avoid visual artifacts on the first render.<br/><br/>When `true`, the shadow only appears after the first render, where it's invisible. | `boolean` | `false`
84
-
| **viewStyle** | The style of the view that wraps your child component.<br/><br/>If using the `size` property, this wrapping view will automatically receive as style the `size` values and the radiuses from the `radius` property or from the child, if `getChildRadius`. | `StyleProp<ViewStyle>` | `undefined`
85
-
| **containerViewStyle** | The style of the view that contains the shadow and your child component. | `StyleProp<ViewStyle>` | `undefined`
86
-
| **getChildRadius** | If it should try to get the radii from the child's view `style` if our `radius` property is `undefined`. It gets the values of each corner, like `borderTopLeftRadius` and `borderRadius` as fallback for all corners.<br/><br/>The corners defined in `viewStyle` have priority over child's view style, if **`getViewStyleRadius`**. | `boolean` | `true`
87
-
| **getViewStyleRadius** | If it should try to get the radii from the `viewStyle` if `radius` property is `undefined`. It gets the values of each corner, like `borderTopLeftRadius` and `borderRadius` as fallback for all corners.<br/><br/>The corners defined in `viewStyle` have priority over child's view style, if **`getViewStyleRadius`**. | `boolean` | `true`
88
-
89
-
<!--/$shadowProperties-->
83
+
| **offset** | Moves the shadow. Negative `x` moves it left/start, negative `y` moves it up.<br/><br/>Accepts `'x%'` values.<br/><br/>Defining this will default `paintInside` to **true**, as it's the usual desired behaviour. | `[x: string \| number, y: string \| number]` | `[0, 0]`
84
+
| **paintInside** | Apply the shadow below/inside the content. `startColor` is used as fill color, without a gradient.<br/><br/>Useful when using `offset` or if your child has some transparency. | `boolean` | `false`, but `true` if `offset` is defined
85
+
| **sides** | The sides that will have their shadows drawn. Doesn't include corners. Undefined sides fallbacks to **true**. | `Record<'left' \| 'right' \| 'top' \| 'bottom', boolean>` | `undefined`
86
+
| **corners** | The corners that will have their shadows drawn. Undefined corners fallbacks to **true**. | `Record<'topStart' \| 'topEnd' \| 'bottomStart' \| 'bottomEnd', boolean>` | `undefined`
87
+
| **style** | The style of the View that wraps your children. Read the note at the end. | `StyleProp<ViewStyle>` | `undefined`
88
+
| **containerStyle** | The style of the View that wraps the Shadow and your children. Useful for margins. | `StyleProp<ViewStyle>` | `undefined`
89
+
| **stretch** | Make your children ocuppy all available horizontal space. [Explanation](https://github.com/SrBrahma/react-native-shadow-2/issues/7#issuecomment-899784537). | `boolean` | `false`
90
+
| **safeRender** | Won't use the relative sizing and positioning on the 1st render but on the following renders with the exact onLayout sizes. Useful if dealing with radii greater than the sides sizes (like a circle) to avoid visual artifacts on the 1st render.<br/><br/>If `true`, the Shadow doesn't appear on the 1st render. | `boolean` | `false`
91
+
| **disabled** | Disables the Shadow. Useful for easily reusing components as sometimes shadows are not desired.<br/><br/>`containerStyle` and `style` are still applied. | `boolean` | `false`
92
+
93
+
## Notes
94
+
95
+
* If the Shadow has a single child, it will get the `width`, `height` and all of the `borderRadius` properties from the children's `style` property, if defined.
96
+
97
+
* You may also define those properties in the Shadow's `style`. The defined properties here will have priority over the ones defined in the child's `style`.
98
+
99
+
* If the `width`**and**`height` are defined in any of those, there will be only a single render, as the first automatic sizing won't happen, only the precise render.
100
+
101
+
* You can use either the `'borderTopLeftRadius'` or `'borderTopStartRadius'` and their variations to define the corners radii, although I recommend the latter as it's the RTL standard.
102
+
103
+
<!-- Seems hard to understand. Will leave it undoc'ed until I improve it. -->
104
+
<!-- * We automatically set the radii in the `style` property, so it contains the Child's Android Ripple if you are using it. We already get those values, so it isn't an effort to set them. -->
90
105
91
106
## ⁉️ FAQ
92
107
93
108
**Q**: How to set the Shadow opacity?
94
109
95
-
**A**: The opacity is set directly in the `startColor` and `finalColor` properties, in the alpha channel. E.g.: `'#0001'` would be an almost transparent black. You may also use `'#rrggbbaa'`, `'rgba()'`, `'hsla()'` etc. [All patterns in this link, but not int colors, are accepted](https://reactnative.dev/docs/colors).
110
+
**A**: The opacity is set directly in the `startColor` and `endColor` properties, in the alpha channel. E.g.: `'#0001'` would be an almost transparent black. You may also use `'#rrggbbaa'`, `'rgba()'`, `'hsla()'` etc. [All patterns in this link, but not int colors, are accepted](https://reactnative.dev/docs/colors).
111
+
112
+
You may also use the `opacity` style to change both.
96
113
97
114
98
115
**Q**: [My component is no longer using the available parent width after applying the Shadow! What to do?](https://github.com/SrBrahma/react-native-shadow-2/issues/7#issuecomment-899764882)
99
116
100
-
**A**: Use `viewStyle={{alignSelf: 'stretch'}}` in your Shadow component. Explanation in link above!
117
+
**A**: Use the `stretch` property or `style={{alignSelf: 'stretch'}}` in your Shadow component. Explanation in link above!
101
118
102
119
103
120
**Q**: I want a preset for my Shadows!
@@ -117,11 +134,18 @@ const ShadowPresets = {
117
134
118
135
**A**: Upgrade your Typescript to at least 4.0.0! Those two properties use [**labeled tuples**](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html#labeled-tuple-elements). If you don't use Typescript, this won't happen.
119
136
137
+
138
+
## Performance Guide
139
+
140
+
> While you usually won't have any performance issues by using this, you may have performance issues if you have many Shadows in your screen, like in a FlatList. Those may help you to improve your performance:
141
+
142
+
* In `style` and on child's `style`, avoid using inline styles (eg `{{flex: 1}}`). Prefer using styles from `StyleSheet.create`. If you are using arrays for the styles (eg `style={[styles.view, {flex: 1}]}`), have this array creation outside the component or inside an `useMemo`, so it isn't unnecessarily created a new reference at each render and we can better memoize the Shadow.
143
+
120
144
## 🐛 Notes / Known Issues
121
145
122
146
* [Setting (or obtaining from the child) a too high `radius` (`> size/2`) will mess the shadow.](https://github.com/SrBrahma/react-native-shadow-2/issues/15)
123
147
**Update v5:** The radius is now properly limited on the 2nd render and beyond! You may use the safeRender to don't render the shadow until this 2nd render, when the onLayout happens and we get the exact sizes to apply this limit.
124
148
125
149
## 📰 Popularly seen on
126
150
### [LogRocket - Applying box shadows in React Native](https://blog.logrocket.com/applying-box-shadows-in-react-native/)
127
-
### [V. Petrachin - Top 10 Libraries You Should Know for React Native in 2022](https://viniciuspetrachin.medium.com/top-10-libraries-you-should-know-for-react-native-d435e5209c96)
151
+
### [V. Petrachin - Top 10 Libraries You Should Know for React Native in 2022](https://viniciuspetrachin.medium.com/top-10-libraries-you-should-know-for-react-native-d435e5209c96)
0 commit comments