Fast and high quality Android shadows for React Native
npm install react-native-fast-shadow
Fast and high quality Android shadows for React Native
React Native only supports shadows on Android through the elevation prop but achieving the desired effect is often impossible as it only comes with very few presets. Third-party libraries have been created to circumvent this but when used on many views, they can make you app slower or significantly increase its memory consumption.
componentshadowRadius, shadowColor, shadowOpacity and shadowOffset is just an alias of ``sh`
npm install react-native-fast-shadowor
yarn add react-native-fast-shadow
Usage:
`jsx
import { ShadowedView } from 'react-native-fast-shadow';
shadowOpacity: 0.4,
shadowRadius: 12,
shadowOffset: {
width: 5,
height: 3,
},
}}
>
`

shadowStyle():
The shadowStyle() utility can also be used to make it easier to create shadow styles and to keep shadows consistent accross platforms.style
It will create the same prop as above, but will divide the shadow radius by 2 on iOS (as for some reasons, iOS shadows are too large by a factor of 2 when compared to design tools or to CSS's box-shadows):
`jsx
import { ShadowedView, shadowStyle } from 'react-native-fast-shadow';
opacity: 0.4,
radius: 12,
offset: [5, 3],
})}
>
`
On Android, shadow drawables are generated with the following process (see ShadowFactory.java for more details):
1. The shape of the view (rectangle with rounded corners) is painted in black on a canvas
2. A gaussian blur is applied to the canvas with the given shadowRadius using the Renderscript APIshadowColor
3. The drawable is then converted to a NinePatchDrawable to ensure that corners of the shadow won't be distorted when the view is resized. This way, we can generate only a small shadow drawable and reuse it for all views with the same border and blur radii.
4. Finally, the drawable is rendered behind the view content: it is tinted with /shadowOpacity and offseted according to shadowOffset
How NinePatchDrawable works (notice how the corners are not streched when the drawable is resized):

React-native-fast-shadow comes with the following limitations:
* It only works with rounded rectangles: Unlike the iOS implementation, won't work with freeform views. It expects its direct descendant view to be a rounded rectangle (up to a circle). Solutions: For shadowed elements, you can use textShadowRadius. For complex shapes, react-native-androw is your best option.
* \ and its children have the same size, otherwise the shadow will be larger than the content (you can think of as a view with a background color).
* Corner radii can be inferred incorrectly: We use 's style or the style of its direct child to infer the corner radii to apply. If your view hierarchy is more complex, corner radii might not be inferred correctly. Solution: rework your view hierarchy or pass the borderRadius directly to the style prop of .
* Shadow radius is limited to 25 or below: This limitation comes from Renderscript's blur effect. Solution: Let us know if this is an issue for you. This can probably be worked around by downscaling the shadow bitmap before applying the blur effect.
The following table compares the memory consumption of react-native-fast-shadow, react-native-androw and react-native-shadow-2 when rendering 100 150x200pt
| No shadow | react-native-shadow-2 | react-native-androw | react-native-fast-shadow |
|-|-|-|-|
| 117MB (ref) | 430MB (+313MB) | 403MB (+286MB) | 123MB (+6MB) |