Tools

Read more about the awesome tools that make this UI theme work so smoothly.

React Native

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI using declarative components.

Expo

With Expo tools and services, you can build, deploy, and quickly iterate on native iOS and Android apps from the same JavaScript codebase. Expo provides access to device capabilities like camera, location, notifications, sensors, haptics, and much more, all with cross-platform APIs.

NativeBase

NativeBase is an open source framework from the NativeBase Market team. This framework enables developers to build high-quality mobile apps using React Native iOS and Android apps with a fusion of ES6

ESLint

ESLint is a fully pluggable tool for identifying and reporting on patterns in JavaScript. To run ESLint in the app:

yarn eslint

Prettier

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

To run Prettier in the app:

yarn prettier

Jest

Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using Babel, Node, React, and more. All tests for the app are written in Jest and tests are written for ALL appropriate components.

To run tests:

yarn test

Formik

Forms are really verbose in React. Formik is a small library that helps you out with some of the annoying parts:

1. Getting values in and out of form state

2. Validation and error messages

3. Handling form submission

By colocating all of the above in one place, Formik will keep things organised -- making testing, refactoring, and reasoning about your forms a breeze.

styled-components

By utilising tagged template literals and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!

Storybook

Storybook is an open source tool for developing UI components in isolation for React. It makes building stunning UIs organised and efficient. Storybook runs outside of the main app so users can develop UI components in isolation without worrying about app specific dependencies and requirements.

Check the Storybook page to get started using Storybook in the app.

Absolute Imports

In React Native projects, it’s common to have long import paths such as:

import MyButton from '../../../components/MyButton'

Import paths with this kind of hierarchy can be confusing to figure out and they generally get messy. To curb this, we use babel-module-plugin-resolver plugin to add a new resolver for our modules when compiling our code using Babel.

Basically, it lets us do this:

import MyButton from 'components/MyButton'