new-react-native-boilerplate 0.0.0-stage → 1.0.0

package/template/ios/link-assets-manifest.json

@@ -0,0 +1,29 @@
+{
+  "migIndex": 1,
+  "data": [
+    {
+      "path": "src/assets/fonts/Poppins-Bold.ttf",
+      "sha1": "875cf0cecd647bcf22e79d633d868c1b1ec98dfa"
+    },
+    {
+      "path": "src/assets/fonts/Poppins-Medium.ttf",
+      "sha1": "283f21b44efbdbf276ba802be2d949a36bbc4233"
+    },
+    {
+      "path": "src/assets/fonts/Poppins-Regular.ttf",
+      "sha1": "fdd3002e7d814ee47c1c1b8487c72c6bbb3a2d00"
+    },
+    {
+      "path": "src/assets/fonts/Poppins-SemiBold.ttf",
+      "sha1": "8a4ace9392d06bcb7f8ea2f5169b07e4c383a90d"
+    },
+    {
+      "path": "src/assets/fonts/futura_book.otf",
+      "sha1": "81bd044285126ef7ba34fa8d8cafc3f787e3d054"
+    },
+    {
+      "path": "src/assets/fonts/futura_medium.otf",
+      "sha1": "335cb6dab2e0995ef9368234f97f006df013055d"
+    }
+  ]
+}

package/template/jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  preset: '@react-native/jest-preset',
+  setupFilesAfterEnv: ['./jest.setup.js'],
+  transform: {
+    '^.+\\.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$': require.resolve(
+      '@react-native/jest-preset/jest/assetFileTransformer.js',
+    ),
+    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
+  },
+  transformIgnorePatterns: [
+    'node_modules/(?!((jest-)?react-native|@react-native(-community)?|@react-navigation|react-redux|@reduxjs/toolkit|immer|react-i18next|react-native-reanimated|react-native-worklets|react-native-unistyles|react-native-safe-area-context|react-native-screens|react-native-gesture-handler|react-native-keyboard-aware-scroll-view|react-native-iphone-x-helper|react-native-restart|react-native-localize)/)',
+  ],
+};

package/template/jest.setup.js

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-require-imports -- require() is needed inside jest.mock factories */
+import 'react-native-gesture-handler/jestSetup';
+
+// react-native-worklets must be mocked before react-native-reanimated is loaded.
+// (jest.mock calls are hoisted to the top of this file by babel-plugin-jest-hoist)
+jest.mock('react-native-worklets', () => require('react-native-worklets/src/mock'));
+
+// react-native-reanimated runs on its in-memory mock in tests
+jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock'));
+
+// Mock MMKV storage with an in-memory implementation
+jest.mock('react-native-mmkv', () => {
+  const {createMockMMKV} = require('react-native-mmkv/lib/commonjs/createMMKV.mock');
+
+  return {
+    MMKV: jest.fn(() => createMockMMKV()),
+  };
+});
+
+jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter', () => ({
+  __esModule: true,
+  default: jest.fn().mockImplementation(() => ({
+    addListener: jest.fn(() => ({remove: jest.fn()})),
+    removeAllListeners: jest.fn(),
+    removeSubscription: jest.fn(),
+  })),
+}));
+
+// Register unistyles breakpoints/themes for component tests
+import './src/styles/unistyles';

package/template/metro.config.js

@@ -0,0 +1,15 @@
+const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+
+/**
+ * Metro configuration
+ * https://reactnative.dev/docs/metro
+ *
+ * @type {import('@react-native/metro-config').MetroConfig}
+ */
+const config = {
+  resolver: {
+    sourceExts: ['js', 'jsx', 'ts', 'tsx', 'cjs', 'mjs', 'json'],
+  },
+};
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);

