@stringsaeed/react-native-template-stringsaeed - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

package.json

 {
   "name": "@stringsaeed/react-native-template-stringsaeed",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "React Native Template",
@@ -5,0 +5,0 @@ "repository": {

template/.eslintrc.js

 module.exports = {
   root: true,
-  extends: '@react-native-community',
+  extends: '@callstack',
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],
+  plugins: ['@typescript-eslint', 'prettier', 'react', 'react-native'],
+  settings: {
+    'import/resolver': {
+      typescript: {}
+    }
+  },
+  rules: {
+    'react-native/no-inline-styles': 2,
+    'react-native/no-color-literals': 2,
+    'react/display-name': 0,
+    'react-native/no-raw-text': [
+      2,
+      {
+        skip: ['Button']
+      }
+    ],
+    'react-native/no-single-element-style-arrays': 2,
+    'no-restricted-imports': [
+      'error',
+      {
+        paths: [
+          {
+            name: 'react',
+            importNames: ['useMemo', 'useCallback'],
+            message:
+              '`useMemo` and `useCallback` are subject to cache busting. Please use `useMemoOne`'
+          }
+        ]
+      }
+    ],
+    'import/order': [
+      'warn',
+      {
+        groups: [
+          'builtin',
+          'external',
+          'internal',
+          'parent',
+          'sibling',
+          'object'
+        ]
+      }
+    ],
+    'import/newline-after-import': ['error', { count: 1 }]
+  }
 };

template/.prettierrc.js

 module.exports = {
-  bracketSpacing: false,
+  bracketSpacing: true,
   jsxBracketSameLine: true,
   singleQuote: true,
-  trailingComma: 'all',
+  trailingComma: 'none'
 };

template/babel.config.js

@@ -0,3 +1,26 @@
+const plugins = [
+  [
+    require.resolve('babel-plugin-module-resolver'),
+    {
+      root: ['./src/'],
+      extensions: ['.js', '.jsx', '.es', '.es6', '.mjs', '.ts', '.tsx'],
+      alias: {
+        '@assets': './src/assets',
+        '@components': './src/components',
+        '@constants': './src/constants',
+        '@hooks': './src/hooks',
+        '@interfaces': './src/interfaces',
+        '@routers': './src/routers',
+        '@screens': './src/screens',
+        '@services': './src/services',
+        '@styles': './src/styles',
+        '@utils': './src/utils'
+      }
+    }
+  ]
+];
+
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins
 };

template/metro.config.js

