React Native Template – MTechub App Template

Universal React Native template by MTechub (company: mtechub, template: app-template).

Step-by-step: Publish the template to npm

Do this from the main app repo (the one that contains template-package/ and scripts/).

1. Build the template

From the repo root (not inside template-package/):

node scripts/build-template.js

This fills template-package/template/ with the app code and placeholders (AppTemplate, com.mtechub.apptemplate).

2. Create an npm account (if you don’t have one)

• Go to https://www.npmjs.com/signup
• Sign up and verify your email

3. Log in to npm from the terminal

npm login

Enter your npm username, password, and email when asked.

4. Publish from the template package folder

cd template-package
npm publish --access public

• --access public is required for unscoped packages so others can install it.
• If the package name is taken, change name in template-package/package.json (e.g. to react-native-template-mtechub-app-[yourname] or use a scoped name like @mtechub/react-native-template-app).

5. Check that it’s on npm

Open:

https://www.npmjs.com/package/react-native-template-mtechub-app

(Replace with your actual package name if you changed it.)

If you get: 403 Forbidden - Two-factor authentication or granular access token...

npm requires two-factor authentication (2FA) or a granular access token to publish.

Option A – Enable 2FA (recommended)

1. Go to https://www.npmjs.com/ → your profile (avatar) → Account.
2. Under Security, turn on Two-factor authentication (auth-only or auth-and-writes).
3. Run npm publish --access public again from template-package/. When prompted, enter the one-time password from your authenticator app.

Option B – Use a granular access token

1. On npm: Profile → Access Tokens → Generate New Token.
2. Choose Granular Access Token; set scope to Packages → Read and write for this (or all) packages.
3. If your org requires 2FA, ensure the token type allows publishing (e.g. “Automation” or token with “bypass 2FA” if available in your plan).
4. Use the token when publishing:

   cd template-package
   npm publish --access public

   When npm asks for a password, paste the token (not your account password).

Step-by-step: Download and use the template (create a new app)

Anyone can create a new app from your template after it’s published.

1. Install React Native CLI (if needed)

You need Node.js and the React Native CLI. If you’ve never created a React Native app:

npx react-native --version

If that works, you’re fine. Otherwise follow React Native environment setup.

2. Create a new app from the template

Replace MyApp with your desired app/project name (no spaces):

npx react-native init MyApp --template react-native-template-mtechub-app

This will:

• Create a folder MyApp/
• Copy the template into it
• Replace AppTemplate with MyApp in names and configs
• Use default package ID: Android com.mtechub.apptemplate, iOS com.mtechub.apptemplate

3. (Optional) Use a custom package name

To set your own Android applicationId and iOS bundle ID:

npx react-native init MyApp --template react-native-template-mtechub-app --package-name com.yourcompany.myapp

Use a valid package id (e.g. com.companyname.appname).

4. Go into the project and install dependencies

cd MyApp
yarn
# or: npm install

5. iOS: install CocoaPods

cd ios && pod install && cd ..
# or from repo root: npx pod-install

6. Run the app

# Start Metro (in one terminal)
yarn start

# Run on device/simulator (in another terminal)
yarn ios
# or
yarn android

Quick reference

| Goal | Command | |------|--------| | Build template (before publish) | node scripts/build-template.js (from repo root) | | Publish to npm | cd template-package && npm publish --access public | | Create app (default package) | npx react-native init MyApp --template react-native-template-mtechub-app | | Create app (custom package) | npx react-native init MyApp --template react-native-template-mtechub-app --package-name com.yourcompany.myapp | | Test template locally (no publish) | npx react-native init MyApp --template file:///absolute/path/to/eventopiaapp/template-package |

Default package name

• Android: com.mtechub.apptemplate
• iOS: com.mtechub.apptemplate

Override with --package-name when running react-native init if you need a different bundle/application ID.