{"id":21490488,"url":"https://github.com/colorfy-software/react-native-colorfy-template","last_synced_at":"2025-07-15T17:32:05.583Z","repository":{"id":38851654,"uuid":"233032143","full_name":"colorfy-software/react-native-colorfy-template","owner":"colorfy-software","description":"🧰 Comprehensive template for the React Native apps built at colorfy GmbH.","archived":false,"fork":false,"pushed_at":"2023-03-05T23:48:21.000Z","size":31649,"stargazers_count":20,"open_issues_count":7,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-11-10T22:18:21.037Z","etag":null,"topics":["boilerplate","react-native","template","typescript"],"latest_commit_sha":null,"homepage":"http://npmjs.com/package/react-native-colorfy-template","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/colorfy-software.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-10T11:22:16.000Z","updated_at":"2024-07-22T08:52:29.000Z","dependencies_parsed_at":"2023-02-06T08:15:54.176Z","dependency_job_id":null,"html_url":"https://github.com/colorfy-software/react-native-colorfy-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colorfy-software%2Freact-native-colorfy-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colorfy-software%2Freact-native-colorfy-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colorfy-software%2Freact-native-colorfy-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colorfy-software%2Freact-native-colorfy-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/colorfy-software","download_url":"https://codeload.github.com/colorfy-software/react-native-colorfy-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226057241,"owners_count":17566946,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","react-native","template","typescript"],"created_at":"2024-11-23T14:38:15.008Z","updated_at":"2024-11-23T14:38:15.597Z","avatar_url":"https://github.com/colorfy-software.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003ca href=\"https://github.com/colorfy-software/react-native-colorfy-template\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n    🧰 Colorfy App Template\n  \u003c/a\u003e\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003e\n  \u003cstrong\u003eComprehensive template for the React Native apps built at \u003ca href=\"https://colorfy.me\" target=\"_blank\" rel=\"noopener noreferrer\"\u003ecolorfy GmbH\u003c/a\u003e.\u003c/strong\u003e\n\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.org/package/react-native-colorfy-template\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n    \u003cimg src=\"https://badge.fury.io/js/react-native-colorfy-template.svg\" alt=\"npm version\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## 🚦 Quick start\n\n```sh\nnpx react-native init MyApp --template react-native-colorfy-template\n```\n\nHappy coding!\n\n## 💫 Features\n\nThis template has virtually everything you might need to kick-start a React Native (0.67.3) app already built-in and set up:\n\n* [TypeScript](https://www.typescriptlang.org), for type safety\n* [ESLint](https://eslint.org), for code linting \n* [Prettier](https://prettier.io), for code formatting\n* [Jest](https://jestjs.io) + [Testing Library](https://testing-library.com), for unit testing\n* [Detox](https://github.com/wix/Detox) + [DetoxRecorder](https://github.com/wix/DetoxRecorder), for end-to-end testing\n* [Bitbucket Pipelines](https://bitbucket.org/product/features/pipelines), for continuous integration\n* [Bitrise](https://www.bitrise.io) or [AppCenter](https://appcenter.ms), for continuous deployment\n* [React Navigation](https://reactnavigation.org) v6, for screen navigation\n* [SVG Cleaner](https://github.com/RazrFalcon/svgcleaner) + [React Native SVG](https://github.com/react-native-svg/react-native-svg), for cleaning \u0026 rendering `.svg` files directly\n* [jpegoptim](https://github.com/tjko/jpegoptim) + [OptiPNG](http://optipng.sourceforge.net), for minifying `.jpg` \u0026 `.png` files\n* [Modalfy](https://colorfy-software.gitbook.io/react-native-modalfy), for handling custom modals\n* [Splash Screen](https://github.com/crazycodeboy/react-native-splash-screen), for a nice cross-platform way of dealing with splash screens\n* [Reanimated](https://docs.swmansion.com/react-native-reanimated) + [Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/), for performant native driven (- gesture) animations\n* [FastImage](https://github.com/DylanVann/react-native-fast-image), for performant image loading\n* [Localize](https://github.com/zoontek/react-native-localize), for strings localization in JavaScript\n* [date-fns](https://date-fns.org), for date manipulation\n* [Device Info](https://github.com/react-native-device-info/react-native-device-info), for native device info\n* [zustand](https://github.com/pmndrs/zustand), [zfy](https://colorfy-software.gitbook.io/zfy) \u0026 [MMKV](https://github.com/mrousavy/react-native-mmkv), for state management \u0026 data persistence (with encryption if needed) \n* [Pre-commit](https://github.com/observing/pre-commit), for running the test suite before each commit\n* Support for `Dev`, `Staging` \u0026 `Prod` Android flavours/iOS targets out of the box\n* A bunch of useful commands listed down below\n  \n## 🗂 Project structure\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick to expand \u003c/summary\u003e\n  \n  ```\n  .\n  ├── __mocks__ // All the mocks needed to setup unit tests\n  ├── __tests__ // Holds all the unit tests (ran by Jest)\n  ├── e2e // Holds all the E2E tests (ran by Detox)\n  ├── scripts // Various useful scripts accessible via the commands in package.json\n  │   ├── build-unsigned-ipa.sh // Builds an unsigned IPA of any iOS target\n  │   ├── create-pipeline-badge.sh // Creates status SVG badge for the Bitbucket Pipelines to use\n  │   ├── generate-signed-android-keystore.sh // Generates a keystore file to sign Android App Bundles/APKs\n  │   ├── images.js // Generates the src/assets/index.tsx file\n  │   ├── postinstall.sh // Runs after each modification to the project dependencies list to run Jetifier and update Pods\n  │   └── run-detox-ci.sh // Runs Detox in AppCenter (if @appcenter tag was used to setup project)\n  ├── src // App root folder\n  │   ├── api // Contains all the API requests\n  │   │   ├── api.ts\n  │   │   └── requests.ts\n  │   ├── assets // Holds all of files, SVGs, images, gifs, videos, fonts, etc\n  │   │   ├── fonts/\n  │   │   ├── icn_activity.svg\n  │   │   ├── logo.png\n  │   │   └── index.tsx // Generated file from where assets can be imported (`Assets.x`, `Icons.x`, `Images.x`, etc)\n  │   ├── components // Global reusable components\n  │   │   ├── AnimatedWrapper.tsx // Otherwise one file per component \n  │   │   ├── AppText.tsx\n  │   │   ├── AsyncRenderWrapper.tsx\n  │   │   ├── Button.tsx\n  │   │   ├── FloatingLabelInput.tsx\n  │   │   ├── Row.tsx\n  │   │   └── ScreenLoader.tsx\n  │   ├── config    \n  │   │   └── app-config // Exports the CONFIG variable (with backend URL, target helpers, feature flags, etc)\n  │   ├── core // Internal SDK that takes care of all the business logic + some helpers\n  │   │   ├── app-core.ts // Each subclass of the core is a TypeScript file\n  │   │   ├── core.ts // Root class of core (only file to be imported for use)\n  │   │   ├── events-core.ts\n  │   │   └── user-core.ts\n  │   ├── locales // Setup for the app localization (JS side, not native)\n  │   │   ├── de.json\n  │   │   ├── en.json\n  │   │   └── index.ts // Contains all the helpers to add localization in the app\n  │   ├── modals // Contains the modals components used by react-native-modalfy\n  │   │   └── AlertModal.tsx\n  │   ├── navigation // Used to hold all of the navigation logic\n  │   │   ├── AuthStack.tsx\n  │   │   ├── Navigation.tsx // Main navigation component file\n  │   │   ├── SettingsStack.tsx\n  │   │   └── TabBar.tsx\n  │   ├── screens // Used to hold all of the app screens at this one level, no nesting\n  │   │   └── activity // Create a folder per screen\n  │   │       ├── components // If screen has components that are used only within the screen, put them here\n  │   │       ├── sections // If screen has sections that are used only within the screen, put them here\n  │   │       └── Activity.tsx // Component file for the screen\n  │   ├── store // State management with zustand\n  │   │   ├── middlewares // Folder for the custom store middlewares\n  │   │   ├── stores\n  │   │   │   ├── app-store.ts // Each store has its own file\n  │   │   │   ├── stores.ts\n  │   │   │   └── user-store.ts\n  │   │   └── stores.ts // Main store file\n  │   ├── styles // Global styling variables \u0026 device helpers\n  │   │   ├── colors.ts\n  │   │   ├── device.ts \n  │   │   ├── fonts.ts \n  │   │   └── style-guide.ts // Entry file that exports all the styles \u0026 helpers\n  │   ├── types // Folder that regroups all the TypeScript interfaces defined in the app\n  │   │   ├── modals-types.ts // One file per type item\n  │   │   ├── navigation-types.ts\n  │   │   └── store-types.ts\n  │   └── utils // Helpers that don't really belong in the core\n  │       ├── animate-color.ts\n  │       ├── date.ts\n  │       ├── linking.ts\n  │       ├── navigation.ts\n  │       ├── sleep.ts\n  │       └── strings.ts\n  ├── .eslintrc.js // Configuration for ESLint (linter)\n  ├── .prettierrc // Holds the code formatter configuration\n  ├── .svgrrc.js // Used to set up colors to replace in some .svg files\n  ├── app.json // Contains the app name used by various scripts throughout the app\n  ├── babel.config.js // Configuration file for Babel\n  ├── bitbucket-pipelines.yml // Configuration file for Bitbucket Pipelines (CI)\n  ├── build.sh // File containing useful shell scripts\n  ├── detox.config.js // Detox configuration (E2E testing)\n  ├── index.d.ts // Useful to set TypeScript interfaces needed for libraries that don't provided them\n  ├── index.js // Entry point of the app\n  ├── jest.config.js // Configuration file for Jest (unit test)\n  └── tsconfig.json // Configuration file for the TypeScript compiler\n  ```\n\u003c/details\u003e\n\n## 📚 Commands\n\nAn exhaustive list of all the commands available in `package.json` and their use case.\n\n---\n\n### 📱 Running on device\n\n\u003cdetails\u003e\n  \u003csummary\u003eBrowse the commands\u003c/summary\u003e\n\n  If you're missing anything here, you can check out the [react-native-cli commands list](https://github.com/react-native-community/cli/blob/master/docs/commands.md#run-ios).\n\n  ###  `yarn android` | `yarn ios`\n\nWill run `./build.sh run` to build the **Dev flavour/target in Debug mode** on your phone (if connected to your computer) or in the [Android\nEmulator](https://developer.android.com/studio/run/emulator) (if you have one setup \u0026 launched on your computer)/Xcode iOS Simulator.\n\nHere is how you can use the `./build.sh run` command:\n- `./build.sh run ios dev` or `./build.sh run ios dev debug`\n- `./build.sh run android dev -c` or `./build.sh run android dev --clean` (to clean the build folder and uninstall the app before building)\n\nAnd from here you change the arguments `ios`/`android`, `dev` (for `staging`/`prod`) and `debug` (for `release`) depending on your needs.\n\u003c/details\u003e\n\n---\n\n### 🛠️ Building apps\n\n\u003cdetails\u003e\n  \u003csummary\u003eBrowse the commands\u003c/summary\u003e\n\n  ### `./build.sh build`\n\n  Builds and generates a signed (or unsigned) application and opens your file manager to its location once done.\n\n  Here are examples of how you can use the `./build.sh build` command:\n  - `./build.sh build appbundle prod` (Signed Android App Bundle Prod flavour in Release mode)\n  - `./build.sh build apk staging` (Signed Android APK Staging flavour in Release mode)\n  - `./build.sh build apk prod --unsigned` (Unsigned Android APK Prod flavour in Release mode) \n  - `./build.sh build ipa staging 42` (Signed iOS IPA Staging target in Release mode with build number 42)\n  - `./build.sh build ipa prod 42 --unsigned` (Unsigned iOS IPA Staging target in Release mode build number 42)\n\u003c/details\u003e\n\n---\n\n### 🧪 Testing code\n\n\u003cdetails\u003e\n  \u003csummary\u003eBrowse the commands\u003c/summary\u003e\n\n  ### `yarn lint`\n\n  Runs ESLint on the whole codebase based on the rules set up in `.eslintrc.js` and tries to fix lint errors whenever possible.\n\n  ### `yarn type`\n\n  Runs the TypeScript compiler on all `*.ts`/`*.tsx` files based on the config set up in `tsconfig.json`.\n\n  ### `yarn unit`\n\n  Runs the test suite specified in `__tests__` via Jest.\n\n  ### `yarn test` | `yarn test-commit`\n\n  Runs the 3 aforementioned commands.\n\n  **Note**: `yarn test` is run by the CI/CD tool before any build. `yarn test-commit` is run before any commit is made from your local machine. Unless for specific and approved reasons: make sure to always pass this command before pushing your code.\n  \n  ### `./build.sh detox`\n\n  Runs the E2E test suite with Detox.\n\n  Here are examples of how you can use the `./build.sh detox` command:\n  - `./build.sh detox android staging`\n  - `./build.sh detox ios prod release`\n  - `./build.sh detox --ci` (as is, no other argument expected when this flag is used)\n\n  And from here you change the arguments `ios`/`android`, `dev` (for `staging`/`prod`) and `debug` (for `release`) depending on your needs.\n\n  **Note**: `./build.sh detox --ci` runs the E2E test suite with Detox in the CI/CD tool with the appropriated flavour/target in Release mode. This is not meant for local use on your machine, prefer the aforementioned commands instead or refer to [Detox documentation](https://github.com/wix/Detox/tree/master/docs).\n  \u003c/details\u003e\n\n---\n\n### 🗃 Miscellaneous\n\n\u003cdetails\u003e\n  \u003csummary\u003eBrowse the commands\u003c/summary\u003e\n\n  ### `./build.sh assets`\n\n  Automatically imports the latest POEditor translations, cleans SVG, minifies JPEG \u0026 PNG files and generates the `src/assets/index.tsx` file from where assets can be imported.\n  \n  **Note**: For the images assets generation to work, you need to respect the file nomenclature rules:\n  - **icons have to named with the format** `icn_name.svg` **and can only (!) be SVG files**\n  - **images have to named with the format** `img_name.png` **and can be anything (PNG, JPEG, GIF).**\n  - \n  ### `./build.sh clean android` | `./build.sh clean ios`\n\n  Cleans the build directory and uninstalls the app from the device (Android only).\n\n  ### `./build.sh keystore`\n\n  Generates a keystore file to sign Android App Bundles/APKs.\n\n  **Note**: Without a keystore, the `release` variant won't be available.\n\n  ### `yarn start`\n\n  Starts Metro, the JavaScript bundler for React Native. Mandatory steps to do anything productive today!\n\n  ### `yarn postinstall`\n\n  Runs after each use of `yarn add`/`yarn install` in the project to jetify the Android code, update the Pods on iOS (if you're using macOS).\n\u003c/details\u003e\n\n## 🤝 Contributing\n\nThis template is a very opinionated approach to React Native apps that the team uses at colorfy.\n\n**Therefore, we won't necessarily consider requests that do not align with our goals/vision/use cases for this template.**\n\nHowever, feel free to voice your opinions if need be: our position might change!\n\nYou can also consider doing so [_from the inside_](https://colorfy.me/jobs/) 👀…\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolorfy-software%2Freact-native-colorfy-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcolorfy-software%2Freact-native-colorfy-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolorfy-software%2Freact-native-colorfy-template/lists"}