# Design patterns [Mobile]

## Common
- `UIElements`, `SvgImages`, `Utils`, `Screens`, `AppComponents`, etc will be kept in `mobile-app-common-modules` repository.
- `CommonGraphqlModules` contains the `Queries`, `Mutations`, `GraphqlHelpers`, `Fragments`, and `Modules` that are common for all the mobile apps and are going to be used in more than one app.
-
## SVG Component
- Create all svg components inside `js/Common/SvgImages` folder
- Import and re-export in `js/Common/SvgImages/index.js`
- Change the web specific svg tags to `react-native` tags. For example change`<svg>` to `<Svg>` and `<g>` to `<G>`
- Always use props for `fill`, `height`, and `width`
- Make sure to pass `fill` from where you use the svg
- You can use `width` and `height` as default props but not `fill`
- All properties on svg,g,path elements should be camelCase to comply with React’s JSX
- Try to move the fill to the nearest parent. (`<Svg>` or `<G>` in most cases)

## Utils
- Project specific utils functions will go under this folder in Common repo
- Create a new file if the util function that you want to create does not fit into any other file
- Create the util wrapper file for any third party library that we use. It will be easier to replace/create/upate the functions for any project specific use in the future.

*js/Common/Utils/DeviceInfo.js*
Here is a util file that wraps 'react-native-device-info' library

import * as RNLocalize from "react-native-localize";
import { getFreeDiskStorage, isTablet } from "react-native-device-info";
import _ from "lodash";

export const getDeviceLocale = () => {
  const locales = RNLocalize.getLocales();

  return _.get(locales, "[0].languageCode", "en");
};

exports.getFreeDiskStorage = getFreeDiskStorage;
exports.isTablet = isTablet;

## Common/patches
- `patches` folder contains the patches for the dependencies that are used in our project.
- Rule of thumb to create a new patch is that if we want to make a change in the dependency and that change is too small to create a fork of that dependency then we'll go ahead and create a patch for that change.
- We have added the `patch-package --patch-dir js/Common/patches` command in `postinstall` script in `package.json`
- We use `patch-package` npm package to create and apply patch. [Documentation](https://www.npmjs.com/package/patch-package)

*react-native+0.62.2.patch*

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..0ff66f3 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -275,6 +275,8 @@ - (void)displayLayer:(CALayer *)layer
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
+  } else {
+    [super displayLayer:layer];
   }
 }
 
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

## .env files
- We define project wide configuration keys/variables in .env files on the root of the project
- For different environments we create different files
- For example `.env.development` for *development*, `env.staging` for *staging* and `.env.release` for *production*

## fontStyles.js
- We have pre-defined the font styles object in `js/Common/static.js` file as per our design language
- Make sure to use font styles from these object
- There are four distinct styles that we use for fonts, `regular`, `medium`, `demiBold`, and `bold`

import { fontStyle } from "js/static";

const styles = StyleSheet.create({
  heading: {
    ...fontStyle.bold,
    width: "auto",
    fontSize: 16,
    color: colors.steel
  }
});

## colors.js
- We have pre-defined the colors that we use across the platform inside `js/Common/UIElements/colors.js` file
- Whenever you have to use a color, make sure to import this file and use the color from there
- Make sure to use the pre-existing color whenever you are creating an UI
- The color that is used in design, if that exact color is not there in `colors.js` and if there exists a color in `colors.js` that is close to the design's color then use that
- In case the color used in the design is not there in the `colors.js`, then you confirm with the designer whether they have added this color in our color pallet and then you can add that color in `colors.js` by providing an appropriate name. In most cases, the designer will have a name for that color, if not then you can search for it [here](https://artyclick.com/colors/color-name-finder/)