package/template/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "BoilerPlateReactNative",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "lint": "eslint . --ext .ts,.tsx",
+    "start": "react-native start --reset-cache",
+    "start-logs": "npx react-native start --reset-cache --client-logs",
+    "reset": "react-native start --reset-cache",
+    "test": "jest",
+    "asset": "npx react-native-asset",
+    "test:report": "jest --collectCoverage --coverageDirectory=\"./coverage\" --ci --reporters=default --reporters=jest-junit --coverage",
+    "tsc": "node_modules/typescript/bin/tsc --noEmit",
+    "precommit": "concurrently 'yarn tsc' 'yarn lint'",
+    "android-bundle-release": "react-native build-android --mode=release",
+    "android-run-release": "react-native run-android --mode=release",
+    "podinstall": "cd ios && bundle exec pod install && cd ..",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@os-team/i18next-react-native-language-detector": "^1.1.6",
+    "@react-navigation/native": "^7.5.1",
+    "@react-navigation/native-stack": "^7.21.0",
+    "@reduxjs/toolkit": "^2.13.0",
+    "axios": "^1.20.0",
+    "formik": "^2.4.9",
+    "i18next": "^26.5.4",
+    "react": "19.3.0",
+    "react-i18next": "^17.1.0",
+    "react-native": "0.88.0",
+    "react-native-gesture-handler": "^2.29.1",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "react-native-mmkv": "^3.3.3",
+    "react-native-reanimated": "^4.7.1",
+    "react-native-worklets": "^0.13.0",
+    "react-native-restart": "^0.0.29",
+    "react-native-safe-area-context": "^5.10.1",
+    "react-native-screens": "^4.30.0",
+    "react-native-is-edge-to-edge": "^1.3.1",
+    "react-native-unistyles": "^2.43.0",
+    "@react-native/normalize-colors": "0.88.0",
+    "react-redux": "^9.3.0",
+    "yup": "^1.7.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
+    "@react-native-community/cli": "20.2.0",
+    "@react-native-community/cli-platform-android": "20.2.0",
+    "@react-native-community/cli-platform-ios": "20.2.0",
+    "@react-native/babel-preset": "0.88.0",
+    "@react-native/eslint-config": "0.88.0",
+    "@react-native/jest-preset": "0.88.0",
+    "@react-native/metro-config": "0.88.0",
+    "@react-native/typescript-config": "0.88.0",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.2.0",
+    "@types/react-test-renderer": "^19.1.0",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "commitlint": "^21.2.4",
+    "concurrently": "^10.0.6",
+    "eslint": "^9.39.5",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jest": "^29.17.0",
+    "eslint-plugin-perfectionist": "^5.13.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-testing-library": "^7.16.2",
+    "eslint-plugin-unicorn": "^62.0.0",
+    "eslint-plugin-unused-imports": "^4.4.1",
+    "husky": "^9.1.7",
+    "jest": "^29.7.0",
+    "prettier": "2.8.8",
+    "react-native-dotenv": "^5.0.0",
+    "react-native-localize": "^3.7.2",
+    "react-test-renderer": "19.3.0",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.72.0"
+  },
+  "engines": {
+    "node": ">=22.11.0"
+  },
+  "packageManager": "yarn@1.22.22"
+}

package/template/plugins/compile-js/_prompts.js

@@ -0,0 +1,6 @@
+module.exports = {
+  color: "blue",
+  initial: true,
+  message: "📘 Using typescript ?",
+  type: "confirm",
+};

package/template/plugins/compile-js/index.js

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+const promptsOptions = require("./_prompts");
+const { apply } = require("./plugin");
+
+module.exports = {
+  apply,
+  name: "typescript",
+  // promptsOptions,
+};

package/template/plugins/compile-js/plugin.js

