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" |