{"id":13601561,"url":"https://github.com/tokkozhin/react-native-neomorph-shadows","last_synced_at":"2025-04-11T04:31:12.695Z","repository":{"id":38365823,"uuid":"238665493","full_name":"tokkozhin/react-native-neomorph-shadows","owner":"tokkozhin","description":"Shadows and neumorphism/neomorphism for iOS \u0026 Android (like iOS).","archived":false,"fork":false,"pushed_at":"2023-02-26T18:20:35.000Z","size":30760,"stargazers_count":804,"open_issues_count":26,"forks_count":92,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-10-01T22:37:42.637Z","etag":null,"topics":["inner-shadow","neomorphism","neumorphism","shadow","shadow-svg","shadowbox"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/tokkozhin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-02-06T10:44:39.000Z","updated_at":"2024-09-26T04:35:16.000Z","dependencies_parsed_at":"2024-01-07T02:58:03.407Z","dependency_job_id":"07b957f7-7db0-4322-8196-1862b9153690","html_url":"https://github.com/tokkozhin/react-native-neomorph-shadows","commit_stats":{"total_commits":43,"total_committers":9,"mean_commits":4.777777777777778,"dds":"0.34883720930232553","last_synced_commit":"c7565ae8cd2bca4756bb13b049ea74c6ae6aef69"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tokkozhin%2Freact-native-neomorph-shadows","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tokkozhin%2Freact-native-neomorph-shadows/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tokkozhin%2Freact-native-neomorph-shadows/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tokkozhin%2Freact-native-neomorph-shadows/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tokkozhin","download_url":"https://codeload.github.com/tokkozhin/react-native-neomorph-shadows/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223458443,"owners_count":17148468,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["inner-shadow","neomorphism","neumorphism","shadow","shadow-svg","shadowbox"],"created_at":"2024-08-01T18:01:04.587Z","updated_at":"2024-11-07T04:31:11.426Z","avatar_url":"https://github.com/tokkozhin.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","How it all start ?"],"sub_categories":["UI Toolkits"],"readme":"![npm](https://img.shields.io/npm/v/react-native-neomorph-shadows?style=flat-square)\n![npm](https://img.shields.io/npm/dt/react-native-neomorph-shadows?style=flat-square)\n![github](https://img.shields.io/github/stars/tokkozhin/react-native-neomorph-shadows?style=flat-square)\n![Supports Android and iOS](https://img.shields.io/badge/platforms-android%20|%20ios-lightgrey.svg?style=flat-square)\n\n# react-native-neomorph-shadows\n\nShadows and neumorphism/neomorphism for iOS \u0026 Android (like iOS).\n\n[`See example folder`](example)\n\n![Shadows Demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/shadows.gif)\n![Neomorph Demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/neomorph.gif)\n![Neomorph Blur Demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/neomorphblur.gif)\n![More Demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/more.gif)\n\n## Installation\n\nIMPORTANT:\nthis library, starting from v1.0.0, no longer supports expo because [`React Native Art`]('https://github.com/react-native-community/art') library was recently deprecated from expo.\n\n### Step 1\n\nRun the command below to install the plugin.\n\n```bash\nnpm i react-native-neomorph-shadows\n```\n\n### Step 2\n\nYou need to install [`React Native Art`]('https://github.com/react-native-community/art') in your project.\n\n```bash\nnpm install @react-native-community/art --save\n```\n\nWith autolinking (react-native 0.60+)\n\n```bash\ncd ios \u0026\u0026 pod install \u0026\u0026 cd ..\n```\n\nPre 0.60\n\n```bash\nreact-native link @react-native-community/art\n```\n\nGreat! Let's start to use it.\n\n## Usage\n\nThere are three components: **Shadow**, **Neomorph** \u0026 **NeomorphBlur**.\nProp style supports most of the view/layout styles.\n\n**IMPORTANT: Components dont't support `Flex`.**\n\nIf you want flex and auto sizing of Shadow or Neomorph components, use **ShadowFlex/NeomorphFlex** experimental components, but be careful, these components reduce performance by double rerender. If you know exactly what size(width, height props) it should be, use **Shadow/Neomorph** components.\n\n### Shadow / ShadowFlex\n\n![Outer shadow demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/shadow.png)\n![Inner shadow demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/inner_shadow.png)\n\n```jsx\nimport { Shadow } from 'react-native-neomorph-shadows';\n\n...\n\n\u003cShadow\n inner // \u003c- enable inner shadow\n useArt // \u003c- set this prop to use non-native shadow on ios\n style={{\n shadowOffset: {width: 10, height: 10},\n shadowOpacity: 1,\n shadowColor: \"grey\",\n shadowRadius: 10,\n borderRadius: 20,\n backgroundColor: 'white',\n width: 100,\n height: 100,\n // ...include most of View/Layout styles\n }}\n\u003e\n ...\n\u003c/Shadow\u003e\n```\n\n### Neomorph / NeomorphFlex\n\nOpacity of two shadows automaticly changing and depends of `backgroundColor` brightness.\n\n![Outer neomorph shadow demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/neomorph.png)\n![Inner neomorph shadow demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/inner_neomorph.png)\n\n```jsx\nimport { Neomorph } from 'react-native-neomorph-shadows';\n\n...\n\n\u003cNeomorph\n inner // \u003c- enable shadow inside of neomorph\n swapShadows // \u003c- change zIndex of each shadow color\n style={{\n shadowRadius: 10,\n borderRadius: 25,\n backgroundColor: '#DDDDDD',\n width: 150,\n height: 150,\n }}\n\u003e\n ...\n\u003c/Neomorph\u003e\n```\n\n### Nested Neomorph\n\n![Nested neomorph shadow demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/neomorph_nested.png)\n\n```jsx\n\u003cNeomorph\n style={{\n shadowRadius: 3,\n borderRadius: 100,\n backgroundColor: '#DDDDDD',\n width: 200,\n height: 200,\n justifyContent: 'center',\n alignItems: 'center',\n }}\n\u003e\n \u003cNeomorph\n inner\n style={{\n shadowRadius: 7,\n borderRadius: 90,\n backgroundColor: '#F19F9F',\n width: 180,\n height: 180,\n justifyContent: 'center',\n alignItems: 'center',\n }}\n \u003e\n \u003cNeomorph\n style={{\n shadowRadius: 7,\n borderRadius: 50,\n backgroundColor: '#DDDDDD',\n width: 100,\n height: 100,\n }}\n /\u003e\n \u003c/Neomorph\u003e\n\u003c/Neomorph\u003e\n```\n\n### Custom shadow colors of Neomorph\n\n![Custom neomorph shadow demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/neomorph_custom_colors.jpg)\n\n```jsx\n\u003cNeomorph\n darkShadowColor=\"#FF3333\" // \u003c- set this\n lightShadowColor=\"#3344FF\" // \u003c- this\n style={{\n shadowOpacity: 0.3, // \u003c- and this or yours opacity\n shadowRadius: 15,\n borderRadius: 50,\n backgroundColor: '#ECF0F3',\n width: 200,\n height: 200,\n }}\n/\u003e\n```\n\n### Neomorph Blur\n\n![Custom neomorph shadow demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/neomorphblur.png)\n\n```jsx\nimport { NeomorphBlur } from 'react-native-neomorph-shadows';\n\n\u003cNeomorphBlur\n style={{\n shadowRadius: 12,\n borderRadius: 70,\n backgroundColor: '#ECF0F3',\n width: 140,\n height: 140,\n }}\n/\u003e;\n```\n\n## Animation\n\n```jsx\nimport { Animated } from 'react-native';\nimport { Shadow, Neomorph, NeomorphBlur } from 'react-native-neomorph-shadows';\n\nconst AnimatedShadow = Animated.createAnimatedComponent(Shadow);\nconst AnimatedNeomorph = Animated.createAnimatedComponent(Neomorph);\nconst AnimatedNeomorphBlur = Animated.createAnimatedComponent(NeomorphBlur);\n\n...\n\n\u003cAnimatedShadow /\u003e\n\u003cAnimatedNeomorph /\u003e\n\u003cAnimatedNeomorphBlur /\u003e\n```\n\n## Props\n\n### Shadow/ShadowFlex props\n\n| Prop | Type | Default | Description |\n| -------- | ------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| style | object | undefined | Like View/Layout style prop with a few difference. **Flex** not available. **width** \u0026 **height** is required. (None of this is about the **ShadowFlex**) | |\n| useArt | bool | false | If **true**, the component will use drawable shadow on both platform (iOS, Android) |\n| inner | bool | false | If **true**, a shadow will be inside of component |\n| children | node | undefined | |\n\n### Neomorph/NeomorphFlex props\n\n| Prop | Type | Default | Description |\n| ---------------- | ------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| style | object | undefined | Like View/Layout style prop with a few difference. **Flex** not available. **width** \u0026 **height** is required. (None of this is about the **NeomorphFlex**) | |\n| swapShadows | bool | false | If **true**, the value of `zIndex` property both shadows will swap |\n| inner | bool | false | If **true**, shadows will be inside of component |\n| darkShadowColor | string | 'black' | Dark shadow color |\n| lightShadowColor | string | 'white' | Light shadow color |\n| children | node | undefined | |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftokkozhin%2Freact-native-neomorph-shadows","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftokkozhin%2Freact-native-neomorph-shadows","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftokkozhin%2Freact-native-neomorph-shadows/lists"}