npm package: @sethtjf/blipui-react-native
Description: React Native Component Library with Blip UI Elements.
Author: Cai Toy
Latest version: 0.1.2

# The Blip UI component library for React Native

This library consists of a pre-built UI component for rendering a list of bills from the Blip API.

The library currently includes a `BillList` component which can optionally be styled for seamless integration into a React Native project.

## Table of contents

- [The Blip UI component library for React Native](#the-blip-ui-component-library-for-react-native)
  - [Table of contents](#table-of-contents)
  - [Installation](#installation)
  - [Usage](#usage)
  - [Configure styles](#configure-styles)
  - [Complete example](#complete-example)

## Installation

First, install the npm package using `yarn` or `npm`:

```bash
npm i @bliplabs/blipui-react-native

# - OR -

yarn add @bliplabs/blipui-react-native
```

## Usage

Import Blip's `BillList` component in your project:

```js
import { Bill, BillList } from '@bliplabs/blipui-react-native';
```

The component requires data from the Blip API in order to render actual information. To do this, simply pass an object that contains [an array of bills straight from Blip's API](https://docs.bliplabs.com/reference/bills#get-bills) - we recommend using the [Blip Quickstart](https://github.com/bliplabs/quickstart) to replicate the below data:

```ts
const bills: Bill[] = [
  {
    name: 'Netflix',
    merchant_id: 'c352a66b-c667-4e0a-8a3d-eac3a0f1871b',
    amount_mean: 10,
    transactions_count: 5,
    categories: ['subscriptions'],
    frequency: 30,
    expected_due_date: '2020-01-23',
    enduser_oid: '35f83baa-77d3-4cae-80c1-45d1984a185d',
    amount_median: 10,
    amount_std: 0,
    amount_total: 50,
    amount_min: 10,
    amount_max: 10,
    first_transaction_date: '2019-08-24',
    last_transaction_date: '2019-12-24',
    is_manual: false,
    merchant: {
      name: 'Netflix',
      logo_url:
        'https://cdn.tryblip.com/logos/billers/blr_kIblcVj74PladXcpVvZGO.jpg',
      login_url:
        'http://api.bliplabs.com/v2/links/bill/c3480ecc-fdac-48da-bd82-0c32f9137344/merchant/login_url',
      billpay_url: null,
      phone: null,
      email: null,
    },
    id: 'c3480ecc-fdac-48da-bd82-0c32f9137344',
    is_bill: true,
  },
];
```

Now, plug it in!

```jsx
<BillList bills={bills} />
```

## Configure styles

The component is built with a default design which can then be customized by passing in a configuration object with variables to override the defaults and style the `BillList` to fit the look and feel of your application.

```ts
const config: Partial<BillListConfig> = {
  billBackgroundColor: 'white',
  billBorderRadius: 12,
  billPadding: 20,
  logoBorderRadius: 6,
  iconColorCalendar: 'orange',
  iconColorFrequency: 'orange',
  iconColorBillpay: 'lightgreen',
  colorMerchantName: 'black',
  colorAmount: 'black',
  colorFrequency: 'orange',
  colorDueDate: 'gray',
  colorDueDate: '#7292F4',
};
```

Passing the configuration object into the component will style the list accordingly.

```jsx
<BillList bills={bills} config={config} />
```

## Complete example

This is a fairly simplified example. Depending on your setup, you may need to take some extra steps. For example, with Expo, you may need to correct for internationalization, and on iOS, you may need to ensure that `react-native-svg` is installed in your package's dependencies.

```ts
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

import billsList from './bills.json';

import { BillList } from '@bliplabs/blipui-react-native';

export default function App() {
  const bills = billsList;
  const config = {
    billBackgroundColor: 'white',
    billBorderRadius: 12,
    billPadding: 20,
    logoBorderRadius: 6,
    iconColorCalendar: 'orange',
    iconColorFrequency: 'orange',
    iconColorBillpay: 'lightgreen',
    colorMerchantName: 'black',
    colorAmount: 'black',
    colorFrequency: 'orange',
    colorDueDate: 'gray',
    colorDueDate: '#7292F4',
  };
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <BillList bills={bills} config={config} />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
```