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