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.
It solves the old React Native issue of not having the same shadow appearence and usage for Android, iOS and Web.
The ethercreative/react-native-shadow-generator website won't give you very similar results between the two platforms, for the reasons I described here. It's also not as customizable as this library.
Compatible with Android, iOS and Web. And Expo!
Supports RTL.
Give this library a quick try!
There are important breaking changes! Read it if upgrading!
Old Readme, if you are still using previous versions.
1. First install react-native-svg.
The latest
react-native-svgversion is recommended, including if using Expo.
npm i react-native-shadow-2
# or
yarn add react-native-shadow-2import { Shadow } from 'react-native-shadow-2';
<Shadow>
<Text style={{ margin: 20, fontSize: 20 }}>🙂</Text>
</Shadow>
<Shadow distance={15} startColor={'#eb9066d8'} endColor={'#ff00ff10'} offset={[3, 4]}>
<View style={{ borderTopStartRadius: 24, borderBottomEndRadius: 0, borderRadius: 10, backgroundColor: '#c454f0dd' }}>
<Text style={{ margin: 20, fontSize: 20 }}>🤯</Text>
</View>
</Shadow>
| Property | Description | Type | Default |
|---|---|---|---|
| startColor | The initial gradient color of the shadow. | string |
'#00000020' |
| endColor | The final gradient color of the shadow. | string |
Transparent startColor. Explanation. |
| distance | How far the shadow goes. | number |
10 |
| offset | Moves the shadow. Negative x moves it left/start, negative y moves it up.Accepts 'x%' values.Defining this will default paintInside to true, as it's the usual desired behaviour. |
[x: string | number, y: string | number] |
[0, 0] |
| paintInside | Apply the shadow below/inside the content. startColor is used as fill color, without a gradient.Useful when using offset or if your child has some transparency. |
boolean |
false, but true if offset is defined |
| sides | The sides that will have their shadows drawn. Doesn't include corners. Undefined sides fallbacks to true. Explanation. | Record<'start' | 'end' | 'top' | 'bottom', boolean> |
undefined |
| corners | The corners that will have their shadows drawn. Undefined corners fallbacks to true. Explanation. | Record<'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd', boolean> |
undefined |
| style | The style of the View that wraps your children. Read the Notes below. | StyleProp<ViewStyle> |
undefined |
| containerStyle | The style of the View that wraps the Shadow and your children. Useful for margins. | StyleProp<ViewStyle> |
undefined |
| stretch | Make your children ocuppy all available horizontal space. Explanation. | boolean |
false |
| 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. If true, the Shadow won't appear on the 1st render. |
boolean |
false |
| disabled | Disables the Shadow. Useful for easily reusing components as sometimes shadows are not desired.containerStyle and style are still applied. |
boolean |
false |
-
If the Shadow has a single child, it will get the
width,heightand all of theborderRadiusproperties from the children'sstyleproperty, if defined. -
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'sstyle. -
If the
widthandheightare defined in any of those, there will be only a single render, as the first automatic sizing won't happen, only the precise render. -
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. -
Having a radius greater than its side will mess the shadow if the sizes aren't defined. You can use the
safeRenderproperty to only show the shadow on the 2nd render and beyond, when we have the exact component size and the radii are properly limited. -
Radii greater than 2000 (Tailwind's
rounded-fullis 9999) may crash Android.
-
The opacity is set directly in the
startColorandendColorproperties, in the alpha channel. E.g.:'#0001'is an almost transparent black. You may also use'#rrggbbaa','rgba()','hsla()'etc. All patterns in this link, but not int colors, are accepted. -
Use the
stretchproperty orstyle={{alignSelf: 'stretch'}}in your Shadow component. Explanation! -
It's exported the
ShadowPropstype, the props of the Shadow component. You may do the following:const ShadowPresets = { button: { offset: [0, 1], distance: 1, startColor: '#0003', } as ShadowProps, }; <Shadow {...ShadowPresets.button}>
-
Upgrade your Typescript to at least 4.0.0! Those two properties use labeled tuples. If you don't use Typescript, this won't happen.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent