ZaloPay React Native UI Toolkit

ZaloPay React Native components

Table of Contents

1. Installation
2. Components

Installation

1. install zalopay-react-native-ui-toolkit and its dependeices

npm i zalopay-react-native-ui-toolkit --save

or

yarn add zalopay-react-native-ui-toolkit

Components

1. ZPTransactionDetail
2. TransactionProgressBar
3. Banner

ZPTransactionDetail

ZPTransactionDetail

TransactionProgressBar

A React Native component use to display transaction progress

Usage

import { TransactionProgressBar } from 'zalopay-react-native-ui-toolkit';

const progressData = getIBFTProgressData(transactionStatus,transactionMessage);
return (
  <TransactionProgressBar
    progressData={progressData}
  />
)

Props

| Prop | Type | Description | Required | Default | | -------------------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------- | -------- | ------- | | style | ViewPropTypes.style | Style of the View containing data | No | | | progressData | {currentStatus: {icon: Image,title: String,subTitle: String,index: Number},data: Array} | Data to display transaction progress | No | {} | | minimized | bool | Minimized transaction progress | No | false | | onPressCurrentStatus | func | Function when press on current status component | No | |

Banner

A React Native component use to display Banner for information, warning, success, error.

Usage

import { Banner } from 'zalopay-react-native-ui-toolkit';

// Success banner
<Banner.Success />

// Information banner
<Banner.Information />

// Warning banner
<Banner.Warning />

// Error banner
<Banner.Error />

Props

| Prop | Type | Description | Required | Default | | ------------------- | --------------------- | ------------------------------------------------------------------------------- | -------- | ------- | | style | ViewPropTypes.style | | No | | | title | String | Banner title | No | '' | | description | String | Banner description, support HTML | No | '' | | onPress | Func | A function to handle banner presses. | No | '' | | activeOpacity | Number | Determines what the opacity of the wrapped view should be when touch is active. | No | 0.2 |