alma-design-system-mobile v0.1.1

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.

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)