@creditbook/react-native-wlc v1.0.9

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 @creditbook/react-native-wlc

Or

npm install @creditbook/react-native-wlc

To use the bundled icons on iOS, follow these steps:

• Navigate to node_modules/react-native-vector-icons and drag the Fonts folder (or select specific fonts) into your Xcode project.

  • Make sure your app is checked under "Add to targets," and if adding the whole folder, check "Create groups."
  • Not familiar with Xcode? Check out this article.

• Edit Info.plist and add a property called Fonts provided by application (or UIAppFonts if Xcode autocomplete is not working):

  • <key>UIAppFonts</key>
    <array>
      <string>AntDesign.ttf</string>
      <string>Entypo.ttf</string>
      <string>EvilIcons.ttf</string>
      <string>Feather.ttf</string>
      <string>FontAwesome.ttf</string>
      <string>FontAwesome5_Brands.ttf</string>
      <string>FontAwesome5_Regular.ttf</string>
      <string>FontAwesome5_Solid.ttf</string>
      <string>FontAwesome6_Brands.ttf</string>
      <string>FontAwesome6_Regular.ttf</string>
      <string>FontAwesome6_Solid.ttf</string>
      <string>Foundation.ttf</string>
      <string>Ionicons.ttf</string>
      <string>MaterialIcons.ttf</string>
      <string>MaterialCommunityIcons.ttf</string>
      <string>SimpleLineIcons.ttf</string>
      <string>Octicons.ttf</string>
      <string>Zocial.ttf</string>
      <string>Fontisto.ttf</string>
    </array>

  Above step might look something like this:

  

• In Xcode, select your project in the navigator, choose your app's target, go to the Build Phases tab, and under * *Copy Bundle Resources**, add the copied fonts.

• When using auto linking, it will automatically add all fonts to the Build Phases, Copy Pods Resources. Which will end up in your bundle. To avoid that, create a react-native.config.js file at the root of your react-native project with:

    module.exports = {
      dependencies: {
        'react-native-vector-icons': {
          platforms: {
            ios: null,
          },
        },
      },
    };

Note: Recompile your project after adding new fonts.

Note 2: If you're getting problems with duplicate outputs file for fonts on ios build, try running cd ios && pod install after the react-native.config.js configuration.

Add permissions to access the camera and gallery

Step 1 In Xcode open Info.plist and add string key NSPhotoLibraryUsageDescription with value that describes why you need access to user photos. More info here https://forums.developer.apple.com/thread/62229. Depending on what features you use, you also may need NSCameraUsageDescription and NSMicrophoneUsageDescription keys.

(Optional) Step 2 - To localize the camera / gallery / cropper text buttons Open your Xcode project Go to your project settings by opening the project name on the Navigation (left side) Select your project in the project list Should be into the Info tab and add in Localizations the language your app was missing throughout the + Rebuild and you should now have your app camera and gallery with the classic ios text in the language you added.

Option: With Gradle (recommended)

To make font management smoother on Android, use this method:

• Edit android/app/build.gradle (NOT android/build.gradle) and add:

  apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

  To customize the fonts being copied, use:

  project.ext.vectoricons = [
      iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Specify font files
  ]
  
  apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

your-monorepo/
├─ node_modules/
│  ├─ react-native-vector-icons
├─ apps/
│  ├─ YourApp/
│  │  ├─ android/
│  │  │  ├─ app/
│  │  │  │  ├─ build.gradle

Update paths like:

project.ext.vectoricons = [
+ iconFontsDir: "../../../../node_modules/react-native-vector-icons/Fonts",
  iconFontNames: ["YourFont.ttf", "..."]
]

- apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
+ apply from: "../../../../node_modules/react-native-vector-icons/fonts.gradle

⚠️ Reported issues have arisen when utilizing RNVI versions earlier than 9.0.0 within a monorepo context. Therefore, it's advisable to ensure your RNVI version is 9.0.0 or later.

Option: Manual Integration

To manually integrate the library, follow these steps:

• Copy the contents from the Fonts folder and paste them into android/app/src/main/assets/fonts (ensure the folder name is lowercase, i.e., fonts).

Integrating Library for getImageSource Support

The following steps are optional and are only necessary if you intend to utilize the Icon.getImageSource function.

