App Master's magical kit for UI solutions.


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
02Sep 21, 2018Nov 6, 2017Minified + gzip package size for @app-masters/react-native-ui-kit in KB


React Native UI Kit

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


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


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:




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

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


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"

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.