{"id":13577497,"url":"https://github.com/alan-eu/react-native-fast-shadow","last_synced_at":"2026-01-16T04:04:51.905Z","repository":{"id":214469683,"uuid":"554095316","full_name":"alan-eu/react-native-fast-shadow","owner":"alan-eu","description":"Fast and high quality Android shadows for React Native","archived":false,"fork":false,"pushed_at":"2025-11-21T06:40:48.000Z","size":1415,"stargazers_count":579,"open_issues_count":14,"forks_count":13,"subscribers_count":24,"default_branch":"main","last_synced_at":"2025-11-21T08:32:49.707Z","etag":null,"topics":["android","react-native","shadow"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alan-eu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-10-19T08:39:41.000Z","updated_at":"2025-11-10T04:55:28.000Z","dependencies_parsed_at":"2024-08-05T10:58:34.462Z","dependency_job_id":"dd255484-1cee-4ccf-82a8-d7a3702377ca","html_url":"https://github.com/alan-eu/react-native-fast-shadow","commit_stats":{"total_commits":58,"total_committers":7,"mean_commits":8.285714285714286,"dds":0.3275862068965517,"last_synced_commit":"63cc79693a9f9cef195cdaf2510781516ebdd0c9"},"previous_names":["alan-eu/react-native-fast-shadow"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/alan-eu/react-native-fast-shadow","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan-eu%2Freact-native-fast-shadow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan-eu%2Freact-native-fast-shadow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan-eu%2Freact-native-fast-shadow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan-eu%2Freact-native-fast-shadow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alan-eu","download_url":"https://codeload.github.com/alan-eu/react-native-fast-shadow/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan-eu%2Freact-native-fast-shadow/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28477206,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T03:13:13.607Z","status":"ssl_error","status_checked_at":"2026-01-16T03:11:47.863Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","react-native","shadow"],"created_at":"2024-08-01T15:01:21.943Z","updated_at":"2026-01-16T04:04:51.878Z","avatar_url":"https://github.com/alan-eu.png","language":"Java","funding_links":[],"categories":["Java"],"sub_categories":[],"readme":"# 🌖 react-native-fast-shadow\n\n[![npm package](https://img.shields.io/npm/v/react-native-fast-shadow?color=brightgreen\u0026label=npm%20package)](https://www.npmjs.com/package/react-native-fast-shadow)\n\n**Fast and high quality** Android shadows for React Native\n\n## Why\n\nReact Native only supports shadows on Android through the [elevation](https://reactnative.dev/docs/view-style-props#elevation-android) 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.\n\n## Features\n* 💆‍♀️ **Easy to use:** Drop-in replacement for the `\u003cView\u003e` component\n* ⚡️ **Performant:** Shadows can be applied to a large number of views without any signicant performance impact. It has been optimized for low memory consumption and fast rendering\n* 🎛 **Customizable:** Supports all the regular shadow props, `shadowRadius`, `shadowColor`, `shadowOpacity` and `shadowOffset`\n* 📱 **Universal:** Works on all platforms. On iOS and Web, `\u003cShadowedView\u003e` is just an alias of `\u003cView\u003e`\n\n## Getting started\n\n```sh\nnpm install react-native-fast-shadow\n# or\nyarn add react-native-fast-shadow\n```\n\n**Usage:**\n\n```jsx\nimport { ShadowedView } from 'react-native-fast-shadow';\n\n\u003cShadowedView\n  style={{\n    shadowOpacity: 0.4,\n    shadowRadius: 12,\n    shadowOffset: {\n      width: 5,\n      height: 3,\n    },\n  }}\n\u003e\n  \u003cImage source={require('./kitten.png')} style={{ borderRadius: 30 }} /\u003e\n\u003c/ShadowedView\u003e\n```\n\n\u003cimg width=\"198\" src=\"https://user-images.githubusercontent.com/20420653/197513322-81c46d07-2f44-463b-86ef-86a4ad856146.png\"\u003e\n\n**shadowStyle():**\n\nThe `shadowStyle()` utility can also be used to make it easier to create shadow styles and to **keep shadows consistent** accross platforms.\nIt will create the same `style` 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):\n\n```jsx\nimport { ShadowedView, shadowStyle } from 'react-native-fast-shadow';\n\n\u003cShadowedView\n  style={shadowStyle({\n    opacity: 0.4,\n    radius: 12,\n    offset: [5, 3],\n  })}\n\u003e\n  \u003cImage source={require('./kitten.png')} style={{ borderRadius: 30 }} /\u003e\n\u003c/ShadowedView\u003e\n```\n\n## How it works under the hood\n\nOn Android, shadow drawables are generated with the following process (see [ShadowFactory.java](https://github.com/alan-eu/react-native-fast-shadow/blob/main/android/src/main/java/com/reactnativefastshadow/ShadowFactory.java) for more details):\n1. The shape of the view (rectangle with rounded corners) is painted in black on a canvas\n2. A gaussian blur is applied to the canvas with the given `shadowRadius` using the Renderscript API\n3. The drawable is then converted to a [NinePatchDrawable](https://developer.android.com/reference/android/graphics/drawable/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.\n4. Finally, the drawable is rendered behind the view content: it is tinted with `shadowColor`/`shadowOpacity` and offseted according to `shadowOffset`\n\n**How NinePatchDrawable works** (notice how the corners are not streched when the drawable is resized):\n\n\u003cimg width=\"240\" src=\"https://user-images.githubusercontent.com/20420653/197518195-2e13d80e-2a24-4e1c-ae53-444306733c83.gif\"\u003e\n\n## Troubleshooting\n\nReact-native-fast-shadow comes with the following limitations:\n* **It only works with rounded rectangles:** Unlike the iOS `\u003cView\u003e` implementation, `\u003cShadowedView\u003e` won't work with freeform views. It expects its direct descendant view to be a rounded rectangle (up to a circle). **Solutions:** For shadowed `\u003cText\u003e` elements, you can use [textShadowRadius](https://reactnative.dev/docs/text-style-props.html#textshadowradius). For complex shapes, [react-native-androw](https://github.com/folofse/androw) is your best option.\n* **\\\u003cShadowedView\\\u003e expects its child view to fill it:** It's up to you to make sure that `\u003cShadowedView\u003e` and its children have the same size, otherwise the shadow will be larger than the content (you can think of `\u003cShadowedView\u003e` as a view with a background color).\n* **Corner radii can be inferred incorrectly:** We use `\u003cShadowedView\u003e`'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 `\u003cShadowedView\u003e`.\n* **Shadow radius is limited to 25 or below:** This limitation comes from Renderscript's [blur effect](https://developer.android.com/reference/android/renderscript/ScriptIntrinsicBlur). **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.\n\n## Benchmark\n\nThe following table compares the memory consumption of `react-native-fast-shadow`, [react-native-androw](https://github.com/folofse/androw) and [react-native-shadow-2](https://github.com/SrBrahma/react-native-shadow-2) when rendering 100 150x200pt `\u003cImage\u003e` on a Pixel 2 with a 12pt radius shadow. The app was built using the debug variant and Hermes.\n\n| No shadow | react-native-shadow-2 | react-native-androw | react-native-fast-shadow |\n|-|-|-|-|\n| 117MB (ref) | 430MB **(+313MB)** | 403MB **(+286MB)** | 123MB **(+6MB)** |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falan-eu%2Freact-native-fast-shadow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falan-eu%2Freact-native-fast-shadow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falan-eu%2Freact-native-fast-shadow/lists"}