Warning

Still Under Early Developement!!!!

Introduction

This package react-native-declarative-ui-kit was created to do insanely rapid UI developement. Once you get hands on with the notations (which are pretty easy) you will be able to develope a good looking screen within 5-30 minutes window.

Motivation

My expected Utopia of React Native UI Developement

• No Stylesheets
• No Inline Style Tags
• Self Explaining Layout Tags

Get Started

npm install react-native-declarative-ui-kit Or yarn add react-native-declarative-ui-kit

Learn

Declarative Typography

Heading Sizes

Eg: <H1>Hello World</H1> <H2>Hello World</H2> <H3>Hello World</H3> <H4>Hello World</H4> <H5>Hello World</H5>

Font Weights

<P bold>Hello World</b> <P semi-bold>Hello World</b> <P light>Hello World</b> <P lighter>Hello World</b> <P bold>Hello World</b>

Font Colors

<P primary>Hello World</P> <P secondary> Hello World</P> <P light-colored> Hello World</P> <P lighter-colored> Hello World</P> <P dark-colored> Hello World</P> <P warn> Hello World</P> <P success> Hello World</P> <P black> Hello World</P> <P white> Hello World</P>

Font Alignment

<P align-left> Hello World</P> <P align-center> Hello World</P> <P align-right> Hello World</P>

Declarative Layouting

Flex Layouts

Margins

Padding

Special Elements

Touchable

AnimatedBox

Scrollable

GradientBox

Special Directives

Directive	Description
white-bg
primary-bg
secondary-bg
dark-bg
absolute-bg
page-bg

Common Elements

Input

Properties

Name	Type	Description
label	string	Determine label for the input component
labelStyle	TextStyle	Customizing label style
icon	IconName	Setting an icon on right corner (For IconName prop see icon element)
text-area	boolean	Transforms input into an text area
width	number	Sets input element width
isLoading	boolean	Displays a loading indicator
basic	boolean	Sets Basic color for the element
primary	boolean	Sets Primary color for the element
success	boolean	Sets Success color pallet for the element
warning	boolean	Sets Warning color pallet for the element
danger	boolean	Sets Danger color pallet for the element
info	boolean	Sets Info color pallet for the element

Examples

Developing