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
Link assets
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.jsimport 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>);