Zalopay-react-native-ui-toolkit NPM

ZaloPay React Native UI Toolkit

ZaloPay React Native components

Installation
Components

Installation

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

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

yarn add zalopay-react-native-ui-toolkit

Components

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