@govflanders/vl-ui-design-system-react-native

Getting Started

Installation

All React Native components are bundled in one library and delivered through NPM.

yarn add @govflanders/vl-ui-design-system-react-native

npm install @govflanders/vl-ui-design-system-react-native

Install Peerdependencies

yarn add react-native-toast-notifications @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/native @react-navigation/native-stack color react-native-vector-icons react-native-modal react-native-render-html react-native-safe-area-context react-native-collapsible @react-navigation/native react-native-linear-gradient @react-native-community/datetimepicker @react-native-community/hooks react-native-document-picker react-native-device-info react-native-fast-image hyphen date-fns react-native-keyboard-controller @shopify/flash-list react-native-picker-select @react-native-picker/picker

npm install react-native-toast-notifications @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/native @react-navigation/native-stack color react-native-vector-icons react-native-modal react-native-render-html react-native-safe-area-context react-native-collapsible @react-navigation/native react-native-linear-gradient @react-native-community/datetimepicker @react-native-community/hooks react-native-document-picker react-native-device-info react-native-fast-image hyphen date-fns react-native-keyboard-controller @shopify/flash-list react-native-picker-select @react-native-picker/picker

Install assets

Add a file named react-native.config.js to the root of your project.

Add the following to this file:

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./node_modules/@govflanders/vl-ui-design-system-react-native/fonts'], // Path to fonts needed to use the package
};

run npx react-native-asset

Theming

To use the correct theming + colours we need to wrap everything with the VlUiProvider and pass a tenantobject to the context provider.

const tenant = {
  tenant: 'Vlaanderen',
  colors: {
    primary: '#ffe615',
    action: '#0055cc',
  },
};

<VlUiProvider value={tenant}>...</VlUiProvider>

If you want to use specific colors. Your styles.ts will should look like this.

import { vlUiTheme } from '@govflanders/vl-ui-design-system-react-native';
import type { VlUiInterface } from '@govflanders/vl-ui-design-system-react-native/src/context/VlUiContext';
import { StyleSheet } from 'react-native';

const styles = (theme: VlUiInterface) => {
  const colors = theme.themeAwareColors;
  return StyleSheet.create({
    title: {
      ...vlUiTheme.textStyles(theme)['body-xsmall'],
      color: colors['vl-annotation-color'],
    },
  });
};

export { styles };

Your component should look like this.

import {
  useThemeAwareObject,
  VlUiIconNames,
} from '@govflanders/vl-ui-design-system-react-native';
import { Text, View } from 'react-native';

import { styles as _styles } from './styles';

interface VlUiComponentProps {
  title: string;
}

const VlUiComponent = ({ title }: VlUiComponentProps) => {
  const styles = useThemeAwareObject(_styles);
  return (
    <View style={styles.container}>
      <Text style={styles.title}>
        {title}
      </Text>
    </View>
  );
};

export { VlUiComponent };

Custom icons

If you want to add custom icons to your application, you can generate an iconfont from svg files with fantasticon. Below is the config we're using for the default icon font in the library:

// .fantasticonrc

module.exports = {
  name: 'custom-icons-font-name', // Font name
  inputDir: './assets/icons', // Path to folder where the .svg icons are located
  outputDir: './assets/fonts/iconfont', // Output path where the generated font will be placed
  fontTypes: ['ttf'],
  assetTypes: ['ts', 'json'],
  formatOptions: {
    json: {
      indent: 2,
    },
    ts: {
      types: ['constant', 'literalId'],
      singleQuotes: true,
    },
    svg: {
      centerHorizontally: true,
      centerVertically: true,
    },
  },
  normalize: true,
  fontHeight: 300,
  descent: 150,
  pathOptions: {
    ts: './assets/iconfont/icon-types.ts', // Path to the folder where you want the generated types to be placed
    json: './path/to/generated/glyphmap.json', // Path to the folder where you want the generated glyphMap
  },
};

After you generated your custom icon font you should add the output folder of you generated font to the react-native.config.js file & link the new assets to you application by running npx react-native-asset.

Then, to use custom icons in your application, you can pass iconfont props to the context provider like below.

import glyphs from './path/to/generated/glyphmap.json';

const tenant = {
  ...,
  icons: {
    glyphMap: glyphs, // Needed to check if the icon exists in the default or custom icon set
    fontFamily: 'custom-icons-font-name', // Needs to be the same name as the one in the fantasticon config
    fontFile: 'custom-icons-font-name.ttf', // Needs to be the same name as the one in the fantasticon config with the .ttf extension
  }
};

<VlUiProvider value={tenant}>...</VlUiProvider>

After that you can use your custom icons with the provided icon component.

<VlUiIcon name="custom-icon-name" size={16} color={colors['vl-text-color']} style={styles.icon} />

Usage

import { VlUiTitle } from '@govflanders/vl-ui-design-system-react-native';

// ...

<VlUiTitle accessibilityLabel="a11y Title content">Title content</VlUiTitle>;