Need help with Neumorphism-ui?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

usamamoinakhter
133 Stars 9 Forks 5 Commits 3 Opened issues

Description

React Native components based on the concept of Neumorphism

Services available

!
?

Need anything else?

Contributors list

neumorphism-ui

React Native components based on the concept of Neumorphism (iOS only) NPM Version Repo Size Downloads roundCube Labs

 Neumorphism-ui Demo

Setup

This package is available on npm, install it with:

npm install --save neumorphism-ui

Usage

  1. Import neumorphism-ui to your project:

    import { NeuButton , NeuView} from  'neumorphism-ui'
  2. Set background color of container to #e0e5ec, other colors are not supported yet but you can modify it on your own by passing the background and shadow colors with style prop

Complete Example NeuView

import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { NeuView } from "neumorphism-ui";
export default class App extends Component {
  render() {
    return (
        

          {/*NeuView Unpressed with containerStyles*/}
          <neuview pressed="{false}" containerstyle="{{" margintop:>
            <text style="{{" opacity:>UNPRESSED</text>
          </neuview>

          {/*NeuView pressed with viewStyles*/}
          <neuview pressed="{true}" style="{{" height: width: borderradius:>
            <text style="{{" opacity:>PRESSED</text>
          </neuview>

          {/*NeuView pressed with contentStyles*/}
          <neuview pressed="{true}" style="{{" height: contentstyle="{{" justifycontent: alignitems:>
            <text style="{{" opacity:>PRESSED</text>
          </neuview>  
  </view>
);

} }

For a much detailed example take a look at the

/example
directory.

Complete Example NeuButton

import React, { Component } from "react";
import { View, Text, TouchableOpacity ,Image,Alert} from "react-native";
import { NeuButton } from "neumorphism-ui";
export default class App extends Component {
  render() {
    return (
      

      {/* Circle NeuButton that stays pressed once clicked */}
        <neubutton style="{{" height: width: borderradius: onpress="{()"> {
              Alert.alert("I was pressed")
            }}
            onUnpress={() =&gt; {
              Alert.alert("I was unpressed")
            }}
          &gt;
            <text style="{{" opacity: textalign:>NeuButton with listeners</text>
        </neubutton>

        {/* Rectangular NeuButton that doesn't stay pressed once clicked */}
        <neubutton style="{{" height: width: borderradius: nopressedstate="{true}" onpress="{()"> {
              Alert.alert("I was pressed")
            }}
          &gt;
            <view style="{{" flexdirection: alignitems: justifycontent: width:>
              <image resizemode="contain" style="{{" height: width: source="{{" uri:></image>
              <text style="{{" fontweight: opacity:>LIKE</text>
            </view>
        </neubutton>

  </view>
);

} }

For a much detailed example take a look at the

/example
directory.

Feedback

PRs, suggestions and feedbacks are welcome!

Links

Our Website Our Facebook Our Linkedin Our Instagram

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.