Introduction

Hero Design's component library is built to provide better development experience for front-end developers.

Prequisites

Hero Design for Mobile comes with a few peer dependencies that need to be installed first in order to use, you can find them below, more info can be found here.

• react-native-safe-area-context
• @react-native-community/datetimepicker
• @react-native-community/slider
• react-native-gesture-handler
• react-native-webview
• react-native-pager-view
• react-native-vector-icons
• react-native-linear-gradient
• @hero-design/react-native-month-year-picker
• @ptomasroos/react-native-multi-slider

Installation

• Please make sure that you have Node.js (>=20.0.0) and Yarn (4.0.2 - Installing via npm is recommended) installed.

• Install @hero-design/rn and its peer dependencies:

If you're using npm:

npm install @hero-design/rn

If you're using yarn:

yarn add @hero-design/rn

• Configure babel to work with inline import

From version 7.14.0, Hero Design use babel-plugin-inline-import to resolve the inline imports. Consumer project need to add below configuration to babel.config.js

{
  "plugins": [
    [
      'babel-plugin-inline-import',
      {
        extensions: ['hero-editor/dist/app.js'],
      },
    ],
  ]
}

• Add @hero-design/eslint-plugin and extend plugin:@hero-design/recommendedRn config to ensure correct usage of our library: https://www.npmjs.com/package/@hero-design/eslint-plugin.

Usage

Inject styles

• All Hero Design's components need a theme object to get their styles. The library already has provide different theme configurations via ThemeSwitcher, depending on the brand that you are working on, you can config the theme name as swagLight, swagLightJobs or ehWorkDark.

Examples

• Specify name prop as ehWork to work on the UI in Swag brand.

import React from 'react';
import { ThemeSwitcher, Button } from '@hero-design/rn';

const App = () => (
  <ThemeSwitcher name="ehWork">
    <Button text="Hero Design" onPress={() => console.log('button pressed')} />
  </ThemeSwitcher>
);

Run playground

1. Download Expo iOS, Android

2. Open Expo Go app and login with account eh-mobile-dev (contact to Slack #eh-andromeda-devs to get password)

3. Open the camera app on your device and scan the code below

   Or, open this link on your device:

exp://u.expo.dev/65d8e97a-1126-4dad-8a50-950e998780c1?runtime-version=1.0.0&channel-name=master