# rntpc_react-native-neomorph-shadows **Repository Path**: openharmony-sig/rntpc_react-native-neomorph-shadows ## Basic Information - **Project Name**: rntpc_react-native-neomorph-shadows - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: https://gitee.com/openharmony-sig/rntpc_react-native-neomorph-shadows - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-10-14 - **Last Updated**: 2025-05-07 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 🚨 **重要提示 | IMPORTANT** > > **⚠️ 此代码仓已归档。新地址请访问 [rntpc_react-native-neomorph-shadows](https://gitcode.com/openharmony-sig/rntpc_react-native-neomorph-shadows)。| ⚠️ This repository has been archived. For the new address, please visit [rntpc_react-native-neomorph-shadows](https://gitcode.com/openharmony-sig/rntpc_react-native-neomorph-shadows).** > --- > ![npm](https://img.shields.io/npm/v/react-native-neomorph-shadows?style=flat-square) ![npm](https://img.shields.io/npm/dt/react-native-neomorph-shadows?style=flat-square) ![github](https://img.shields.io/github/stars/tokkozhin/react-native-neomorph-shadows?style=flat-square) ![Supports Android and iOS](https://img.shields.io/badge/platforms-android%20|%20ios-lightgrey.svg?style=flat-square) # react-native-neomorph-shadows Shadows and neumorphism/neomorphism for iOS & Android (like iOS). [`See example folder`](example) ![Shadows Demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/shadows.gif) ![Neomorph Demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/neomorph.gif) ![Neomorph Blur Demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/neomorphblur.gif) ![More Demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/more.gif) ## Installation IMPORTANT: this 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. ### Step 1 Run the command below to install the plugin. ```bash npm i react-native-neomorph-shadows ``` ### Step 2 You need to install [`React Native Art`]('https://github.com/react-native-community/art') in your project. ```bash npm install @react-native-community/art --save ``` With autolinking (react-native 0.60+) ```bash cd ios && pod install && cd .. ``` Pre 0.60 ```bash react-native link @react-native-community/art ``` Great! Let's start to use it. ## Usage There are three components: **Shadow**, **Neomorph** & **NeomorphBlur**. Prop style supports most of the view/layout styles. **IMPORTANT: Components dont't support `Flex`.** If 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. ### Shadow / ShadowFlex ![Outer shadow demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/shadow.png) ![Inner shadow demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/inner_shadow.png) ```jsx import { Shadow } from 'react-native-neomorph-shadows'; ... ... ``` ### Neomorph / NeomorphFlex Opacity of two shadows automaticly changing and depends of `backgroundColor` brightness. ![Outer neomorph shadow demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/neomorph.png) ![Inner neomorph shadow demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/inner_neomorph.png) ```jsx import { Neomorph } from 'react-native-neomorph-shadows'; ... ... ``` ### Nested Neomorph ![Nested neomorph shadow demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/neomorph_nested.png) ```jsx ``` ### Custom shadow colors of Neomorph ![Custom neomorph shadow demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/neomorph_custom_colors.jpg) ```jsx ``` ### Neomorph Blur ![Custom neomorph shadow demo](https://raw.githubusercontent.com/tokkozhin/react-native-neomorph-shadows/master/assets/neomorphblur.png) ```jsx import { NeomorphBlur } from 'react-native-neomorph-shadows'; ; ``` ## Animation ```jsx import { Animated } from 'react-native'; import { Shadow, Neomorph, NeomorphBlur } from 'react-native-neomorph-shadows'; const AnimatedShadow = Animated.createAnimatedComponent(Shadow); const AnimatedNeomorph = Animated.createAnimatedComponent(Neomorph); const AnimatedNeomorphBlur = Animated.createAnimatedComponent(NeomorphBlur); ... ``` ## Props ### Shadow/ShadowFlex props | Prop | Type | Default | Description | | -------- | ------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | style | object | undefined | Like View/Layout style prop with a few difference. **Flex** not available. **width** & **height** is required. (None of this is about the **ShadowFlex**) | | | useArt | bool | false | If **true**, the component will use drawable shadow on both platform (iOS, Android) | | inner | bool | false | If **true**, a shadow will be inside of component | | children | node | undefined | | ### Neomorph/NeomorphFlex props | Prop | Type | Default | Description | | ---------------- | ------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | style | object | undefined | Like View/Layout style prop with a few difference. **Flex** not available. **width** & **height** is required. (None of this is about the **NeomorphFlex**) | | | swapShadows | bool | false | If **true**, the value of `zIndex` property both shadows will swap | | inner | bool | false | If **true**, shadows will be inside of component | | darkShadowColor | string | 'black' | Dark shadow color | | lightShadowColor | string | 'white' | Light shadow color | | children | node | undefined | |