This is Telus Digital's recommended template to use when starting a new React Native app.
Tip
Before cloning this repo, you should run through the React Native Environment Setup docs for both iOS and Android.
Make sure you already have tooling such as Xcode and Android Studio installed.
- originally based on Expo's Blank (Typescript) template
- includes ESLint + Prettier
- includes VSCode / Cursor extensions
- includes Jest + React Native Testing Library for unit testing
- includes Maestro for E2E testing
- includes Storybook for component development
- includes GitHub Action for PR Checks
Note
This template is set up to use Continuous Native Generation.
Please note that it is not compatible with Expo Go.
Click here to create a new GitHub Repository using this template
Warning
Make sure you are using Node >18 <23
- delete either
package-lock.json
oryarn.lock
(see Package Managers below) - find & replace
my-app
with your app name - find & replace
com.jpmigueldriver.myapp
with your app id - run
./scripts/init.sh
to install the dependencies - run
npm run ios
ornpm run android
to start the app - run
npm start:storybook
to start the storybook UI
Please note that this template is open-source and MIT licensed. If your project is not open-source, you should:
- delete the
LICENSE
file - remove the
"license"
field frompackage.json
- add
"private": true
topackage.json
Important
To ensure tested + compatible versions of dependencies are installed, this template includes lock files for both NPM and Yarn.
As one of the first things you do, you should pick which package manager you want to use.
# if you want to use NPM
rm -rf yarn.lock
./scripts/init.sh
# if you want to use Yarn
rm -rf package-lock.json
./scripts/init.sh
This project is intended for use with the version of Ruby that ships with macOS. You should not need to install Ruby separately (e.g. via Homebrew).
However if you would like to use a different version of Ruby, we recommend using rvm to manage your Ruby versions.
You may need to update the .ruby-version
and Gemfile.lock
files to match the version of Ruby you are using.
This project uses Bundler to manage Ruby Gems such as CocoaPods. You should not need to install CocoaPods separately (e.g. via Homebrew).
-
Adding additional ESLint rules
-
-
can be desirable to simplify refactoring
npm install eslint-plugin-import --save-dev
// in eslintrc.js rules: { // ...other rules... "import/no-default-export": "error", // <-- add the rule }
-
-
unused-imports/no-unused-imports
-
can automatically remove unused imports
npm install eslint-plugin-unused-imports --save-dev
// in eslintrc.js rules: { // ...other rules... "unused-imports/no-unused-imports": "warn", // <-- add the rule }
-
-
-
Customizing Jest
-
to collect Code Coverage add the following to your
jest.config.js
"collectCoverage": true, "collectCoverageFrom": [ "**/*.{ts,tsx,js,jsx}", "!**/coverage/**", "!**/node_modules/**", "!**/babel.config.js", "!**/expo-env.d.ts", "!**/.expo/**" ]
-
-
Add more GitHub workflows
- if you are using EAS Update you can use the following GitHub Action to show a QR code to scan for iOS and Android
-
Add Husky for pre-commit hooks
You have several options for adding navigation to your app:
- You should add the following to your
app.config.js
- see Apple Team ID docs
- see here for a list of WillowTree's internal Apple Teams you may wish to use
ios: {
bundleIdentifier: "com.jpmigueldriver.myapp",
appleTeamId: "7UMFPW78PV", // <-- add your Team ID
}
- EAS is a suite of tools for building, deploying, and maintaining your app
- see EAS documentation
react-native-web
support has been removed- see this link for more