# 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:

<table><thead><tr><th width="286">Where</th><th width="230">Replace this</th><th>With</th></tr></thead><tbody><tr><td><strong>🤖</strong> <br>android/app/src/qa/res/value/strings.xml</td><td><code>Starter</code></td><td><code>PizzaApp</code></td></tr><tr><td><strong>🍏</strong> <br>ios/Podfile</td><td><code>StarterQA</code></td><td><code>PizzaAppQA</code></td></tr><tr><td><strong>🍏</strong> <br>ios/PizzaApp/AppDelegate.mm</td><td><code>@"Starter"</code></td><td><code>@"PizzaApp"</code></td></tr><tr><td><strong>🤖</strong> <br>android/app/src/main/java/com/mcdanold/pizza/MainActivity.kt</td><td><code>getMainComponentName(): String = "Starter"</code></td><td><code>getMainComponentName(): String = "PizzaApp"</code></td></tr></tbody></table>

**🍏 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.&#x20;

#### 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&#x20;

{% 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
```
