@nativescript-community/ui-neumorphiclayout

Neumorphism-based layout for NativeScript.

Installation

ns plugin add @nativescript-community/ui-neumorphiclayout

Usage

NOTE: Scrollable views like ListView or ScrollView must never be direct siblings of a NeumorphicLayout because of android clipChildren effect. Instead, add those views inside a layout.

Plain NativeScript

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:ui="@nativescript-community/ui-neumorphiclayout" class="page">
    <Page.actionBar>
        <ActionBar title="Neumorphism" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
    <StackLayout class="px-20" backgroundColor="#e0e1e3">
        <ui:NeumorphicLayout width="200" height="200" marginTop="30" neumorphicColor="#e0e1e3" state="CONVEX" cornerRadius="100">
            <Label text="Tap me!" textAlignment="center" width="100%" fontSize="24" color="#6d707d" fontWeight="bold" top="85"/>
        </ui:NeumorphicLayout>
    </StackLayout>
</Page>

API

NeumorphicLayout inherits from AbsoluteLayout.

Events

Name	Description
draw	This event is triggered when layout content is drawn. It gives access to a Canvas instance for further drawing. Can be triggered manually by calling invalidate().
### Methods
Name	Type
---	---
invalidate	void
### Properties
Name	Type
---	---
state	State
touchState	State
neumorphicColor	Color
overlayColor	Color
cornerRadius	number
brightIntensity	number
darkIntensity	number
shadowDistance	number
shadowRadius	number

About

This plugin exports a view component named NeumorphicLayout which extends NativeScript AbsoluteLayout by adding support for applying Neumorphism style. This style is drawn onto view using @nativescript-community/ui-canvas.

Apart from nesting children, one can draw on a NeumorphicLayout using draw event. Draw Event arguments include a Canvas instance whose API is almost identical to Android Canvas. For more details, see ui-canvas plugin mentioned above.

Its functionality is inspired by Neumorphism.io.