react-native-colorfy-template
react-native-colorfy-template copied to clipboard
๐งฐ Comprehensive template for the React Native apps built at colorfy GmbH.
๐งฐ Colorfy App Template
Comprehensive template for the React Native apps built at colorfy GmbH.
๐ฆ 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
Click to expand
.
โโโ __mocks__ // All the mocks needed to setup unit tests
โโโ __tests__ // Holds all the unit tests (ran by Jest)
โโโ e2e // Holds all the E2E tests (ran by Detox)
โโโ scripts // Various useful scripts accessible via the commands in package.json
โ โโโ build-unsigned-ipa.sh // Builds an unsigned IPA of any iOS target
โ โโโ create-pipeline-badge.sh // Creates status SVG badge for the Bitbucket Pipelines to use
โ โโโ generate-signed-android-keystore.sh // Generates a keystore file to sign Android App Bundles/APKs
โ โโโ images.js // Generates the src/assets/index.tsx file
โ โโโ postinstall.sh // Runs after each modification to the project dependencies list to run Jetifier and update Pods
โ โโโ run-detox-ci.sh // Runs Detox in AppCenter (if @appcenter tag was used to setup project)
โโโ src // App root folder
โ โโโ api // Contains all the API requests
โ โ โโโ api.ts
โ โ โโโ requests.ts
โ โโโ assets // Holds all of files, SVGs, images, gifs, videos, fonts, etc
โ โ โโโ fonts/
โ โ โโโ icn_activity.svg
โ โ โโโ logo.png
โ โ โโโ index.tsx // Generated file from where assets can be imported (`Assets.x`, `Icons.x`, `Images.x`, etc)
โ โโโ components // Global reusable components
โ โ โโโ AnimatedWrapper.tsx // Otherwise one file per component
โ โ โโโ AppText.tsx
โ โ โโโ AsyncRenderWrapper.tsx
โ โ โโโ Button.tsx
โ โ โโโ FloatingLabelInput.tsx
โ โ โโโ Row.tsx
โ โ โโโ ScreenLoader.tsx
โ โโโ config
โ โ โโโ app-config // Exports the CONFIG variable (with backend URL, target helpers, feature flags, etc)
โ โโโ core // Internal SDK that takes care of all the business logic + some helpers
โ โ โโโ app-core.ts // Each subclass of the core is a TypeScript file
โ โ โโโ core.ts // Root class of core (only file to be imported for use)
โ โ โโโ events-core.ts
โ โ โโโ user-core.ts
โ โโโ locales // Setup for the app localization (JS side, not native)
โ โ โโโ de.json
โ โ โโโ en.json
โ โ โโโ index.ts // Contains all the helpers to add localization in the app
โ โโโ modals // Contains the modals components used by react-native-modalfy
โ โ โโโ AlertModal.tsx
โ โโโ navigation // Used to hold all of the navigation logic
โ โ โโโ AuthStack.tsx
โ โ โโโ Navigation.tsx // Main navigation component file
โ โ โโโ SettingsStack.tsx
โ โ โโโ TabBar.tsx
โ โโโ screens // Used to hold all of the app screens at this one level, no nesting
โ โ โโโ activity // Create a folder per screen
โ โ โโโ components // If screen has components that are used only within the screen, put them here
โ โ โโโ sections // If screen has sections that are used only within the screen, put them here
โ โ โโโ Activity.tsx // Component file for the screen
โ โโโ store // State management with zustand
โ โ โโโ middlewares // Folder for the custom store middlewares
โ โ โโโ stores
โ โ โ โโโ app-store.ts // Each store has its own file
โ โ โ โโโ stores.ts
โ โ โ โโโ user-store.ts
โ โ โโโ stores.ts // Main store file
โ โโโ styles // Global styling variables & device helpers
โ โ โโโ colors.ts
โ โ โโโ device.ts
โ โ โโโ fonts.ts
โ โ โโโ style-guide.ts // Entry file that exports all the styles & helpers
โ โโโ types // Folder that regroups all the TypeScript interfaces defined in the app
โ โ โโโ modals-types.ts // One file per type item
โ โ โโโ navigation-types.ts
โ โ โโโ store-types.ts
โ โโโ utils // Helpers that don't really belong in the core
โ โโโ animate-color.ts
โ โโโ date.ts
โ โโโ linking.ts
โ โโโ navigation.ts
โ โโโ sleep.ts
โ โโโ strings.ts
โโโ .eslintrc.js // Configuration for ESLint (linter)
โโโ .prettierrc // Holds the code formatter configuration
โโโ .svgrrc.js // Used to set up colors to replace in some .svg files
โโโ app.json // Contains the app name used by various scripts throughout the app
โโโ babel.config.js // Configuration file for Babel
โโโ bitbucket-pipelines.yml // Configuration file for Bitbucket Pipelines (CI)
โโโ build.sh // File containing useful shell scripts
โโโ detox.config.js // Detox configuration (E2E testing)
โโโ index.d.ts // Useful to set TypeScript interfaces needed for libraries that don't provided them
โโโ index.js // Entry point of the app
โโโ jest.config.js // Configuration file for Jest (unit test)
โโโ tsconfig.json // Configuration file for the TypeScript compiler
๐ Commands
An exhaustive list of all the commands available in package.json
and their use case.
๐ฑ Running on device
Browse the commands
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
Browse the commands
./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
Browse the commands
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
Browse the commands
./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 ๐โฆ