README

Logbook Mobile Components Library

What is this repository for?

This is a set of React-Native components built in isolation that can be used in a React-Native app

Usage in a React-Native app

yarn add logbook-mobile-components

import { Screen } from 'logbook-mobile-components';

render() {
	<Screen></Screen>
}

Set Up

This project is using Storybook for React-Native, setup and usage can be found here: https://github.com/storybooks/storybook/tree/master/app/react-native The order of the steps is mandatory, wait for each of them to finish after you run the next one, all watchers should stay opened in its own terminal

Install modules

yarn install

Start typescript watcher

yarn tsc -w

Start storybook

yarn storybook

Start ios app

react-native run-ios

You should be able to open the browser on http://localhost:7007/
You should see the ios simulator running

Creating Components

Creating the component for the app

• Create a folder for your component inside src/components
• Export the component inside src/components/index.ts

Adding the component to Storybook

• Create a new story for your component with your choice of knobs and actions inside src/stories/index.ts

More information on knobs and actions can be found below:
Knobs: https://github.com/storybooks/storybook/tree/master/addons/knobs
Actions: https://github.com/storybooks/storybook/tree/master/addons/actions

The stories with all the components examples are in src/stories/index.tsx
You should be able to navigate in the browser and see the changes in the simulator

Updating Components

Updating the Logbook Font

• All you need to do is replace the following files: src/Assets/fonts/selection.json and src/Assets/fonts/icomoon.ttf

Publish npm module

Once the component has been created it's time to publish it to .npm for everyone to use or publish it for local usege.

Publishing to .npm

Make sure you have an .npm account and you've been added in.

Update version number

• Inside the package.json file bump up the version number by one

Rebuild the folder

• Delete the build folder and start yarn again to rebuild

Publishing

• Open terminal and enter in the following:

npm login
npm publish

Publishing locally

Creates global link

• Run following command from the logbook.mobile.components project

npm link

Link-install the package

• Run following command from the logbook.mobile project to add the local build logbook.mobile.components npm module

npm link logbook-mobile-components

Done! Check it out here: https://www.npmjs.com/package/logbook-mobile-components