@@ -8,11 +8,17 @@ /**
 
-module.exports = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: false,
-      },
-    }),
-  },
-};
+const { getDefaultConfig } = require('metro-config');
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts }
+  } = await getDefaultConfig();
+  return {
+    transformer: {
+      babelTransformerPath: require.resolve('react-native-svg-transformer')
+    },
+    resolver: {
+      assetExts: assetExts.filter((ext) => ext !== 'svg'),
+      sourceExts: [...sourceExts, 'svg']
+    }
+  };
+})();

template/package.json

@@ -13,20 +13,22 @@ {
   "dependencies": {
-    "@react-native-community/async-storage": "^1.10.3",
+    "@react-native-community/async-storage": "^1.11.0",
     "@react-native-community/masked-view": "^0.1.10",
-    "@react-native-community/netinfo": "^5.9.0",
-    "@react-navigation/native": "^5.4.2",
-    "@react-navigation/stack": "^5.3.9",
+    "@react-native-community/netinfo": "^5.9.4",
+    "@react-navigation/native": "^5.6.1",
+    "@react-navigation/stack": "^5.6.2",
     "axios": "^0.19.2",
     "react": "16.11.0",
     "react-native": "0.62.2",
+    "react-native-fast-image": "^8.1.5",
+    "react-native-gesture-handler": "^1.6.1",
+    "react-native-haptic-feedback": "^1.10.0",
     "react-native-offline": "^5.6.1",
     "react-native-reanimated": "^1.8.0",
-    "react-native-safe-area-context": "^1.0.2",
+    "react-native-safe-area-context": "^3.0.7",
     "react-native-screens": "^2.7.0",
-    "react-redux": "^7.2.0",
-    "redux": "^4.0.5",
-    "redux-observable": "^1.2.0",
-    "redux-thunk": "^2.3.0",
-    "rxjs": "^6.5.5",
-    "zustand": "^2.2.3"
+    "react-native-splash-screen": "^3.2.0",
+    "react-native-stacks": "npm:@mobily/stacks",
+    "react-native-svg": "^12.1.0",
+    "react-native-typography": "^1.4.1",
+    "use-memo-one": "^1.1.1"
   },
@@ -36,6 +38,7 @@ "devDependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-native-community/eslint-config": "^1.0.0",
+    "@callstack/eslint-config": "^10.0.0",
+    "@react-native-community/eslint-config": "^2.0.0",
     "@types/jest": "^24.0.24",
     "@types/react-native": "^0.62.0",
-    "@types/react-redux": "^7.1.9",
+    "@types/react-native-vector-icons": "^6.4.5",
     "@types/react-test-renderer": "16.9.2",
@@ -45,6 +48,12 @@ "@typescript-eslint/eslint-plugin": "^2.27.0",
     "babel-jest": "^24.9.0",
-    "eslint": "^6.5.1",
+    "babel-plugin-module-resolver": "^4.0.0",
+    "eslint": "^7.3.1",
+    "eslint-import-resolver-typescript": "^2.0.0",
+    "eslint-plugin-react-native": "^3.8.1",
     "jest": "^24.9.0",
+    "lint-staged": "^10.2.11",
     "metro-react-native-babel-preset": "^0.58.0",
     "prettier": "^2.0.4",
+    "react-native-svg-transformer": "^0.14.3",
+    "react-native-testing-library": "^2.1.0",
     "react-test-renderer": "16.11.0",
@@ -63,3 +72,14 @@ "typescript": "^3.8.3"
     ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --cache --fix",
+      "npx prettier --write"
+    ]
   }
 }

template/src/components/index.ts

@@ -1,1 +0,1 @@
-export {default as Container} from './container';
+export { default as View } from './view';

template/src/interfaces/components.ts

@@ -1,2 +0,8 @@
-export interface ContainerProps {
+import {
+  ScrollViewProps,
+  TouchableOpacityProps,
+  ViewProps
+} from 'react-native';
+
+interface BaseViewProps extends ViewProps {
   centered?: Boolean;
@@ -9,2 +15,36 @@ row?: Boolean;
   fill?: Boolean;
+  noFlex?: Boolean;
+  touchable?: Boolean;
+  container?: Boolean;
+  grow?: Boolean;
+  spaceBetween?: Boolean;
+  spaceAround?: Boolean;
+  spaceEvenly?: Boolean;
+  centerRow?: Boolean;
+  centerCol?: Boolean;
+  flexStartRow?: Boolean;
+  flexEndRow?: Boolean;
+  flexStartVertical?: Boolean;
+  flexEndVertical?: Boolean;
+  selfStart?: Boolean;
+  selfEnd?: Boolean;
+  selfCenter?: Boolean;
+  selfStretch?: Boolean;
+  shrink?: Boolean;
+  noShadow?: Boolean;
+  noOverflow?: Boolean;
+  color?: string;
+  width?: number | string;
+  height?: number | string;
+  type?: 'touchable' | 'scrollable';
 }
+
+interface TouchableContainerProps
+  extends TouchableOpacityProps,
+    BaseViewProps {}
+
+interface ScrollableContainerProps extends ScrollViewProps, BaseViewProps {}
+
+export type ProxyViewProps = TouchableContainerProps &
+  ScrollableContainerProps &
+  BaseViewProps;

template/src/styles/index.ts

@@ -1,1 +0,2 @@
-export {default as RegisteredStyles} from './registered'
+export * from './components';
+export { default as RegisteredStyles } from './registered';

template/src/styles/registered.ts

@@ -1,27 +0,32 @@
-import {StyleSheet} from 'react-native';
-const {create} = StyleSheet;
+import { StyleSheet } from 'react-native';
+import { transparentDark } from './colors';
 
+const { create } = StyleSheet;
+
 export default create({
   container: {
-    flex: 1,
+    flex: 1
   },
   centered: {
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems: 'center'
   },
   row: {
-    flexDirection: 'row',
+    flexDirection: 'row'
   },
   wrap: {
-    flexWrap: 'wrap',
+    flexWrap: 'wrap'
   },
   noGrow: {
-    flexGrow: 0,
+    flexGrow: 0
   },
   noShrink: {
-    flexShrink: 0,
+    flexShrink: 0
   },
   absolute: {
-    position: 'absolute',
+    position: 'absolute'
   },
+  noOverflow: {
+    overflow: 'hidden'
+  },
   fill: {
@@ -31,4 +36,62 @@ right: 0,
     top: 0,
-    bottom: 0,
+    bottom: 0
   },
+  grow: {
+    flexGrow: 1
+  },
+  spaceBetween: {
+    justifyContent: 'space-between'
+  },
+  spaceAround: {
+    justifyContent: 'space-around'
+  },
+  spaceEvenly: {
+    justifyContent: 'space-evenly'
+  },
+  centerRow: {
+    justifyContent: 'center'
+  },
+  centerCol: {
+    alignItems: 'center'
+  },
+  flexStartRow: {
+    justifyContent: 'flex-start'
+  },
+  flexEndRow: {
+    justifyContent: 'flex-end'
+  },
+  flexStartVertical: {
+    alignItems: 'flex-start'
+  },
+  flexEndVertical: {
+    alignItems: 'flex-end'
+  },
+  selfStart: {
+    alignSelf: 'flex-start'
+  },
+  selfEnd: {
+    alignSelf: 'flex-end'
+  },
+  selfCenter: {
+    alignSelf: 'center'
+  },
+  selfStretch: {
+    alignSelf: 'stretch'
+  },
+  shrink: {
+    flexShrink: 1
+  },
+  noShadow: {
+    elevation: 0,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    shadowColor: transparentDark
+  },
+  image: {
+    flex: 1,
+    height: undefined,
+    width: undefined,
+    alignSelf: 'stretch'
+  }
 });

No alert changes

Improved metrics

Total package byte prevSize

618343

11.29%

Lines of code

815

63.33%

Worsened metrics

Number of package files

87

-2.25%

No dependency changes