VA Mobile Design System - Components Package

The Components package is the core of the VA Mobile Design System containing the components themselves.

For Consumers

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:

1. Add @department-of-veterans-affairs/mobile-component-library as a dependency with your package manager (e.g. yarn)
2. Add @department-of-veterans-affairs/mobile-assets as a dependency
   • Note: beyond the assets package, react, react-native, and react-native-gesture-handler are also expected dependencies to run the components package
3. Hook up the custom fonts in the assets package to your app
4. 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.

For Contributors

Prerequisites

1. Install Node.js
2. Install NVM
3. Install yarn 4.0.2

Installation

1. Clone the repo

git clone [email protected]:department-of-veterans-affairs/va-mobile-library.git

2. From the root directory (va-mobile-library) run nvm use. If you do not have the active Node version installed (you will see an error) run nvm install v20.19.2 (replacing v.20.19.2 with the version listed in our root-level .nvmrc file), then run nvm use to activate it.

3. Navigate to the components package

cd va-mobile-library/packages/components

4. Install dependencies

yarn

then

yarn tokens:build

5. Launch the app

• Physical Device
  1. Install the Expo Go app from the App Store or Play Store
     • Note: It is highly recommended to turn off automatic updates for Expo Go as it is only compatible with the latest Expo SDK and will stop working upon update until the project SDK is upgraded which can include complicated dependency updates. Android allows downloading an old version APK as a workaround, but iOS is impossible to downgrade.
  2. Run yarn start
  3. Using your devices camera, scan the QR code that pops up in your console
• Simulator
  1. Run yarn start
  2. Press i to run on an iOS simulator or a to run on an Android Emulator (you may have to set up an emulator in Android Studio in order for this to work)
• Web Browser
  1. Run yarn storybook:web

Yarn Commands