@@ -0,0 +1,103 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+/* eslint-disable no-console */
+const { execSync, spawnSync } = require("node:child_process");
+
+const TYPESCRIPT_VERSION = "5.7.3";
+
+function isYarnAvailable() {
+  try {
+    return !!(
+      execSync("yarn --version", {
+        stdio: [0, "pipe", "ignore"],
+      }).toString() || ""
+    ).trim();
+  } catch {
+    return null;
+  }
+}
+function isNpmAvailable() {
+  try {
+    return !!(
+      execSync("npm --version", {
+        stdio: [0, "pipe", "ignore"],
+      }).toString() || ""
+    ).trim();
+  } catch {
+    return null;
+  }
+}
+
+module.exports = {
+  async apply(value) {
+    return new Promise((resolve) => {
+      let packageManager = null;
+      let addCmd = null;
+
+      // react-native cli prefer yarn so we follow the same logic
+      if (isYarnAvailable()) {
+        packageManager = "yarn";
+        addCmd = "add";
+      } else if (isNpmAvailable()) {
+        packageManager = "npm";
+        addCmd = "install";
+      }
+
+      if (!packageManager) {
+        console.error(
+          "🚨 No package manager found. Please install yarn or npm."
+        );
+        process.exit(1);
+      }
+
+      if (value) {
+        console.log("\n");
+
+        console.log("📦 Loading the build tool...");
+        const installTypeScriptCmd = spawnSync(
+          packageManager,
+          [addCmd, "-D", `typescript@${TYPESCRIPT_VERSION}`],
+          { stdio: "inherit" }
+        );
+        if (installTypeScriptCmd.error) {
+          console.error(installTypeScriptCmd.error);
+          process.exit(1);
+        }
+
+        console.log("🧱 Building the javascript source...");
+        const transpileCmd = spawnSync(
+          "npx",
+          ["tsc", "--project", `plugins/compile-js/tsconfig.build.json`],
+          { stdio: "inherit" }
+        );
+        if (transpileCmd.error) {
+          console.error(transpileCmd.error);
+          process.exit(1);
+        }
+
+        try {
+          console.log("🖼️  Copying assets...");
+          execSync("cp -R src/theme/assets/images js/src/theme/assets/images");
+
+          console.log("♻️  Replacing source...");
+          execSync("rm -rf src", { stdio: "pipe" });
+          execSync("cp -R js/src ./src", { stdio: "pipe" });
+          execSync("rm -rf __mocks__", { stdio: "pipe" });
+          execSync("cp -R js/__mocks__ ./__mocks__", { stdio: "pipe" });
+          execSync("rm -rf js", { stdio: "pipe" });
+        } catch {
+          console.error(
+            "🚨 Failed to copy assets or replace source. If you are using windows, please use git bash."
+          );
+          process.exit(1);
+        }
+
+        console.log("🌀 Removing types ...");
+        execSync("rm -rf src/theme/types", { stdio: "pipe" });
+        execSync("rm -f src/navigation/paths.js", { stdio: "pipe" });
+        execSync("rm -f src/navigation/types.js", { stdio: "pipe" });
+      }
+
+      resolve();
+    });
+  },
+};

package/template/plugins/compile-js/tsconfig.build.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-native",
+    "baseUrl": "../../",
+    "paths": {
+      "@api/*": ["src/api/*"],
+      "@assets/*": ["src/assets/*"],
+      "@components/*": ["src/components/*"],
+      "@screens/*": ["src/screens/*"],
+      "@utils/*": ["src/utils/*"],
+      "@constants/*": ["src/constants/*"],
+      "@typings/*": ["src/typings/*"],
+      "@redux/*": ["src/redux/*"],
+      "@navigations/*": ["src/navigations/*"],
+      "@hooks/*": ["src/hooks/*"],
+      "@models/*": ["src/models/*"]
+    }
+  }
+}

