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

React Native UI Kit

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

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);

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.

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

Simple material design horizontal divider

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

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

View with a spinner for loading states

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

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"