# React Native quickstart

> @tryyoursize/react-native: the native Size guide button and the recommended size, over the iOS and Android SDKs.

Source: https://docs.tryyoursize.com/quickstarts/react-native/

> **For your developer**
>
> **What it does:** Adds the native TryYourSize 'Size guide' button and the shopper's recommended size to our React Native app. The app receives sizes only.
>
> **Time needed:** About a day.
>
> **What to send them:** The test publishable key (pk_test_…) and our iOS bundle ID and Android package to register.

A thin wrapper over the native [iOS](https://docs.tryyoursize.com/quickstarts/ios.md) and [Android](https://docs.tryyoursize.com/quickstarts/android.md) SDKs. It needs a development build (bare React Native or Expo prebuild); Expo Go is not supported. React Native 0.73+, iOS 16+, Android minSdk 24.

> **Caution: Preview**
>
> The JavaScript layer and the Android module are tested; the iOS module is in preview. App origins work in test mode only for now. The npm package is published for pilot customers on request.

## Install

```sh
npm install @tryyoursize/react-native
```

The package depends on the native SDKs: add the `TryYourSize` pod to your `Podfile` (then `pod install`) and the `com.tryyoursize:tryyoursize-android` library to your Android build. `MainActivity` (a `ReactActivity`) already is a `ComponentActivity`.

**Register your app** in Studio for test mode: `ios-app://<bundle id>` and `android-app://<package>`.

## Use

```tsx

await TryYourSize.configure("pk_test_…", { appearance: { variables: { colorPrimary: "#111111", borderRadius: 10 } } });

<View style={{ flexDirection: "row", alignItems: "center" }}>
  <Text>Size</Text>
  <SizeGuide product="SKU-123" onRecommendation={(r) => r.status === "ready" && !touched && setSize(r.size)} />
</View>;

const rec = await TryYourSize.getRecommendation("SKU-123");             // { product, status, size, studioSize, wearableSizes }
const sub = TryYourSize.addRecommendationListener("SKU-123", (r) => {}); // sub.remove()
TryYourSize.addEventListener((e) => e.type === "size" && setSize(e.selection.size));
TryYourSize.present("SKU-123");
```

`status` takes the web SDK's values: `ready`, `computing`, `none`, `signed_out`, `unavailable`. Appearance colours are `#rrggbb` or `#rrggbbaa`. The default `inherit` theme takes your app's native text and background colours.