Implement eslint and prettier using pre-commit hook
- Run command
yarn add eslint-plugin-react eslint-plugin-react-native eslint-plugin-import eslint-import-resolver-babel-module husky lint-staged prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-jest eslint-plugin-promise babel-plugin-module-resolver --dev
- Run command
yarn husky install
- Add the following config in package.json
- Run command
npx husky add .husky/pre-commit "yarn lint-staged"
Path alias
- We already installed
eslint-plugin-import,
eslint-import-resolver-babel-module and babel-plugin-module-resolver
packages.
- The eslint config for path alias is already present in the above .eslinrc.js
config.
- So, just add following config in babel.config.js
- And create a aliases.json file in root directory which will contain all the
path mappings in the following manner, where @components is the alias for the
relative url "./app/components".
- For intellisense to work in vscode, we need to add a jsconfig.json in the root
directory as well, which contains the mapping in the following manner:
Base packages to start with
-
Install following packages for implementing navigation.
yarn add @react-navigation/native react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/stack
-
Install following package for implementing scalable size units.
yarn add react-native-extended-stylesheet
-
Install following package for showing various messages across the app.
yarn add react-native-snackbar
-
Install following package for implementing state management library redux.
yarn add redux react-redux
-
Install following package for persisting redux state and use aysncStorage as
your default storage.
yarn add redux-persist @react-native-async-storage/async-storage
-
Install following package for easing the process of making api request.
yarn add axios
-
Install following package for implementing splash screen.
yarn add react-native-bootsplash
-
Install following package for specifying prop-types of components.
yarn add prop-types
-
Install following package for adding prop based dynamic styling.
yarn add styled-components
-
Install all the above packages in single command.
yarn add @react-navigation/native react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/stack react-native-extended-stylesheet react-native-snackbar redux react-redux redux-persist @react-native-async-storage/async-storage axios react-native-bootsplash prop-types styled-components
-
Add the following config in package.json file
- Run command
npx pod-install ios
Setup for tests
- Run command
yarn add @types/jest enzyme enzyme-adapter-react-16 jest-enzyme jest-transform-stub react-dom --dev
- Create a dir named
jest in the root of the project and a file inside jest
dir with the name setup.js and add the following config in setup.js.
- Add the following keys under jest object in package.json
Final changes before starting the actual work.
- Add
import 'react-native-gesture-handler'; at the top of index.js file in
the root of your project.
- Create a dir named
src in the root of your project.
- Add the following key in
aliases.json we created previously.
- Add the following key under paths in
jsconfig.json we created previously.
- Within the
src dir add a file navigation.js. This will be the file where
we add all navigation details. Following is a boilerplate. Checkout React
Navigation docs to
understand the boilerplate.
- <ins>Note</ins>: In the above snippet we see
ExampleScreen. You can create
any screen but make sure to implement it and add correctly the alias in
aliases.json as well as jsconfig.json in order to run the app.
- Replace the content of
App.js in the root of your project with the
following.
Adding support for tests
- Create a dir named
__mocks__ in your project's root dir.
- Create a file named
mock.js within the __mocks__ dir.
- Add the following code in
mock.js.
- In
package.json add the following line within setupFiles array under
jest key.
- Once you are done with all the above configuration you can now run the app
with either
yarn ios or npx react-native run-ios for iOS build or
yarn android or 'npx react-native run-android` for android build.
Setup for Redux
- Create a dir named
redux inside src dir we created above.
- Under
redux create two files reducers.js and store.js.
- Add the below code in
reducers.js.
- Add the below code in
store.js.
- Now as and when we create new reducers we have to import it add it to
combineReducers in
reducers.js file.
- Add following key in
aliases.json we created previously.
- Add following key in
jsconfig.json we created previously.
- Add following import statements in
App.js of your root dir.
- Add
Provider and Store in App.js of your root dir as below.
Redux persist
- For adding redux persist please follow the installation guide of the package
here.
- After adding redux persist your
store.js under redux dir may look
something like this.
- And you
App.js in your root dir may look like this.