Docplanner Logo

Docplanner Mobile UI

Edit page
IntroductionPhilosohpySetup
⚙️ – Core
⚛️ – Atoms-Molecules
🧬 – Organisms

Introduction

Philosohpy

mobile-ui-kit is written in a style that's minimal yet robust. It's common for JavaScript frameworks – and React UI Frameworks, especially – to include the kitchen sink. That is, everything you need and then more.

Ever tried using Formik with ant.design? How about switching to Material Design Icons with Semantic UI React. If so, you know exactly what I'm talking about. Good luck swimming upstream.

Too much of a good thing can definitely be a bad thing. And with mobile-ui-kit, we try to be pragmatic and strike a good balance.

mobile-ui-kit aims to provide you the building blocks to build screens on Docplanner mobile applications in a breeze while keeping the barrier for entry low.

Setup

Installation

To install the mobile-ui-kit, run the following command:

yarn add @docplanner/mobile-ui-kit

mobile-ui-kit comes with a set of icons that need to be linked in your project. To do this run:

react-native link @docplanner/mobile-ui-kit

You should see mobile-ui-kit-icons.ttf font added to your ios and android projects.

Peer dependencies

There are a few peer dependencies that you'll have to install for the mobile-ui-kit to work properly:

  • react
  • react-native
  • react-native-vector-icons
  • styled-components

Providers

Finally, you'll have to wrap your app in the IntlProvider and pass it a translate function (loc.t). Some of the components include internationalized copies.

// index.js
import React from 'react';
import Main from './Main.js';
import loc from '~/helpers/locale';
import { IntlProvider } from '@docplanner/mobile-ui-kit';
export const App = () => (
<IntlProvider translate={loc.t}>
<Main />
</IntlProvider>
);