• bappo-components
  • Installation
  • Usage
  • Using built-in Icon components
    • Web (with webpack)
    • iOS
    • Android
  • Credits

bappo-components

Cross-platform React components for building Bappo apps

Installation

npm i --save bappo-components

And for react-native, install react-native-pdf

Usage

import React from 'react';
import { styled, Text, View } from 'bappo-components';

class MyComponent extends React.Component {
  render() {
    return (
      <Container>
        <Text>Hello World</Text>
      </Container>
    );
  }
}

const Container = styled(View)`
  flex: 1;
  background-color: white;
`;

Using built-in Icon components

Web (with webpack)

In webpack config file, use url-loader or file-loader to handle ttf files:

{
  test: /\.ttf$/,
  loader: 'url-loader',
  include: path.resolve(__dirname, 'node_modules/bappo-components'), // path to bappo-components
}

Then in your JavaScript entry point, inject a style tag:

import fontAwesome from 'bappo-components/fonts/FontAwesome.ttf';
const fontStyles = `@font-face { src:url(${fontAwesome});font-family: FontAwesome; }`;

// create stylesheet
const style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
  style.styleSheet.cssText = fontStyles;
} else {
  style.appendChild(document.createTextNode(fontStyles));
}

// inject stylesheet
document.head.appendChild(style);

iOS

• Browse to node_modules/bappo-components and drag the folder fonts to your project in Xcode. Make sure your app is checked under "Add to targets" and that "Create groups" is checked.
• Edit Info.plist and add a property called Fonts provided by application (or UIAppFonts if Xcode won't autocomplete/not using Xcode) and type in the files you just added. Note: you need to recompile your project after adding new fonts, also ensure that they also appear under Copy Bundle Resources in Build Phases.

Android

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

apply from: "../../node_modules/bappo-components/fonts.gradle"

To customize the files being copied, add the following instead:

project.ext.vectoricons: [
    iconFontNames: ["FontAwesome.ttf"] // Name of the font files you want to copy
]
apply from: "../../node_modules/bappo-components/fonts.gradle"

Update Docs

npm run release-storybook

Credits

• This library is inspired by ReactXP and React Primitives.
• This library's built-in Icon components are inspired by react-native-vector-icons.