@app-masters/react-native-ui-kit

React Native UI Kit

This is an UI kit for React Native with the common components used in App Masters.

Components

• Button
• Card
• Divider
• Input Field
• Offline Image
• Spinner
• Style Utils

Usage

Before start, you must have a style file like (?).

$ npm install @app-masters/react-native-ui-kit --save-dev

Import your styles files and startStyles:

import { startStyles } from '@app-masters/react-native-ui-kit';
import AppStyles from './styles/styles';

In your app constructor:

startStyles(AppStyles);

Description

Button

Conditional button with style of Android and iOS

Props	Default	Description
style	-	[Optional] A custom style for that will override any default in the button container
onPress	-	Button's callback
label	-	Button's text
image	-	[Optional] Icon that will apear before the label
subText	-	[Optional] Label caption
subTextStyle	-	[Optional] Style for the caption
imageColor	-	[Optional] Color of icon
primaryColor	-	Background color when raised. When not, color of text.
secondaryColor	-	Color when pressed.
textColor	-	Color of text
raised	false	When raised, background color is shown.

Card

Simple material design card.

Props	Default	Description
children	-	Card content
horizontal	false	If horizontal, card will not have horizontal border.
style	-	[Optional] Custom styles that will override the default
onPress	-	[Optional] Callback for when the card is pressed

Divider

Simple material design horizontal divider

Input Field

Pretty Input field

Props	Default	Description
style	-	[Optional] Custom style that will override the container's style
value	-	Value of input
autoCapitalize	false	Set the first characters to upper case
maxLength	-	Maximun number of characters
keyboardType	-	[Optional] Set the keyboard type
onChangeText	-	Callback for changing in the text
placeholder	-	[Optional] Text when nothing is typed
secureTextEntry	false	If true, hide the characters (password)
icon	-	[Optional] Icon that will be shown in the right of input
primaryColor	-	Color of icon and border
error	false	If true, error message will be shown and color will change
errorMessage	-	Message to show the error
errorColor	-	Color override in error
suffix	-	[Optional] Suffix text

Offline Image

Image component with that will load an online image and show an animation. If no online or fail to get, an offline image will be shown in the place.

Props	Default	Description
online	-	Image link for online get
offline	-	Offline default image
style	-	[Optional] Custom style that will override the container's style

Spinner

View with a spinner for loading states

Props	Default	Description
color	-	[Optional] Color of Spinner
screen	false	If true, spinner will be larger

Style Utils

Functions used for creation of default styles

Functions	Params	Description
startStyles	(appStyles)	Create a object will default styles and merge with all custom app styles.
Styles	-	Static object will all app styles
ScreenSize	-	Static object with screen size of phone: {width, height}
isPortrait	( )	Return true if Portrait
isLandscape	( )	Return true if Landscape
screenPosition	( )	Return "LANDSCAPE" or "PORTRAIT"