NAF App Components

Library for using NAFs designcomponents in ReactNative and Expo built apps.

How to use

Install with npm

npm install nafapp --save

Install with yarn

yarn add nafapp --save

Fonts

To make the fonts work, you need to import these into the App. Below is an example of how you can do this if you use Expo.

We are using the embedding version, so the fonts are updated during build time using Expo plugin.

Read more at Expo documentation

// ./app.json
// change path to node_modules/nafapp/dist/media/fonts/<file name>
[
  'expo-font',
  {
    fonts: [
      './assets/fonts/Arial.ttf',
      './assets/fonts/NewTransport-Regular.ttf',
      './assets/fonts/NewTransport-Bold.ttf',
      './assets/fonts/NewTransport-Medium.ttf',
      './assets/fonts/QuestaSans-Regular.otf',
      './assets/fonts/QuestaSans-Black.otf',
      './assets/fonts/QuestaSans-Bold.otf',
      './assets/fonts/QuestaSans-Light.otf',
      './assets/fonts/QuestaSans-Medium.otf',
      './assets/fonts/QuestaSans-LightItalic.otf',
    ],
  },
];

This will allow you to use the fonts in your app. Ex: QuestaSans-LightItalic or QuestaSans-Light. Android uses file name and iOS uses postscript field (specific font field), but for clarity we set filename = postscript. See example under:

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  text: {
    fontFamily: 'QuestaSans-LightItalic',
  },
});

Techincal overview

Please use the npm package manager while working on this repo. You can find the package on npmjs.com.

Versioning

The package is following the Semantic Versioning standard.

Version strategy

major version is incremented when the library supports a new version of either (or both) new version of React and React Native. minor version is incremented when there is a new feature in the package patch version is incremented when there is a bug fix in the package

Commit strategy

The library is following the Conventional Commits standard. The pipeline will automatically bump the vesion based on the commit type, (t.ex: fix and feature). It will also update the Changelog based on the commit type and message.

Husky

The huskey plugin will make sure that you follow the correct commit-rules, but as a reminder, the following are the commit-rules:

breaking change

git commit -m 'feat!(component): <description>'

Or without scope, for instance when we bump the React or React Native version: git commit -m 'feat!: bump react version to <version>'.

The key to bumping the major version is to add an exclamation mark (!) after the word feat in the commit message, feat!: some commit message.

feature:

git commit -m 'feature(<component>): <description>'

The feat keyword (leaving out the exclamation mark), bumps the minor version number of the current major.

bugfix:

git commit -m 'fix(<component>): <description>'

The fix keyword bumps the patch number of the current minor.

The scope could be removed if the commit is more global, ex: git commit -m 'fix: component a and component b is now renamed to component c'

While merging multiple commits in the pull request the pull request commit message could be written as: build: <description> to avoid the text be written to the changelog.

Version mapping to React and React Native

| nafapp | ReactNative | React | | ------ | -------------------------------------------- | --------------------------------- | --- | | ^1.0.0 | 0.64.3 | 17.0.1 |   |

Disclaimer

The package is still in development, so as long the major is on 1.x.x the package will be considered unstable. The package will be stable when it reaches the 2.x.x version.