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!

The latest react-native-svg version is recommended, including if using Expo.

npm i react-native-shadow-2
# or
yarn add react-native-shadow-2

import { 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>

• 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.

• 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.

• 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.

• 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 safeRender property 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-full is 9999) may crash Android.

• How to set the Shadow opacity?

  The opacity is set directly in the startColor and endColor properties, 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.

• My component is no longer using the available parent width after applying the Shadow! What to do?

  Use the stretch property or style={{alignSelf: 'stretch'}} in your Shadow component. Explanation!

• I want a preset for my Shadows!

  It's exported the ShadowProps type, 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}>

• The offset and size properties are throwing Typescript errors!

  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.

• LogRocket - Applying box shadows in React Native

• V. Petrachin - Top 10 Libraries You Should Know for React Native in 2022