# React Native

Moropo fully supports React Native.

In this guide, we will look at how to build React Native apps ready to import into Moropo and how to add identifiers to your app to improve test accuracy.

## Building React Native for Moropo

We'll start by initialising the [example React Native app](https://reactnative.dev/docs/environment-setup#creating-a-new-application).

For each of the apps, we need to ensure that they are built in `release` mode. When a React Native app is built in `development` mode it is dependent on the local JS server on your machine.

Remember that you need to make a new build every time that you make changes locally. If you are using Expo then you can make use of OTA updates instead to reduce the number of native builds that you need to create.

If you are currently using GitHub actions to build your app then you can pass the build straight to our [GitHub Action](https://docs.moropo.com/ci-integration/github-action).

#### :robot: Android

Run `npx react-native build-android --interactive` and select `assemble`, this will create both the `debug` and `release` apks in the android folder.

<figure><img src="https://1849561984-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNrvYDqka9qiakmPqT4am%2Fuploads%2F9DFTQ54bE4eQG7IExg3Q%2FScreenshot%202023-10-04%20at%2015.26.06.png?alt=media&#x26;token=0e32fd24-fa80-4861-a4b1-f4a87be7abb2" alt=""><figcaption><p>npx react-native build-android --interactive</p></figcaption></figure>

Now take the output `app-release.apk` and upload it to your app in Moropo.

<div align="center"><figure><img src="https://1849561984-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNrvYDqka9qiakmPqT4am%2Fuploads%2FBnjFTGiCU7WkPPElsdPq%2FScreenshot%202023-10-04%20at%2015.57.12.png?alt=media&#x26;token=1fae2906-7a22-4c71-b768-0a934376ef98" alt=""><figcaption><p>APK location</p></figcaption></figure> <figure><img src="https://1849561984-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNrvYDqka9qiakmPqT4am%2Fuploads%2FAungceJsPkGsnGdy9uY3%2Fandroid_apk.gif?alt=media&#x26;token=c66a6843-af64-4117-9d46-704830b7b04f" alt=""><figcaption><p>Successful upload</p></figcaption></figure></div>

#### :green\_apple: iOS

`cd ios` to change your working directory to the ios folder and run `xcodebuild -workspace AwesomeProject.xcworkspace -configuration Release -scheme AwesomeProject -destination 'generic/platform=iOS Simulator'`.

The important parts of that command are the `configuration` set to release so that the app is not dependent on your local JS server and the `destination` set to Simulator so that a .app file is built ready for Moropo.

The file will be output to a special Xcode folder. For me that looked like this:\
`/Users/{{YOUR USERNAME}}/Library/Developer/Xcode/DerivedData/AwesomeProject-cxfaqbcfvcboddaxdadozkmshhpg/Build/Products/Release-iphonesimulator/`

You will see this location output in the terminal at the end of the build.&#x20;

Once you have located the file, compress it into a zip file and you're ready to upload to Moropo.

<figure><img src="https://1849561984-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNrvYDqka9qiakmPqT4am%2Fuploads%2F3Y7PkT84G8vQwy3Tlts2%2FScreenshot%202023-10-04%20at%2016.32.58.png?alt=media&#x26;token=54f82de5-ac26-4bd9-a265-3fdfd10fab3f" alt="" width="375"><figcaption><p>Compress the .app into a zip file</p></figcaption></figure>

## Adding Identifiers

I have created 2 builds based on the default React Native app. The first app has an exciting new image component based on my favourite image placeholder site [PlaceKitten](https://placekitten.com/).\
\&#xNAN;*Update: PlaceKitten is no longer available, but* [*alternatives exist*](https://www.websiteplanet.com/webtools/dummy-images-generator/)*.*

The first build has this full-width kitten addition and I would like to click on it in Moropo.

```typescript
<Image
  height={200}
  width={width}
  source={{uri: `https://placekitten.com/200/${Math.floor(width)}`}}
/>

```

Unfortunately, there is no unique identifier against this component so the only thing Moropo sees when you click on the image is the percentage-based coordinates.

<figure><img src="https://1849561984-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNrvYDqka9qiakmPqT4am%2Fuploads%2FmyiIDPSWUe8plOja2pFg%2Fno-cat-id.png?alt=media&#x26;token=3b621622-82c9-4472-816a-bac624732985" alt=""><figcaption><p>No cat id 😿</p></figcaption></figure>

The way we solve this problem is by providing a unique reference in the code which allows it to be uniquely identified by Moropo.

Different frameworks have different ways of providing this identifier, on React Native the way to do it is with a `testID`.

&#x20;I have given the image  a `testID` of 'kitten':

```typescript
<Image
  testID='kitten'
  height={200}
  width={width}
  source={{uri: `https://placekitten.com/200/${Math.floor(width)}`}}
/>
```

And now we have a unique ID!

<figure><img src="https://1849561984-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNrvYDqka9qiakmPqT4am%2Fuploads%2FQ0F5NDSp6blEElsqvpyN%2Fcat-id.png?alt=media&#x26;token=26657cce-b6c1-45e2-a08a-07f78df30774" alt=""><figcaption><p>Cat id 😻</p></figcaption></figure>