> For the complete documentation index, see [llms.txt](https://wich.gitbook.io/wichreactnativestarter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wich.gitbook.io/wichreactnativestarter/getting-started.md). # Getting Started {% hint style="info" %} **Prerequisites:** Make sure to set up React Native by following their [official docs](https://reactnative.dev/docs/environment-setup?guide=native). {% endhint %} {% hint style="warning" %} WRNS require Node v18.17.1. You can install Node v18.17.1 using popular tool like [nvm](https://github.com/nvm-sh/nvm). {% endhint %} ## 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" ``` {% hint style="info" %} **🍏 Note:** If your iOS bundle-id didn't change after renaming, you still be able to rename it manually using XCode. {% endhint %} {% hint style="warning" %} **🤖 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. {% endhint %} {% hint style="info" %} **🤖 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. {% endhint %} 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:
WhereReplace thisWith
🤖
android/app/src/qa/res/value/strings.xml		StarterPizzaApp
🍏
ios/Podfile		StarterQAPizzaAppQA
🍏
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 {% hint style="warning" %} This step is required *if you renamed* the app bundle-id (iOS) or the package-name (Android) {% endhint %} See the configuration guides [here](/wichreactnativestarter/getting-started/configuring-google-service-files.md). ## 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 ```