The Components package is the core of the VA Mobile Design System containing the components themselves.
The components package assumes you already have a functioning React Native app, whether using Expo or React Native CLI; see the React Native documentation if you do not.
Once you have a running app:
- Add
@department-of-veterans-affairs/mobile-component-library
as a dependency with your package manager (e.g. yarn) - Add
@department-of-veterans-affairs/mobile-assets
as a dependency- Note: beyond the assets package,
react
,react-native
, andreact-native-gesture-handler
are also expected dependencies to run the components package
- Note: beyond the assets package,
- Hook up the custom fonts in the assets package to your app
- Import components from
@department-of-veterans-affairs/mobile-component-library
within .jsx/.tsx files and incorporate into the display logic similarly to how you would the built-in React Native components
Note: The linting package is highly recommended so you'll automatically receive linting warnings for deprecation as the components package evolves; it should be set to the same version as the components package.
Documentation about components available can be found via the documentation site as well as our Storybook. Questions and issues can be directed to our DSVA Slack channel.
- Install Node.js
- Install NVM
- Install yarn 4.0.2
- Clone the repo
git clone git@github.com:department-of-veterans-affairs/va-mobile-library.git
-
From the root directory (
va-mobile-library
) runnvm use
. If you do not have the active Node version installed (you will see an error) runnvm install v18.18.0
(replacing v.18.18.0 with the version listed in our root-level .nvmrc file), then runnvm use
to activate it. -
Navigate to the components package
cd va-mobile-library/packages/components
- Install dependencies
yarn
then
yarn tokens:build
- Launch the app
-
Physical Device
- Install the Expo Go app from the App Store or Play Store
- Run
yarn start
- Using your devices camera, scan the QR code that pops up in your console
-
Simulator
- Run
yarn start
- Press
i
to run on an iOS simulator ora
to run on an Android Emulator (you may have to set up an emulator in Android Studio in order for this to work)
- Run
-
Web Browser
- Run
yarn storybook:web
- Run
Command | Description |
---|---|
start |
Starts Metro Bundler with options to run app on different platforms. Note: To run on web, use yarn storybook:web command below |
android |
Run app on last used Android emulator/device |
buildIcons |
Run script to build icons from assets package |
ios |
Run app on last used iOS simulator/device |
storybook:build |
Generates static version of Storybook for deployment |
storybook:deploy |
Deploys Storybook to homepage in package.json
|
storybook:generate |
Generates .storybook/native/storybook.requires.js which tells React Native where to find stores since it doesn't support dynamic imports |
storybook:watch |
Watches for newly created stories and regenerates storybook.requires.js
|
storybook:web |
Builds and launches development server for web |
test |
Runs unit tests |