# 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](https://wich.gitbook.io/wichreactnativestarter/getting-started/configuring-google-service-files). ## 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 ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://wich.gitbook.io/wichreactnativestarter/getting-started.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.