react-native-wlc v1.0.24

Empower your platform with seamless financial integration using these White Label UI Components. Designed for easy customisation and seamless integration, our UI components offer: Customisation: Tailor the look and feel to match your brand. Modularity: Choose functionalities that fit your needs. Security: Industry-leading standards to protect user data. Scalability: Reliable performance for any user load. Get started today with our developer-friendly APIs and comprehensive documentation!

• Register Finance
• Finance Application Form
• Repayment Modal
• Summary Card
• Loan Details
• Banner
• Loan List
• Profile
• Request Edit

First install the react-native-sdk by running one of these command

yarn add react-native-wlc

Or

npm install react-native-wlc

import React, { useCallback, useEffect, useState } from 'react'
import './App.css'
import { LMSProvider } from 'react-native-wlc'


function App() {
	const [token, setToken] = useState('')

	const fetchToken = useCallback(async () => {
		// generate the token and assign to the setToken hook 
	}, [])

	useEffect(() => {
		fetchToken()
	}, [fetchToken])

	return (
		<LMSProvider
			base_url={/* provide the base url*/}
			token={token}
			info={{
				// Pass one of these information
				email: '',
				contactNumber: '',
				ntn: '',
				external_user_id: ''
			}}
			font={['Poppins']}
		>
			{/* children */}
		</LMSProvider>
	)
}

export default App

Wrap your top level-component with LMSProvider. Note: White label component works inside LMSProvider

Now Configuration is done. You are free to use any white label component if you business is already register.

RegisterFinance

import React, { useState } from 'react'
import { RegisterFinance } from 'react-native-wlc'

export const Component = () => {
	return <RegisterFinance onSuccess={(business: IBusiness) => console.log('business', business)} />
}

It will help you to register your business information with us.

FinanceApplicationForm

import React, { useState } from 'react'
import { FinanceApplicationForm } from 'react-native-wlc'

export const Component = () => {
	return <FinanceApplicationForm onSuccess={(loan) => console.log('loan', loan._id)} />
}

You can apply your loan via this component

RepaymentModal

import React, { useState } from 'react'
import { RepaymentModal } from 'react-native-wlc'

export const Component = () => {
	return <RepaymentModal onSuccess={(loan) => console.log('loan', loan)} />
}

SummaryCard

import React, { useState } from 'react'
import { SummaryCard } from 'react-native-wlc'

export const Component = () => {
	const { userDetail } = useLMS()

	return <SummaryCard
		onClick={() => {
			/* Write your business logic, eg: navigate to the other screen */
		}}
	/>
}

LoanDetails

import React, { useState } from 'react'
import { LoanDetails } from 'react-native-wlc'

export const Component = () => {
	const { userDetail } = useLMS()

	return <LoanDetails
		loanId={'65d8c8034a5df5b079172dec'} // pass your loanId 
		onRecordClick={() => {
			// do something
		}}
		isRepayment={false}
	/>
}

Banner

import React, { useState } from 'react'
import { Banner } from 'react-native-wlc'

export const Component = () => {
	const { userDetail } = useLMS()

	return <Banner
		onClick={() => {

		}}
		onClose={() => {// it will fire whenever user click on the close icon
		}}
	/>
}

LoanList

import React, { useState } from 'react'
import { Banner } from 'react-native-wlc'

export const Component = () => {
	const { userDetail } = useLMS()

	return <LoanList onRecordPaymentClick={(loan) => {
		// it will return you selected loan
	}}
					 onViewClick={(type, loan) => {
						 // it will return you type : 'LOAN'|'APPLICATION' and selected loan detail
					 }}
					 tableMaxHeight={300}
	/>
}

Profile

import React, { useState } from 'react'
import { Profile } from 'react-native-wlc'

export const Component = () => {
	return <Profile />
}

RequestEdit

import React, { useState } from 'react'
import { RequestEdit } from 'react-native-wlc'

export const Component = () => {
	return <RequestEdit />
}

Hooks

useLMS()

const { TOKEN, BASE_URL, axiosInstance, EMAIL, setEmail, userDetail } = useLMS()

Theme

Default Palette

const palette = {
    colors: {
        primary: "rgb(38, 119, 85)",
        onPrimary: "rgb(255, 255, 255)",
        primaryContainer: "rgb(240, 219, 255)",
        onPrimaryContainer: "rgb(44, 0, 81)",
        secondary: "rgb(102, 90, 111)",
        onSecondary: "rgb(255, 255, 255)",
        secondaryContainer: "rgb(237, 221, 246)",
        onSecondaryContainer: "rgb(33, 24, 42)",
        tertiary: "rgb(128, 81, 88)",
        onTertiary: "rgb(255, 255, 255)",
        tertiaryContainer: "rgb(255, 217, 221)",
        onTertiaryContainer: "rgb(50, 16, 23)",
        error: "rgb(186, 26, 26)",
        onError: "rgb(255, 255, 255)",
        errorContainer: "rgb(255, 218, 214)",
        onErrorContainer: "rgb(65, 0, 2)",
        background: "rgb(255, 251, 255)",
        onBackground: "rgb(29, 27, 30)",
        surface: "rgb(29, 27, 30)",
        onSurface: "rgb(29, 27, 30)",
        surfaceVariant: "rgb(233, 223, 235)",
        onSurfaceVariant: "rgb(74, 69, 78)",
        outline: "rgb(124, 117, 126)",
        outlineVariant: "rgb(204, 196, 206)",
        shadow: "rgb(0, 0, 0)",
        scrim: "rgb(0, 0, 0)",
        inverseSurface: "rgb(50, 47, 51)",
        inverseOnSurface: "rgb(245, 239, 244)",
        inversePrimary: "rgb(220, 184, 255)",
        elevation: {
            level0: "transparent",
            level1: "rgb(248, 242, 251)",
            level2: "rgb(244, 236, 248)",
            level3: "rgb(240, 231, 246)",
            level4: "rgb(239, 229, 245)",
            level5: "rgb(236, 226, 243)",
        },
        surfaceDisabled: "rgba(29, 27, 30, 0.12)",
        onSurfaceDisabled: "rgba(29, 27, 30, 0.38)",
        backdrop: "rgba(51, 47, 55, 0.4)",
    },
};