• Edit the android/settings.gradle file as shown below:

  rootProject.name = 'MyApp'
  
  include ':app'
  
  + include ':react-native-vector-icons'
  + project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

• Edit the android/app/build.gradle (located in the app folder) as shown below:

  apply plugin: 'com.android.application'
  
  android {
    ...
  }
  
  dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    //noinspection GradleDynamicVersion
    implementation "com.facebook.react:react-native:+"  // From node_modules
  
  + implementation project(':react-native-vector-icons')
  }

• Edit your MainApplication.java (located deep within android/app/src/main/java/...) as shown below (note that there are two places to edit):

  package com.myapp;
  
  + import com.oblador.vectoricons.VectorIconsPackage;
  
  ....
  
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage()
  +   , new VectorIconsPackage()
      );
    }

Please note that this optional step is necessary only if your react-native app doesn't support auto-linking; otherwise, you can skip this.

macOS Setup

via react-native-macos

To set up the library on your macOS project using react-native-macos, follow these steps:

1. Browse to the node_modules/react-native-vector-icons folder and drag the Fonts folder into your project in Xcode. Ensure that your app is checked under "Add to targets," and select "Create folder references" when prompted.

2. Edit your Info.plist and include a new property named Application fonts resource path ( or ATSApplicationFontsPath if Xcode's autocomplete isn't functioning or you're not using Xcode). Set the value of this property to Fonts.

Please note that after adding new fonts, you need to recompile your project. Also, make sure that the Fonts folder is present under the Copy Bundle Resources section within the Build Phases of your Xcode project.

These steps will effectively integrate the vector icons library into your macOS project while utilizing the react-native-macos framework.

Add permissions

• VERY IMPORTANT Add the following to your build.gradle's repositories section and change Android SDK version to
  33. (android/build.gradle)

buildscript {
    ext {
        buildToolsVersion = "31.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33
        ...
    }
}

allprojects {
    repositories {
      mavenLocal()
      jcenter()
      maven { url "$rootDir/../node_modules/react-native/android" }

      // ADD THIS
      maven { url 'https://maven.google.com' }

      // ADD THIS
      maven { url "https://www.jitpack.io" }
    }
}

• Add useSupportLibrary (android/app/build.gradle)

android {
    ...

    defaultConfig {
        ...
        vectorDrawables.useSupportLibrary = true
        ...
    }
    ...
}

• Minimum Gradle version

3.3.3
3.4.3
3.5.4
3.6.4
4.0.1

• If you use SDK version >= 33, add following to app/src/main/AndroidManifest.xml

  • <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>

• Optional If you want to use camera picker in your project, add following to app/src/main/AndroidManifest.xml

  • <uses-permission android:name="android.permission.CAMERA"/>

• Optional If you want to use front camera, also add following to app/src/main/ AndroidManifest.xml

  • <uses-feature android:name="android.hardware.camera" android:required="false" />
  • <uses-feature android:name="android.hardware.camera.front" android:required="false" />

import React, { useCallback, useEffect, useState } from 'react'
import './App.css'
import { LMSProvider } from '@creditbook/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 (
		<SafeAreaProvider>
			<SafeAreaView style={{ flex: 1 }}>
				<StatusBar
					barStyle={isDarkMode ? 'light-content' : 'dark-content'}
					backgroundColor={backgroundStyle.backgroundColor}
				/>
				{token && (
					<LMSProvider
						base_url={"Pass the base url"}
						token={token}
						theme={'light'}
						info={{
							// Pass one of these information
							email: '',
							contactNumber: '',
							ntn: '',
							external_user_id: ''
						}}>
						<Bann />
					</LMSProvider>
				)}
			</SafeAreaView>
		</SafeAreaProvider>
	)
}

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 '@creditbook/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 '@creditbook/react-native-wlc'

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

You can apply your loan via this component

RepaymentScreen

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

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

SummaryCard

import React, { useState } from 'react'
import { SummaryCard } from '@creditbook/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 '@creditbook/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 '@creditbook/react-native-wlc'

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

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

LoanList

import React, { useState } from 'react'
import { Banner } from '@creditbook/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 '@creditbook/react-native-wlc'

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

RequestEdit

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

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

Hooks

useLMS()

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

Theme

Default Palette

const lightTheme = {
	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, 255, 255)',
		onBackground: 'rgb(29, 27, 30)',
		surface: 'rgb(240, 240, 240)',
		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)',
	},
};