Cross-platform React components for building Bappo apps
npm i --save seneca-components
import React from 'react';
import { styled, Text, View } from 'seneca-components';
class MyComponent extends React.Component {
render() {
return (
<Container>
<Text>Hello World</Text>
</Container>
);
}
}
const Container = styled(View)`
flex: 1;
background-color: white;
`;
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/seneca-components'), // path to seneca-components
}
Then in your JavaScript entry point, inject a style tag:
import fontAwesome from 'seneca-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);
- Browse to
node_modules/seneca-components
and drag the folderfonts
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 (orUIAppFonts
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.
Edit android/app/build.gradle
( NOT android/build.gradle
) and add the following:
apply from: "../../node_modules/seneca-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/seneca-components/fonts.gradle"
- This library is forked from bappo-components
- The bappo-components library is inspired by ReactXP and React Primitives.
- The bappo-components library's built-in Icon components are inspired by react-native-vector-icons.