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
  • Table of contents
  • Installation
  • Usage
  • Configure styles
  • Complete example
  • Developer notes

Installation

First, install the npm package using yarn or npm:

1npm i @bliplabs/blipui-react-native
2
3# - OR -
4
5yarn add @bliplabs/blipui-react-native

Usage

Import Blip's BillList component in your project:

1import { 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 - we recommend using the Blip Quickstart to replicate the below data:

1const bills: Bill[] = [
2  {
3    name: "Netflix",
4    merchant_id: "c352a66b-c667-4e0a-8a3d-eac3a0f1871b",
5    amount_mean: 10,
6    transactions_count: 5,
7    categories: ["subscriptions"],
8    frequency: 30,
9    expected_due_date: "2020-01-23",
10    enduser_oid: "35f83baa-77d3-4cae-80c1-45d1984a185d",
11    amount_median: 10,
12    amount_std: 0,
13    amount_total: 50,
14    amount_min: 10,
15    amount_max: 10,
16    first_transaction_date: "2019-08-24",
17    last_transaction_date: "2019-12-24",
18    is_manual: false,
19    merchant: {
20      name: "Netflix",
21      logo_url:
22        "https://cdn.tryblip.com/logos/billers/blr_kIblcVj74PladXcpVvZGO.jpg",
23      login_url:
24        "http://api.bliplabs.com/v2/links/bill/c3480ecc-fdac-48da-bd82-0c32f9137344/merchant/login_url",
25      billpay_url: null,
26      phone: null,
27      email: null,
28    },
29    id: "c3480ecc-fdac-48da-bd82-0c32f9137344",
30    is_bill: true,
31  },
32];

Now, plug it in!

1<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.

1const config: Partial<BillListConfig> = {
2  billBackgroundColor: "white",
3  billBorderRadius: 12,
4  billPadding: 20,
5  logoBorderRadius: 6,
6  iconColorCalendar: "orange",
7  iconColorFrequency: "orange",
8  iconColorBillpay: "lightgreen",
9  colorMerchantName: "black",
10  colorAmount: "black",
11  colorFrequency: "orange",
12  colorDueDate: "gray",
13  colorDueDate: "#7292F4",
14};

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

1<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.

1import { StatusBar } from "expo-status-bar";
2import { StyleSheet, Text, View } from "react-native";
3
4import billsList from "./bills.json";
5
6import { BillList } from "@bliplabs/blipui-react-native";
7
8export default function App() {
9  const bills = billsList;
10  const config = {
11    billBackgroundColor: "white",
12    billBorderRadius: 12,
13    billPadding: 20,
14    logoBorderRadius: 6,
15    iconColorCalendar: "orange",
16    iconColorFrequency: "orange",
17    iconColorBillpay: "lightgreen",
18    colorMerchantName: "black",
19    colorAmount: "black",
20    colorFrequency: "orange",
21    colorDueDate: "gray",
22    colorDueDate: "#7292F4",
23  };
24  return (
25    <View style={styles.container}>
26      <Text>Open up App.js to start working on your app!</Text>
27      <BillList bills={bills} config={config} />
28      <StatusBar style="auto" />
29    </View>
30  );
31}
32
33const styles = StyleSheet.create({
34  container: {
35    flex: 1,
36    backgroundColor: "#fff",
37    alignItems: "center",
38    justifyContent: "center",
39  },
40});

Developer notes

Pushing to the NPM registry is as easy as the following steps:

1# ensure you've logged in:
2npm login
3
4# update the package.json version if needed, and run this to update
5# package-lock.json:
6npm install
7
8# setting NODE_ENV to production is very important below, otherwise
9# local directories may appear in the compiled source code
10NODE_ENV=production npm run build
11
12# push the package - note below that this will include the contents
13# of the src/ directory, so be careful not to upload anything that
14# doesn't belong
15yarn publish build/dist/ --access public

Note: Make sure not to use yarn publish on its own, because by default it will upload the current working directory, as opposed to dist directory.

Additional note: The src/ directory is included as part of the NPM package for transparency, as the compiled package is minified with Babel.