@jhahn678/component-lib-test v1.0.6

React Native Web Component Library

About

This is a basic setup for a cross-platform component library using React-Native/React-Native-Web, TypeScript and Storybook. It utilizes Expo in development alongside storybook, which allows developers to easily spin up a playground on their mobile-device OR simulator to view their component as they're making changes, without having to publish or deploy code. Build scripts compile the code to individual web and mobile packages, minimizing bundle size and complexity of setup by the consumer.

Installing

yarn install

Open Storybook

yarn storybook

Launch Expo

Used to launch mobile environment

yarn start

Requires setup for iOS and Android Follow the command line instructions to select an environment. Scanning the QR code to launch on your device requires you to download the Expo Go app. Your device must also be connected to the same network as your computer. More information on this can be found here: https://docs.expo.dev/workflow/run-on-device/

Building

yarn build

The build command compiles the code into the build/{package} directory. It executes in the following phases:

• Remove output directories from previous build
• Compile TypeScript to build/{package}/src and declarations to build/{package}/lib
• Modify web react-native imports to react-native-web
• Compile code to EsModule and CommonJs with Rollup
• Remove build/{package}/src directory

To test the builds locally, you can open up another project and use a relative import to the build/{web|mobile} folder, ensuring that all peer dependecies are installed.

Demo

The demos are available on NPM

https://www.npmjs.com/package/@jhahn678/web

https://www.npmjs.com/package/@jhahn678/mobile

In an existing web project:

yarn add @jhahn678/web react-native-web

In an existing react-native project:

yarn add @jhahn678/mobile

Other Scripts

Launch on android simulator

yarn android

Launch on iOS simulator

yarn ios

Launch expo in browser

yarn web

Build mobile and web packages

yarn build

Build mobile package

yarn build:mobile

Build web package

yarn build:web

Build and create package analytics

@build/{package}/lib/stats.html

yarn build:analyze

TODO:

• Functioning build process
• Configure dependencies so that web consumers don't have to install additional packages manually ?? If possible ??
• Automatic generation of Prop-Types
• Automatic versioning
• Configure NPM publishing
• Configure install pattern so consumers can yarn add @library/{web/mobile} without installing both bundles

References

https://www.npmjs.com/package/replace-in-file#replace-multiple-files-or-globs