Alma DS React Native Components

Alma React Native is the official React Native lib composed with Emotion from Dasa. Access here all documentation.

Getting Started

See all components in our Storybook.

Install Package

yarn add @dasa-nexus/alma-design-system-react-native

There are required dependencies to use this package that you should have installed on your project:

• React Native Safe Area Context (usually comes with React Navigation)

yarn add react-native-safe-area-context

• React Native Svg

yarn add react-native-svg

How to use

In order to use the Text components (Heading, Subtitle, Body, etc) in your RN app, you will need to place the DasaSans font in your project, and load it before the render of your app. If you ar using Expo, you can do something like this:

import { useFonts } from 'expo-font';
import AppLoading from 'expo-app-loading';

...

  const [fontsLoaded] = useFonts({
    'DasaSans-Bold': require('./[PATH_TO_YOUR_FONTS_FOLDER]]/DasaSans-Bold.otf'),
    'DasaSans-BoldItalic': require('./[PATH_TO_YOUR_FONTS_FOLDER]/DasaSans-BoldItalic.otf'),
    'DasaSans-Italic': require('./[PATH_TO_YOUR_FONTS_FOLDER]/DasaSans-Italic.otf'),
    'DasaSans-Light': require('./[PATH_TO_YOUR_FONTS_FOLDER]/DasaSans-Light.otf'),
    'DasaSans-LightItalic': require('./[PATH_TO_YOUR_FONTS_FOLDER]/DasaSans-LightItalic.otf'),
    'DasaSans-Medium': require('./[PATH_TO_YOUR_FONTS_FOLDER]/DasaSans-Medium.otf'),
    'DasaSans-MediumItalic': require('./[PATH_TO_YOUR_FONTS_FOLDER]/DasaSans-MediumItalic.otf'),
    'DasaSans-Regular': require('./[PATH_TO_YOUR_FONTS_FOLDER]/DasaSans-Regular.otf'),
    'DasaSans-Semibold': require('./[PATH_TO_YOUR_FONTS_FOLDER]/DasaSans-Semibold.otf'),
    'DasaSans-SemiboldItalic': require('./[PATH_TO_YOUR_FONTS_FOLDER]/DasaSans-SemiboldItalic.otf'),
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return <YourApp />;
  }

If you are developing an exported RN project (not using expo), you will have to react-native link your fonts (please refer to some documentation on how to do this)

Deploy

Publishing the new version on the Nexus

• Go to the dev branch and give a git pull
• Run the command yarn build
• Commit the changes made to the folder lib
  • Example: chore: updating lib files
• Run the command yarn release:patch or yarn release:minor or yarn release:major according to the necessity (Semantic Versioning 2.0.0)
• Track dev build on Jenkins (Must be on VPN and have access to Jenkins)
  • https://build.dasalabs.io/job/alma-design-system-mobile/job/dev/
• Go to Jenkins Tags tab and manually run the version tag
  • https://build.dasalabs.io/job/alma-design-system-mobile/view/tags/

Publishing the new version in NPM

• Change the package name in all files that mention it (do a general search)
  • @dasa-nexus/npac-design-lib-alma → npac-design-lib-alma
• Remove field from package.json

  "publishConfig": {
    "registry": "https://nexus.dasaexp.io/repository/alma-design-system-mobile/"
  },

• Swap the .npmrc file token (the token can be found in the file history)
  • From //nexus.dasaexp.io/repository/dasa-alma-design-system-mobile/:_authToken=NpmToken.*****************
  • To //registry.npmjs.org/:_authToken=npm_*****************
• Run the command npm publish

IMPORTANT: The changes made in the second step must not be committed, but discarded after publication in the public NPM