package/template/plugins/index.js

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+// eslint-disable-next-line import/no-extraneous-dependencies
+const prompts = require("prompts");
+const typescriptPlugin = require("./compile-js");
+const printSuccessPlugin = require("./printSuccess");
+
+// List of plugin to apply (ordered)
+const plugins = [typescriptPlugin, printSuccessPlugin];
+
+/**
+ * @typedef {Object} Plugin
+ * @property promptsOptions {Object|null} the plugin prompt property
+ * @property apply {Function} the refactoring to apply to the boilerplate
+ */
+
+/**
+ * Apply a plugin
+ * @param name {string}
+ * @param plugin {Plugin}
+ * @param response {Object} previous response
+ *
+ * @return {Promise<*>}
+ */
+async function applyPlugin(name, plugin, response) {
+  if (!plugin.promptsOptions) {
+    await plugin.apply(null, response);
+    return { [name]: null, ...response };
+  }
+  const { value } = await prompts({ ...plugin.promptsOptions, name: "value" });
+  await plugin.apply(value, response);
+  return { [name]: value, ...response };
+}
+
+module.exports = {
+  /**
+   * Apply all plugin in the order of plugin
+   * @return {Promise<{apply: function(*=): Promise<void>, name: string, promptsOptions: {onRender(*): void, initial: boolean, name: string, type: string, message: string}|{type?: string, name?: string, message?: string, msg?: *, initial?: boolean, onRender?: function(*): void}}|{name?: string, promptsOptions?: {onRender(*): void, initial: boolean, name: string, type: string, message: string}|{type?: string, name?: string, message?: string, msg?: *, initial?: boolean, onRender?: function(*): void}, apply?: function(*=): Promise<void>}|{apply: function(*, *): Promise<Promise.Promise|Promise<unknown>>, name: string, promptsOptions: null}|{name?: string, promptsOptions?: null, apply?: function(*, *): Promise<Promise.Promise|Promise<unknown>>}>}
+   */
+  async applyPlugins() {
+    return plugins.reduce(
+      (acc, { name, ...plugin }) =>
+        acc.then((response) => applyPlugin(name, plugin, response)),
+      Promise.resolve({})
+    );
+  },
+};

package/template/plugins/printSuccess/_prompts.js

@@ -0,0 +1 @@
+module.exports = null;

package/template/plugins/printSuccess/index.js

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+const promptsOptions = require("./_prompts");
+const { apply } = require("./plugin");
+
+module.exports = {
+  apply,
+  name: "printSuccess",
+  promptsOptions,
+};

package/template/plugins/printSuccess/plugin.js

@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+/* eslint-disable no-console */
+// eslint-disable-next-line import/no-extraneous-dependencies
+const { blue, green, red, yellow } = require("kleur");
+
+module.exports = {
+  async apply(value, previousValues) {
+    return new Promise((resolve) => {
+      console.log("\n");
+      console.log(
+        "React-Native Boilerplate initialized with success ! 🚀\n"
+      );
+      if (!previousValues.typescript) {
+        console.log(blue("  THE TYPESCRIPT VERSION 📘"));
+      } else {
+        console.log(yellow("  THE JAVASCRIPT VERSION 📒"));
+      }
+      console.log("\n");
+
+      console.log(
+        "- 📚 If you need to read more about this boilerplate : https://thecodingmachine.github.io/react-native-boilerplate/"
+      );
+      console.log(
+        "- ⭐ If you love this boilerplate, give us a star, you will be a ray of sunshine in our lives :) https://github.com/sharmahardik59/RNBoilerplate"
+      );
+
+      if (previousValues.typescript) {
+        console.log("\n");
+        console.log(
+          red(
+            '🚨 You choose the javascript version, don\'t forget to run "yarn lint:fix" after the installation 🚨'
+          )
+        );
+        console.log("\n");
+      }
+
+      resolve();
+    });
+  },
+};

package/template/react-native.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    assets: ['./src/assets/fonts'],
+    project: {
+      android: {},
+      ios: {},
+    },
+  };

package/template/src/App.tsx

@@ -0,0 +1,27 @@
+import store from '@redux/store';
+import checkLocalStorage from '@utils/handleLocalStorage';
+import React, { useLayoutEffect } from 'react';
+import { StatusBar, useColorScheme } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { Provider } from 'react-redux';
+import Routes from './navigations/Routes';
+import './styles/unistyles';
+
+const App = (): React.JSX.Element => {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  useLayoutEffect(() => {
+    checkLocalStorage();
+  }, []);
+
+  return (
+    <Provider store={store}>
+      <SafeAreaProvider>
+        <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
+        <Routes />
+      </SafeAreaProvider>
+    </Provider>
+  );
+};
+
+export default App;