https://github.com/tokkozhin/react-native-neomorph-shadows
Shadows and neumorphism/neomorphism for iOS & Android (like iOS).
https://github.com/tokkozhin/react-native-neomorph-shadows
inner-shadow neomorphism neumorphism shadow shadow-svg shadowbox
Last synced: about 1 year ago
JSON representation
Shadows and neumorphism/neomorphism for iOS & Android (like iOS).
- Host: GitHub
- URL: https://github.com/tokkozhin/react-native-neomorph-shadows
- Owner: tokkozhin
- License: mit
- Created: 2020-02-06T10:44:39.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-26T18:20:35.000Z (over 3 years ago)
- Last Synced: 2024-10-01T22:37:42.637Z (over 1 year ago)
- Topics: inner-shadow, neomorphism, neumorphism, shadow, shadow-svg, shadowbox
- Language: JavaScript
- Homepage:
- Size: 29.3 MB
- Stars: 804
- Watchers: 15
- Forks: 92
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-neomorph-shadows
Shadows and neumorphism/neomorphism for iOS & Android (like iOS).
[`See example folder`](example)
## 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
```jsx
import { Shadow } from 'react-native-neomorph-shadows';
...
...
```
### Neomorph / NeomorphFlex
Opacity of two shadows automaticly changing and depends of `backgroundColor` brightness.
```jsx
import { Neomorph } from 'react-native-neomorph-shadows';
...
...
```
### Nested Neomorph
```jsx
```
### Custom shadow colors of Neomorph
```jsx
```
### Neomorph Blur
```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 | |