Skip to content

willowtreeapps/react-native-template

Repository files navigation

Hello World React Native app

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.

Included Features

Note

This template is set up to use Continuous Native Generation.

Please note that it is not compatible with Expo Go.

How to create a project using this template

Click here to create a new GitHub Repository using this template

Once you have created a project

Warning

Make sure you are using Node >18 <23

  • delete either package-lock.json or yarn.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 or npm run android to start the app
  • run npm start:storybook to start the storybook UI

License

Please note that this template is open-source and MIT licensed. If your project is not open-source, you should:

  1. delete the LICENSE file
  2. remove the "license" field from package.json
  3. add "private": true to package.json

Package Managers

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

Ruby

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.

CocoaPods

This project uses Bundler to manage Ruby Gems such as CocoaPods. You should not need to install CocoaPods separately (e.g. via Homebrew).

(Optional) Steps for further customization

  • Adding additional ESLint rules

    • import/no-default-export

      • 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

Next steps

Adding Navigation

You have several options for adding navigation to your app:

Add Apple Team ID

ios: {
  bundleIdentifier: "com.jpmigueldriver.myapp",
  appleTeamId: "7UMFPW78PV", // <-- add your Team ID
}

Configure EAS

  • EAS is a suite of tools for building, deploying, and maintaining your app
  • see EAS documentation

Notes

  • react-native-web support has been removed

About

Recommended template to use when starting a new React Native app.

Resources

License

Stars

Watchers

Forks

Releases

No releases published