# advancly-widget-react-native

> This is the package that can be used to integrate advancly loan widget into your react native mobile app

Latest version **1.0.1** (published 2022-03-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install advancly-widget-react-native
pnpm add advancly-widget-react-native
yarn add advancly-widget-react-native
bun add advancly-widget-react-native
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-03-28 |
| First published | 2022-03-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 73.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Gbenga Olufeyimi |
| Maintainers | advanclydev |
| Keywords | react-native, ios, android |

## Links

- npm: https://www.npmjs.com/package/advancly-widget-react-native
- Repository: https://github.com/AdvanclyDev/advancly-widget-react-native
- Homepage: https://github.com/AdvanclyDev/advancly-widget-react-native#readme
- Issues: https://github.com/AdvanclyDev/advancly-widget-react-native/issues
- npm.io page: https://npm.io/package/advancly-widget-react-native

## Dependencies (1)

- [react-native-webview](https://npm.io/package/react-native-webview.md) ^11.17.2

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2022-03-28
- 1.0.0 — 2022-03-28
- 0.0.9 — 2022-03-28
- 0.0.8 — 2022-03-26
- 0.0.7 — 2022-03-26
- 0.0.6 — 2022-03-26
- 0.0.5 — 2022-03-26
- 0.0.4 — 2022-03-26
- 0.0.3 — 2022-03-25
- 0.0.2 — 2022-03-25
- 0.0.1 — 2022-03-25

## README

# Advancly Widget React Native

This package enables you to give loans to your borrowers through Advancly widget. Install, and have fun with it.

## Installation

To add Advancly Widget to your React Native project, run;

`npm install advancly-widget-react-native`

or

`yarn add advancly-widget-react-native`

## One more thing

This package has a dependency. The name of the dependency is **react-native-webview**

To add this dependency, run

`yarn add react-native-webview`

for iOS: `cd iOS && pod install && cd ..`

for expo applications run;

`expo install react-native-webview`

and that's it, you're all good to go!

### Screenshots of the widget

<img width="306" alt="Screenshot of library while loading" src="https://user-images.githubusercontent.com/102379468/160243723-e40f5f2c-146d-450b-8b9e-2603ea7061bf.png">
<img width="306" alt="Screenshot of library for signup" src="https://user-images.githubusercontent.com/102379468/160243727-50ba9bbe-c222-4646-b9f7-4d46a42cddff.png">
<img width="306" alt="Screenshot of library for requesting loan" src="https://user-images.githubusercontent.com/102379468/160243726-cfc7466e-0410-4445-b850-74a32675e95c.png">

### [](https://github.com/AdvanclyDev/advancly-widget-react-native#usage)Usage

```javascript
import { Fragment, useState } from 'react';
import { Text, TouchableOpacity } from 'react-native';
import { AdvanclyWidget, advanclyProps } from 'advancly-widget-react-native';

export default function App() {
  const onSuccess = (response: advanclyProps.IResponse) => {
    console.log('Success', JSON.stringify(response));
  };
  const onError = (response: advanclyProps.IResponse) => {
    console.log('Error', JSON.stringify(response));
  };
  const onCancel = (response: advanclyProps.IResponse) => {
    console.log('Cancel', JSON.stringify(response));
  };

  const [showWidget, setShowWidget] = useState(false);
  return (
    <Fragment>
      <TouchableOpacity
        onPress={() => {
          setShowWidget(true);
        }}
        style={{ margin: 100, backgroundColor: '#377dff' }}
      >
        <Text style={{ color: '#fff' }}>Show Widget</Text>
      </TouchableOpacity>

      <AdvanclyWidget
        aggregator_id={29}
        bank_account_number="1122334455"
        bank_code="000"
        borrower_phone="08100000000"
        bvn_number="22222222222"
        aggregator_loan_ref={Date.now().toString()}
        cac_number="2222222"
        city="Mubuntu"
        company_name="HAIRTOPIA EX PARTE"
        customer_type="1"
        email="hellworld@gmail.com"
        first_name="John"
        gender="male"
        last_name="Doe"
        photo_url=""
        public_key="AAAAAAAAAAAA"
        residence_address="100 Lagos Road"
        state="Lagos"
        product_id={00}
        product_code="AAAA"
        tenure={00}
        customStyles={{
          buttonBackgroundColor: '#377dff',
          buttonTextColor: '#fff',
          acceptButtonBackgroundColor: '#377dff',
          acceptButtonTextColor: '#fff',
          declineButtonBackgroundColor: '#377dff',
          declineButtonTextColor: '#fff',
          dropdownTextColor: '#000',
          dropdownBackgroundColor: '#fff',
        }}
        onSuccess={onSuccess}
        onError={onError}
        onCancel={onCancel}
        showWidget={showWidget}
        autoStart={false}
        environment={advanclyProps.ENVIRONMENT.TEST}
      />
    </Fragment>
  );
}
```

## Props

| Name                                 |                                                         Description                                                         |                Extra Information |
| :----------------------------------- | :-------------------------------------------------------------------------------------------------------------------------: | -------------------------------: |
| `public_key`                         |                                Public key (sign up on aggregator.advancly.com to get yours)                                 |                  default: `nill` |
| `aggregator_id`                      |               The ID of you the aggregator. You can get this on the settings page of your Advancly platform.                |                  default: `nill` |
| `email`                              |                                                  Borrower's email address                                                   |                  default: `nill` |
| `first_name`                         |                                                    Borrower's first name                                                    |                  default: `nill` |
| `last_name`                          |                                                    Borrower's last name                                                     |                  default: `nill` |
| `gender`                             |                                            Borrower's gender. `male` or `female`                                            |                  default: `nill` |
| `product_id`                         |    The ID of the loan product on Advancly platform. You can get this on the Loan Products page of your Advancly platform    |                  default: `nill` |
| `product_code`                       |   The code of the loan product on Advancly platform. You can get this on the Loan Products page of your Advancly platform   |                  default: `nill` |
| `tenure`                             |                                              Borrower's loan tenure (in days)                                               |                  default: `nill` |
| `bank_account_number`                |                                               Borrower's bank account number                                                |                  default: `nill` |
| `bank_code`                          |                                              Borrower's bank code on Advancly.                                              |                  default: `nill` |
| `borrower_phone`                     |                                                   Borrower's phone number                                                   |                  default: `nill` |
| `bvn_number`                         |                                                       Borrower's BVN                                                        |                  default: `nill` |
| `aggregator_loan_ref` (not required) |                                        Loan reference number on aggregator platform                                         | default: `Date.now().toString()` |
| `cac_number` (not required)          |                                   The borrower's CAC number. For corporate borrower only                                    |                  default: `nill` |
| `residence_address`                  |                                                   The borrower's address                                                    |                  default: `nill` |
| `city`                               |                                                     The borrower's city                                                     |                  default: `nill` |
| `state`                              |                                                    The borrower's state                                                     |                  default: `nill` |
| `autoStart`                          |                                           Auto start payment once page is opened                                            |                 default: `false` |
| `company_name` (not required)        |                          The name of the borrower's company. This is for corporate borrowers only.                          |                  default: `nill` |
| `customer_type`                      |               This can be either `1` or `2`. `1` is for individual borrowers. `2` is for corporate borrowers                |                  default: `nill` |
| `photo_url`                          |                                              The url of the borrower's image.                                               |                  default: `nill` |
| `onCancel`                           |                                     callback function when borrower cancels the widget                                      |                  default: `nill` |
| `onSuccess`                          |                                 callback function when borrower's transaction is successful                                 |                  default: `nill` |
| `showWidget`                         |                                      A boolean that controls when then widget is shown                                      |                 default: `false` |
| `environment`                        | An enum that tells the environment the widget should be shown in. This can be either `"test"`, `"staging"`, `"production"`. |                default: `"test"` |

## [](https://github.com/AdvanclyDev/advancly-widget-react-native#contributions)Contributions

Want to help make this package even more awesome? [Read how to contribute](https://github.com/AdvanclyDev/advancly-widget-react-native/blob/master/CONTRIBUTING.md) and feel free to send in your PR!

## [](https://github.com/AdvanclyDev/advancly-widget-react-native#licensing)Licensing

This project is licensed under MIT license.

### Don't forget to star, like and share :)

## Contributors ✨

Thanks goes to Gbenga Olufeyimi (@GbengaCodes) for creating this package ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://github.com/Gbengaol"><img src="https://avatars.githubusercontent.com/u/36560069?s=100&u=a36a663f0efc63c2fe72859889fb75621b1733b9&v=4" width="100px;" alt=""/><br /><sub><b>Gbenga Olufeyimi</b></sub></a></td>
  </tr>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

```

```

---
_Source: https://npm.io/package/advancly-widget-react-native · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._