🏎️Getting Started

Init new app using WRNS on your machine

Prerequisites: Make sure to set up React Native by following their official docs.

WRNS require Node v18.17.1. You can install Node v18.17.1 using popular tool like nvm.

Setting up a project

1. Clone WRNS repo first

git clone https://github.com/7dp/wrns.git

Then rename the cloned folder according to your need and do a cd into it too. For the rest of docs we use "PizzaApp" as a project name example.

2. Remove unwanted folders, init a brand new Git repo, and create initial commit

On the root folder run:

git clean -xfd; rm -rf .git; git init; git add .; git commit -m "Initial commit"

3. Rename the Android and iOS project, and related files

Rename the project and the bundle-id (iOS) and package-name (Android) by running:

npx react-native-rename@latest "PizzaApp" -b "com.mcdanold.pizza"

🍏 Note: If your iOS bundle-id didn't change after renaming, you still be able to rename it manually using XCode.

🤖 Limitation: You will notice that the Android package-name inside both of MainActivity.kt and MainApplication.kt fails to be renamed, as it remain com.starter . It is because react-native-rename package not yet adapted to the Kotlin files brought by React Native v0.73. So, for now the only way is to rename the package-name in both of that files manually.

🤖 Note: WRNS provide environment-variables (later we call it env-vars) support using react-native-config package. In order to work properly on Android, you need to manually replace the default WRNS package-name (com.starter) with your package-name in proguard-rules.pro file.

Actually, there are many things to be renamed manually to fit your project needs. Though this is a cumbersome process but yes this is worth it. So you need to do these additional renaming things:

Where	Replace this	With
🤖 android/app/src/qa/res/value/strings.xml	Starter	PizzaApp
🍏 ios/Podfile	StarterQA	PizzaAppQA
🍏 ios/PizzaApp/AppDelegate.mm	@"Starter"	@"PizzaApp"
🤖 android/app/src/main/java/com/mcdanold/pizza/MainActivity.kt	getMainComponentName(): String = "Starter"	getMainComponentName(): String = "PizzaApp"

🍏 Rename the StarterQA target:

Open up the PizzaApp.xcworkspace in XCode. Click on the PizzaApp in the navigation panel on the left. There are 3 Targets (PizzaApp, StarterQA, and PizzaAppTests). Rename the StarterQA to PizzaAppQA.

🍏 Rename the StarterQA scheme:

Go to Product > Scheme > Manage Schemes... . Rename StarterQA to PizzaAppQA. Uncheck both Shared checkboxes of PizzaApp and PizzaAppQA and check it again (this step is necessary, it will tell XCode to recreate the fresh .xcscheme files). Then click Close.

🍏 Change bundle-id of PizzaAppQA target:

Select PizzaAppQA on the Targets list, then select Build Settings tab. Scroll down until you found Packaging section. Change the Product Bundle Identifier to your bundle-id and with a .qa suffix. E.g., com.mcdanold.pizza.qa. After that select tab Signing & Capabilities, in Signing section change the Bundle Identifier value just like the previous.

🍏 Configure app display name:

In Info.plist look for Bundle display name and then change the value from PizzaApp to $(DISPLAY_NAME). We set the display name from the projects Build Settings tab. So open up the project and select the PizzaApp from the Targets list. Go to Build Settings tab and scroll down until you found User-Defined section (usually at the most bottom). And then you can check the value of DISPLAY_NAME and rename it as you like, though we think the default one (PizzaApp) is fine. To set the QA display name the process is the same, but we recommend to add (QA) as a prefix to the display name, so it will be easier for SQA (and you) to distinguish between Production env and QA env. So, there's no more changing the app display name in the General tab -> Identity section. With that rules in mind, we very recommend you to set the Display Name value to empty in the General tab -> Identity section of both PizzaApp and PizzaAppQA targets.

4. Recheck

Don't forget to recheck both of your Android and iOS project. After your Android package-name renamed successfully, now you can safely delete the com folder inside android/app/src/main/java as it is no longer used.

5. Install the built-in libraries

yarn

Before running on iOS you should install the pod first:

npx pod-install

6. Configuring the Google-Service files

This step is required if you renamed the app bundle-id (iOS) or the package-name (Android)

See the configuration guides here.

Running

Start the Metro server:

yarn start

🍏 Running on iOS

Using CLI

Before running using CLI, please make sure the ios:qa and ios:prod scripts in package.json is correct, especially the scheme argument, e.g., ...--scheme 'PizzaApp'.

yarn ios:qa // run QA env

yarn ios:prod // run Production env

Using XCode

You can run the app using XCode as usual. There's a limitation if you use XCode for running your app; whenever you switch between a scheme you need to clean the build first before running. For example, if you run the Production env a.k.a the PizzaApp scheme you can run it normally, but then if you want to run the QA env a.k.a the PizzaAppQA scheme you need to clean the build so the QA app version will use the QA env, and not the previous cached build of Production env, and vice versa. This limitation doesn't exist when running the app through CLI. So we recommend to run your iOS app using the CLI for day-to-day work instead of using XCode.

🤖 Running on Android

yarn android:qa // run QA env

yarn android:prod // run Production env