Overview

This application is designed as a component builder, which can then generate a private NPM package to publish to NPM. Our native apps then consume this package, enabling code sharing.

yarn add @kamupak/native

The published package is not executable code in itself, but rather it exposes Typescript source code which can then be integrated into Kamupak's various native applications. Thus, the components you choose to use will be compile at build time in the host application.

Storybook

All component development is done using Storybook. This allows us to build components in isolation, and think more about reusability across our various applications.

Running storybook

This app runs just like a normal React Native app, except that Storybook runs by default. The index.js file is simply a bootstrap for Storybook.

Running on iOS

yarn
cd ios && pod install && cd ..
yarn ios

Running on Android

yarn
yarn android

Creating stories

By convention, stories should reside in the same folder as their component. For example:

• You have a component called Button.tsx
• You create a Story file called Button.stories.tsx

Loading in new stories

By default, Storybook doesn't load stories from individual component folders. We use react-native-storybook-loader to fix this issue. When you add a new storybook file, run the following in order to load the new stories into Storybook.

yarn prestorybook

You can run this whilst Storybook is running and it will update.

Component building workflow

File Paths

• All components live in the ./src/components folder.
• Each component must have it's own directory.

Linting and Building

We use Typescript for static type checking. To compile and check for build errors:

yarn tsc

We use eslint + prettier for linting and autoformatting.

yarn lint

For convenience, you can run both at once:

yarn build

VSCode

We do not add .vscode to gitignore. Rather we want all developers to share project level vscode configuration.