@nativescript-community/ui-neumorphiclayout

A plugin that adds support for neumorphism styling to NativeScript layout containers.

Installation

ns plugin add @nativescript-community/ui-neumorphiclayout
or
npm i @nativescript-community/ui-neumorphiclayout

Usage

Importing plugin at startup is all it takes to add support for neumorphism styling to your application.

NOTE: Scrollable views like ListView or ScrollView must NEVER be direct siblings of a view with neumorphism because of android clipChildren effect. Instead, add those views inside a layout container.

Plain NativeScript

TypeScript

import { Application } from '@nativescript/core';
import '@nativescript-community/ui-neumorphiclayout';

Application.run({ moduleName: 'app-root' });

XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
    <Page.actionBar>
        <ActionBar title="Neumorphism" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
    <StackLayout class="px-20" backgroundColor="#e0e1e3">
        <StackLayout verticalAlignment="center" width="200" height="200" marginTop="30" neumorphism="convex" fillColor="#e0e1e3" lightShadowColor="#ffffff" darkShadowColor="#bebfc1" cornerRadius="100">
            <Label text="Tap me!" textAlignment="center" fontSize="24" color="#6d707d" fontWeight="bold"/>
        </StackLayout>
    </StackLayout>
</Page>

API

Properties

| Name | Type | Default | Description | | --- | --- | --- | --- | | neumorphism | string | null | Determines the view neumorphism styling. Possible types: flat, concave, convex, pressed, pressed-in-out. | | touchState | strubg | null | Determines the view neumorphism styling for tap effect. | | fillColor | Color | #ffffff | Determines the color that view will use to set background color. | | lightShadowColor | Color | #ffffff | Determines the color that view will use to set light shadow color. | | darkShadowColor | Color | #d9d9d9 | Determines the color that view will use to set dark shadow color. | | cornerRadius | number | 0 | Determines the rounding of the view corners. | | shadowDistance | number | 10 | Determines the offset of the view shadows. The value is subtracted from the offset of the first shadow and added to the offset of the second one. | | shadowRadius | number | shadowDistance*2 | Determines the radius for the view shadows. | | isTouched | boolean | false | A flag indicating whether view is currently touched or not. |

About

This plugin adds support for neumorphism styling to NativeScript layout containers. It also includes basic gesture support for tap effect.

Its functionality is inspired by Neumorphism.io.