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 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';
  inner // enable inner shadow
  useArt // set this prop to use non-native shadow on ios
    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

3. Create flexible & auto resizing Neumorphic elements.

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

4. Apply a blur effect to the shadow.

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


Neumorphic Style UI Elements In React Native

Download Details:

Author: tokkozhin

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT

#react-native #reactjs #react 

Neumorphic UI Elements in React Native
1.40 GEEK