Documentation

Bucks UI Kit uses React Native & by using that you are allowed to easily deploy your app to Android & iOS with a single development codebase.

If you need any help don't hesitate to chat with us on the chat bubble or by email (contact@epicpxls.com)

Setup

  • First, you need to have the Bucks UI Kit package. You can get that by buying the product

  • Place the folder containing the Bucks UI KIT into the root directory of your project. (You can change its location).

  • Update your package.json file to have

    "react-native-bucks": "./react-native-bucks"

    in the dependencies section

  • Run

    yarn install
    # or
    npm install

    to get the package into package.lock

  • You are now done. But if you use Expo you can start that and just run the simulator to see your project and get started

  • We offer examples/screens for all the design elements so you can have a look into the

    react-native-bucks-preview/src/screens

    folder and get the code for each screen from there

  • Images used on the project can be changed easy by just updating the component details

  • Icons that we use are from a simple package that we included into the module and are from FontAwesome

Video tutorial

Modules used

List of open source modules used:

Components

List of available components:

  • List Item
  • Button
  • Form Input
  • Form Label
  • Card
  • CheckBox
  • Icon
  • Slider

ListItem

PROPS TYPE DEFAULT DESCRIPTION
underlayColor string white Define underlay color for TouchableHighlight (optional)
leftIconUnderlayColor string white Left icon underlay color
rightIcon string {name: 'chevron-right'} Icon configuration for right icon (optional)
leftIcon string null icon configuration for left icon (optional)
chevronColor string colors.grey4 Set chevron color
hideChevron bool true Set if you do not want a chevron (optional)
switchButton bool false Add a switch to the right side of your component
textInputEditable bool true Determines if you can edit the text
titleNumberOfLines number 1 Number of title lines
subtitleNumberOfLines number 1 Number of subtitle lines
rightTitleNumberOfLines number 1 Right title number of lines
containerStyle object, array null Additional main container styling (optional)
wrapperStyle object, array null Additional wrapper styling (optional)
/* List item with left icon and right icon */

<ListItem
  leftIcon={{name: 'user'}}
  leftIconContainerColor={colors.blue}
  title="Account"
  titleColor='#B3BFD0'
  onPress={()=> navigate('Account')}
  rightTitle={<Icon
    color='green'
    height= {10}
    width= {10}
    name='chevron-right'
    size={18}
  />}
>

Button

PROPS TYPE DEFAULT DESCRIPTION
buttonStyle object, array null Add additional styling for button component
title string null Button title (required)
icon string null Specifies the icon name
backgroundColor string null Background color of button (optional)
color string null Font color (optional)
fontSize number 18 Font size (optional)
underlayColor string white Specifies an underlay color of component
disabled bool false Determines whether the component should be disabled
borderRadius number null Adds border radius to button (optional)
large bool false Makes button large
iconRight bool false Determines whether the component should have a right icon
fontWeight string normal Specify font weight for title (optional)
fontFamily string null Determines the font family of the component
rounded bool true Determines whether the component is rounded
outline bool false Determines whether the component has an outline
transparent bool false Determines whether the component is transparent
Any other additional props will be passed down to button element (eg. onPress)
/* Example of button */

<Button
  title="Login"
  color='green'
  onPress={() =>
    navigate('Login')
  }
/>

FormInput

PROPS TYPE DEFAULT DESCRIPTION
containerStyle object, array null TextInput container styling (optional)
inputStyle object, array null TextInput styling (optional)
selectionColor string null Allows you to change the color of the selection
normalizeFontSize bool true Determines if the font size is normalized
/* Example of form input*/

<FormInput
  inputStyle={styles.inputBox}
  onSuccess={true}
  containerStyle={{}}
  placeholder='Email' />

FormLabel

PROPS TYPE DEFAULT DESCRIPTION
containerStyle object, array null Additional label container style (optional)
labelStyle object, array null Additional label styling` (optional)
error bool false Determines whether the component has error
fontFamily string null Specify different font family

Cards

PROPS TYPE DEFAULT DESCRIPTION
flexDirection string column Specifies the direction of the content: row or column
containerStyle object, array null Outer container style (optional)
wrapperStyle object, array null Inner container style (optional)
overlayStyle object, array null Determines the overlay style
title string null Optional card title (optional)
titleStyle object, array null Additional title styling (if title provided) (optional)
subTitle string null Specifies the subtitle of the component
subTitleStyle object, array null Determines the subtitle style
type string null Specifies the type of the component: mastercard, visa, paypal
number string null Specifies the number of the component
expiration string null Specifies the expiration of the component
/* Example of card*/

<Card
  title='Bank Name'
  subTitle='Savings card'
  type='mastercard'
  number='2706'
  expiration='03/18'
>
</Card>

CheckBox

PROPS TYPE DEFAULT DESCRIPTION
checked bool false Flag for checking the icon (required)
iconRight bool false Moves icon to right of text (optional)
title string null Title of checkbox (required)
center bool false Aligns checkbox to center (optional)
right bool false Aligns checkbox to right (optional)
containerStyle object, array null Style of main container (optional)
textStyle object, array null Style of text (optional)
checkedIcon string check-square-o Default checked icon Font Awesome Icon (optional)
uncheckedIcon string square-o Default unchecked icon Font Awesome Icon (optional)
iconType string null Determines the icon type
checkedColor string green Default checked color (optional)
uncheckedColor string #bfbfbf Default unchecked color (optional)
size number 24 Specifies the checkBox size
checkedTitle string null Specify a custom checked message (optional)
fontFamily string null Specify different font family
/* Example of CheckBox*/

<CheckBox
  title='Remember Account'
  textStyle={{color: '#4B5461', opacity: 0.5}}
  checkedIcon='dot-circle-o'
  uncheckedIcon='circle-o'
  size={13}
  containerStyle={{backgroundColor: 'transparent', borderColor: 'transparent'}}
  checked={false}
/>

Icon

PROPS TYPE DEFAULT DESCRIPTION
name string null Name of icon (required)
size number 24 Size of icon (optional)
color string black Color of icon (optional)
underlayColor string white underlayColor for press event
reverse bool false Reverses color scheme (optional)
raised bool false Adds box shadow to button (optional)
containerStyle object, array null Add styling to container holding icon (optional)
iconStyle object, array null Additional styling to icon (optional)
reverseColor string white Specifies the reverse color of the component
/* Example of Icon*/

<Icon
  color='green'
  name='paper-plane'
  size={18}
/>

Slider

PROPS TYPE DEFAULT DESCRIPTION
value number 0 minimumValue and maximumValue, default to 0 and 1
disabled bool false If true the user won't be able to move the slider
minimumValue number 0 Initial minimum value of the slider
maximumValue number 1 Initial maximum value of the slider
step number 0 Step value of the slider
minimumTrackTintColor string blue gradient The color used for the track to the left of the button
thumbTintColor string black The color used for the thumb
thumbTouchSize object {width: 40, height: 40} The size of the touch area that allows moving the thumb
style style null The style applied to the slider container
trackStyle style null The style applied to the track
thumbStyle style null The style applied to the thumb
debugTouchArea bool false Set this to true to visually see the thumb touch rect in green.
animateTransitions bool false Set to true to animate values with default 'timing' animation type
/* Example of slider */

<Slider
  value={this.state.icon}
  icons={{left: 'minus', right: 'plus'}}
  onValueChange={(value) => this.setState({value})}/>