Neumorphic UI Elements in React Native

A React Native component to create neumorphic style UI components with shadows and blur effects in your app.

Basic usage:

1. Install & import:

# NPM
$ npm i react-native-neomorph-shadows --save
npm install @react-native-community/art --save

2. Create neumorphic style shadows.

import { Shadow } from 'react-native-neomorph-shadows';
<Shadow
  inner // enable inner shadow
  useArt // set this prop to use non-native shadow on ios
  style={{
    shadowOffset: {width: 10, height: 10},
    shadowOpacity: 1,
    shadowColor: "grey",
    shadowRadius: 10,
    borderRadius: 20,
    backgroundColor: 'white',
    width: 100,
    height: 100,
    // ...include most of View/Layout styles
  }}
>
</Shadow>

3. Create flexible & auto resizing Neumorphic elements.

import { Neomorph } from 'react-native-neomorph-shadows';
<Neomorph
  inner // enable shadow inside of neomorph
  swapShadows // change zIndex of each shadow color
  style={{
    shadowRadius: 10,
    borderRadius: 25,
    backgroundColor: '#DDDDDD',
    width: 150,
    height: 150,
  }}
>
</Neomorph>

4. Apply a blur effect to the shadow.

import { NeomorphBlur } from 'react-native-neomorph-shadows';
<NeomorphBlur
  style={{
    shadowRadius: 12,
    borderRadius: 70,
    backgroundColor: '#ECF0F3',
    width: 140,
    height: 140,
  }}
/>;

Preview:

Download Details:

Author: tokkozhin

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/tokkozhin/react-native-neomorph-shadows

License: MIT

#react-native #reactjs #react