# react-native-drop-shadow

> is a small and simple package that helps make your React Native app

Latest version **1.0.3** (published 2025-02-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-drop-shadow
pnpm add react-native-drop-shadow
yarn add react-native-drop-shadow
bun add react-native-drop-shadow
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2025-02-12 |
| First published | 2020-07-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 48.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 257 |
| Author | Hoang Lam |
| Maintainers | hlam104 |
| Keywords | react-native, shadow, android, drop shadow, react native new, new, shadow android react native, react-native-shadow, react-native shadow, react-native-drop-shadow, shadow react native, shadow react |

## Links

- npm: https://www.npmjs.com/package/react-native-drop-shadow
- Repository: https://github.com/hoanglam10499/react-native-drop-shadow
- Homepage: https://github.com/hoanglam10499/react-native-drop-shadow#readme
- Issues: https://github.com/hoanglam10499/react-native-drop-shadow/issues
- npm.io page: https://npm.io/package/react-native-drop-shadow

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2025-02-12
- 1.0.2 — 2025-01-25
- 1.0.1 — 2025-01-22
- 1.0.0 — 2023-10-30
- 0.0.9 — 2023-09-19
- 0.0.8 — 2023-08-25
- 0.0.7 — 2023-05-31
- 0.0.6 — 2022-10-25
- 0.0.5 — 2022-07-26
- 0.0.4 — 2021-12-14
- 0.0.3 — 2021-12-14
- 0.0.2 — 2020-07-03
- 0.0.1 — 2020-07-01

## README

<img width="1000px"  src="./img/main.png" />

[![npm version](https://img.shields.io/npm/v/react-native-drop-shadow?color=green)](https://www.npmjs.com/package/react-native-drop-shadow) [![npm download](https://img.shields.io/npm/dm/react-native-drop-shadow?color=blue)](https://www.npmjs.com/package/react-native-drop-shadow)

The problem is that a shadows does not work with React Native in Android. This view takes its children's, creates a bitmap representation, blur it and color it to styles shadow values like in iOS

### Installation

`yarn add react-native-drop-shadow`

If you using `React-native < 0.76`:

`yarn add react-native-drop-shadow@1.0.0`

If you using `minSdkVersion = 16`:

`yarn add react-native-drop-shadow@0.0.4`

### Limitations

- Android has a bitmap limitation of 2048x2048, but this might depend on API version.
- Uses Bitmap Rendering to simulate the shadows which can be performance heavy if multiple shadows and animations are rendered at the same time.

### Usage

```js
import DropShadow from 'react-native-drop-shadow';
```

```js
export default function usage() {
  return (
    <DropShadow
      style={{
        shadowColor: '#000',
        shadowOffset: {
          width: 0,
          height: 0,
        },
        shadowOpacity: 1,
        shadowRadius: 5,
      }}
    >
      ...
    </DropShadow>
  );
}
```

#### Usage with FlatList

```js
export default function withFlatList() {
  return (
    <FlatList
      data={['']}
      keyExtractor={(item, index) => 'List-' + index}
      CellRendererComponent={DropShadow} // <==== add line
      renderItem={({ item, index }) => (
        <DropShadow
          style={{
            shadowColor: '#000',
            shadowOffset: {
              width: 0,
              height: 0,
            },
            shadowOpacity: 1,
            shadowRadius: 5,
          }}
        >
          ...
        </DropShadow>
      )}
    />
  );
}
```

#### Usage with Animated Views

To make this work in place of an `Animated.View`, you need to use `Animated.createAnimatedComponent` to create an animatable version of `DropShadow`. For example:

```js
const AnimatedDropShadow = Animated.createAnimatedComponent(DropShadow);

export default function withAnimatedViews() {
  return (
    <AnimatedDropShadow
      style={{
        shadowColor: '#000',
        shadowOffset: {
          width: 0,
          height: 0,
        },
        shadowOpacity: 1,
        shadowRadius: 5,
      }}
    >
      ...
    </AnimatedDropShadow>
  );
}
```

You can then use `AnimatedDropShadow` in place of `Animated.View`.

### License

MIT

### Donate ✨

Support maintainers with a donation and help them continue with activities.

<p><a href="https://www.buymeacoffee.com/hoanglam104"> <img align="left" src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="50" width="210" alt="fateh999" /></a></p><br><br><br>

---
_Source: https://npm.io/package/react-native-drop-shadow · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._