@forbole/mrm-preset-forbole-rn

mrm-preset-forbole-rn

MRM preset for scaffolding react-native projects @Forbole.

Usage

Pre-requisites

1. Initialize a new typescript react-native project

npx react-native init {{APP_NAME_GOES_HERE}} --template react-native-template-typescript

1. Install lint-staged

npx mrm@2 lint-staged

1. Install storybook for react-native

npx -p @storybook/cli sb init --type react_native

Installation & Usage

1. Install mrm to local dev dependencies

yarn add -D mrm

1. Install this preset package

yarn add -D @forbole/mrm-preset-forbole-rn

1. Run the preset's MRM scripts

yarn mrm default --preset @forbole/mrm-preset-forbole-rn 

1. Clean Up: After installation, remove mrm and this preset.

yarn remove mrm @forbole/mrm-preset-forbole-rn 

Additional Setup

The following tasks are not 100% automatic.

1. storybook

An index.storybook.js file will be copied to the root directory, along with the necessary use:main and use:storybook scripts to switch between app modes.

The existing index.js file in the project root should be copied into index.main.js to finalize installation.

1. i18next

index.js, index.main.js and index.storybook.js should be modified by adding the following import to initialize i18n.

import './src/assets/locales/i18n'

Contents

This preset contains the following tasks:

1. eslint
2. jest
3. essentials
4. husky
5. storybook
6. i18next

eslint

This task installs a custom eslint preset built off of airbnb and react-native-community presets, as well as configuring eslint with typescript compatibility.

jest

This task installs @testing-library/react-native and its additional jest matchers, and configures the transformIgnorePatterns jest property with better compatibility with react-native, and react-navigation.

essentials

This task installs several packages that are commonly used in our applications, and configures the project for their use. The current list is as follows:

1. @react-navigation/native,
2. react-native-screens (@react-navigation dependency)
3. react-native-safe-area-context (@react-navigation dependency)
4. @react-navigation/stack
5. react-native-gesture-handler (@react-navigation/stack dependency)
6. @react-native-masked-view/masked-view (@react-native/stack dependency)
7. formik - form validation
8. yup - form validation schemas
9. graphql
10. @apollo/client

husky

This task modifies the default husky installation so that eslint errors are flagged during the pre-commit stage and will prevent the commit from succeeding until the issues are manually fixed. (The default behavior is that eslint errors will be automatically fixed on commit, however this may be unwanted in some cases.)

storybook

This task modifies the default storybook installation and adds a SbContainer decorator component for use when creating stories.

Installation is not 100% automatic (see Addition Setup).

i18next

This task installs and configures i18next for react-native projects, and adds a dummy en locale to act as an example.

Installation is not 100% automatic (see Addition Setup).