RN Storybook

React native component library for Parents Gateway

Boilerplate code forked from https://github.com/ugglr/react-native-storybook-boilerplate

Notes

CSF not supported in react-native framework, use storiesOf api instead.

https://storybook.js.org/docs/react/api/csf

https://github.com/storybookjs/storybook/blob/next/lib/core/docs/storiesOf.md

Scripts

In root folder the following scripts are available

• Run React Native Storybook Developer Server

yarn run storybook

• Run Storybook on iOS simulator

yarn run ios

• Run Storybook on Android emulator

yarn run android

• Run Storybook Web Developer server (powered with React Native Web)

yarn run storybook-web

• Build serveable Storybook static site (To-Do)

yarn run build:storybook-web

--> ./storybook-static

Publish to NPM

Publish through CI pipeline after code is reviewed and approved

Linking component lib locally

npm link does not work well. Alternatively can install local storybook lib to consumer project node_modules directly using command

// Assuming consumer project folder is on same level as storybook
npm i $(npm pack ../pg-rn-storybook | tail -1)

RN project setup

Before you can run yarn run ios, install necessary pods with cd ./ios/ && pod install --repo-update && cd ..

Proguard might strip svg classes on release build. add below lines to proguard rules

# react-native-svg
-keep public class com.horcrux.svg.** {*;}

Link the font by adding 'node_modules/@pgateway/rn-storybook/dist/styles/fonts/' to react native config assets and run

npx react-native link

Process for updating pg-rn-storybook

Refer to CONTRIBUTING.md