react-native-colorfy-template v1.2.0

🚦 Quick start

npx react-native init MyApp --template react-native-colorfy-template

Happy coding!

💫 Features

This template has virtually everything you might need to kick-start a React Native (0.67.3) app already built-in and set up:

• TypeScript, for type safety
• ESLint, for code linting
• Prettier, for code formatting
• Jest + Testing Library, for unit testing
• Detox + DetoxRecorder, for end-to-end testing
• Bitbucket Pipelines, for continuous integration
• Bitrise or AppCenter, for continuous deployment
• React Navigation v6, for screen navigation
• SVG Cleaner + React Native SVG, for cleaning & rendering .svg files directly
• jpegoptim + OptiPNG, for minifying .jpg & .png files
• Modalfy, for handling custom modals
• Splash Screen, for a nice cross-platform way of dealing with splash screens
• Reanimated + Gesture Handler, for performant native driven (- gesture) animations
• FastImage, for performant image loading
• Localize, for strings localization in JavaScript
• date-fns, for date manipulation
• Device Info, for native device info
• zustand, zfy & MMKV, for state management & data persistence (with encryption if needed)
• Pre-commit, for running the test suite before each commit
• Support for Dev, Staging & Prod Android flavours/iOS targets out of the box

• A bunch of useful commands listed down below

🗂 Project structure

📚 Commands

An exhaustive list of all the commands available in package.json and their use case.

📱 Running on device

If you're missing anything here, you can check out the react-native-cli commands list.

yarn android | yarn ios

Will 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 Emulator (if you have one setup & launched on your computer)/Xcode iOS Simulator.

Here is how you can use the ./build.sh run command:

• ./build.sh run ios dev or ./build.sh run ios dev debug
• ./build.sh run android dev -c or ./build.sh run android dev --clean (to clean the build folder and uninstall the app before building)

And from here you change the arguments ios/android, dev (for staging/prod) and debug (for release) depending on your needs.

🛠️ Building apps

./build.sh build

Builds and generates a signed (or unsigned) application and opens your file manager to its location once done.

Here are examples of how you can use the ./build.sh build command:

• ./build.sh build appbundle prod (Signed Android App Bundle Prod flavour in Release mode)
• ./build.sh build apk staging (Signed Android APK Staging flavour in Release mode)
• ./build.sh build apk prod --unsigned (Unsigned Android APK Prod flavour in Release mode)
• ./build.sh build ipa staging 42 (Signed iOS IPA Staging target in Release mode with build number 42)
• ./build.sh build ipa prod 42 --unsigned (Unsigned iOS IPA Staging target in Release mode build number 42)

🧪 Testing code

yarn lint

Runs ESLint on the whole codebase based on the rules set up in .eslintrc.js and tries to fix lint errors whenever possible.

yarn type

Runs the TypeScript compiler on all *.ts/*.tsx files based on the config set up in tsconfig.json.

yarn unit

Runs the test suite specified in __tests__ via Jest.

yarn test | yarn test-commit

Runs the 3 aforementioned commands.

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.

./build.sh detox

Runs the E2E test suite with Detox.

Here are examples of how you can use the ./build.sh detox command:

• ./build.sh detox android staging
• ./build.sh detox ios prod release

• ./build.sh detox --ci (as is, no other argument expected when this flag is used)

  And from here you change the arguments ios/android, dev (for staging/prod) and debug (for release) depending on your needs.

  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.

🗃 Miscellaneous

./build.sh assets

Automatically imports the latest POEditor translations, cleans SVG, minifies JPEG & PNG files and generates the src/assets/index.tsx file from where assets can be imported.

Note: For the images assets generation to work, you need to respect the file nomenclature rules:

• icons have to named with the format icn_name.svg and can only (!) be SVG files
• images have to named with the format img_name.png and can be anything (PNG, JPEG, GIF).

• ./build.sh clean android | ./build.sh clean ios

  Cleans the build directory and uninstalls the app from the device (Android only).

  ./build.sh keystore

  Generates a keystore file to sign Android App Bundles/APKs.

  Note: Without a keystore, the release variant won't be available.

  yarn start

  Starts Metro, the JavaScript bundler for React Native. Mandatory steps to do anything productive today!

  yarn postinstall

  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).

🤝 Contributing

This template is a very opinionated approach to React Native apps that the team uses at colorfy.

Therefore, we won't necessarily consider requests that do not align with our goals/vision/use cases for this template.

However, feel free to voice your opinions if need be: our position might change!

You can also consider doing so from the inside 👀…