Skip to content
React Native components based on the concept of Neumorphism
JavaScript Objective-C Ruby Java Python
Branch: master
Clone or download
Latest commit 76713d8 Dec 27, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode ReadMe Update Dec 26, 2019
example Read Me Dec 26, 2019
src Read Me Dec 26, 2019
.babelrc ReadMe Update Dec 26, 2019
.gitignore ReadMe Update Dec 26, 2019
.npmignore ReadMe Update Dec 26, 2019
README.md ReadMe Update Dec 26, 2019
index.js first commit Dec 26, 2019
neumorphism-ui-1.0.1.tgz Read Me Dec 26, 2019
package-lock.json first commit Dec 26, 2019
package.json ReadMe Update Dec 26, 2019

README.md

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 (
        <View style={{width:'100%',height:'100%',backgroundColor:'#e0e5ec'}}>

              {/*NeuView Unpressed with containerStyles*/}
              <NeuView pressed={false} containerStyle={{ marginTop: 30 }} >
                <Text style={{ opacity: 0.4 }}>UNPRESSED</Text>
              </NeuView>
              
              {/*NeuView pressed with viewStyles*/}
              <NeuView pressed={true}  style={{ height: 100, width: 100, borderRadius: 50 }}>
                <Text style={{ opacity: 0.4 }}>PRESSED</Text>
              </NeuView>
              
              {/*NeuView pressed with contentStyles*/}
              <NeuView pressed={true}  style={{ height: 400,}} contentStyle={{ justifyContent: 'center', alignItems: 'center' }}>
                <Text style={{ opacity: 0.4 }}>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 (
      <View style={{width:'100%',height:'100%',backgroundColor:'#e0e5ec',justifyContent:'center',alignItems:'center'}}>

          {/* Circle NeuButton that stays pressed once clicked */}
            <NeuButton style={{ height: 150, width: 150, borderRadius: 75 }}
                onPress={() => {
                  Alert.alert("I was pressed")
                }}
                onUnpress={() => {
                  Alert.alert("I was unpressed")
                }}
              >
                <Text style={{ opacity: 0.4, textAlign: 'center' }}>NeuButton with listeners</Text>
            </NeuButton>
            
            {/* Rectangular NeuButton that doesn't stay pressed once clicked */}
            <NeuButton style={{ height: 70, width: 120, borderRadius: 50 }} noPressedState={true}
                onPress={() => {
                  Alert.alert("I was pressed")
                }}
              >
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '60%' }}>
                  <Image
                    resizeMode="contain"
                    style={{ height: 30, width: 30 }}
                    source={{ uri: "https://www.freepnglogos.com/uploads/heart-png/emoji-heart-33.png" }} />
                  <Text style={{ fontWeight: 'bold', opacity: 0.4 }}>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

You can’t perform that action at this time.