# TryYourSize React Native SDK reference

---

# React Native reference (@tryyoursize/react-native)

> The native Size guide button and the shopper's recommended size in React Native, over the iOS and Android SDKs.

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

*SDK* · `@tryyoursize/react-native` · v0.1.0

A thin wrapper over the native [iOS](https://docs.tryyoursize.com/reference/ios.md) and [Android](https://docs.tryyoursize.com/reference/android.md) SDKs: the button is the native one, the window is our window in a native sheet, and only sizes reach your JavaScript. React Native 0.73+; Expo Go is not supported (use a development build). Register `ios-app://<bundle id>` and `android-app://<package>` for your key in Studio.

## Install

**npm**

```bash
npm install @tryyoursize/react-native
cd ios && pod install
```

## Initialize

**React Native**

```tsx

await configure("pk_test_…"); // once, at startup
```

## Functions

| | |
|---|---|
| [`configure()`](https://docs.tryyoursize.com/reference/react-native/configure.md) | Call once at startup with your publishable key. |
| [`getRecommendation()`](https://docs.tryyoursize.com/reference/react-native/get-recommendation.md) | The shopper's recommended size for a product, in your size labels. |
| [`addRecommendationListener()`](https://docs.tryyoursize.com/reference/react-native/add-recommendation-listener.md) | Calls listener now (once known) and on every change. |
| [`addEventListener()`](https://docs.tryyoursize.com/reference/react-native/add-event-listener.md) | Window events: ready, open, close, size (preselect it), loaderror. |
| [`present()`](https://docs.tryyoursize.com/reference/react-native/present.md) | Opens the measuring / try-on window for a product. |
| [`setAppearance()`](https://docs.tryyoursize.com/reference/react-native/set-appearance.md) | Live restyle (e.g. |

## Components

| | |
|---|---|
| [`SizeGuide`](https://docs.tryyoursize.com/reference/react-native/size-guide.md) | The native "Size guide" button: "Size guide" → "Calculating your size…" → "Your size: M". |

## Types

| | |
|---|---|
| [`Recommendation`](https://docs.tryyoursize.com/reference/react-native/recommendation.md) | Recommendation |
| [`Appearance`](https://docs.tryyoursize.com/reference/react-native/appearance.md) | Appearance |
| [`TysEvent`](https://docs.tryyoursize.com/reference/react-native/tys-event.md) | A window event, by type. |

---

# addEventListener()

> Window events: ready, open, close, size (preselect it), loaderror.

Source: https://docs.tryyoursize.com/reference/react-native/add-event-listener/

*Function* · `@tryyoursize/react-native`

Window events: ready, open, close, size (preselect it), loaderror.

```ts
function addEventListener(listener: (e: TysEvent) => void): { remove(): void }
```

## Parameters

- **`listener`** (`(e: TysEvent) => void`, required): Called with each window event: `ready`, `open`, `close`, `size` (preselect it), `loaderror`.

## Returns

`{ remove(): void }`: `{ remove() }`.

## Example

**React Native**

```tsx
const sub = addEventListener((e) => {
  if (e.type === "size") setSize(e.selection.size);
  if (e.type === "loaderror") console.warn(e.code);
});
```

**Swift**

```swift
let sub = tys.on { event in
    switch event {
    case .size(let selection): selectedSize = selection.size   // "Use this size"
    case .loadError(let error): print(error.code)
    default: break
    }
}
```

**Kotlin**

```kotlin
val sub = tys.on { event ->
    when (event) {
        is TryYourSize.Event.Size -> selected = event.selection.size
        is TryYourSize.Event.LoadError -> Log.w("tys", event.error.code.wire)
        else -> Unit
    }
}
```

**Flutter**

```dart
tys.events.listen((e) {
  if (e is SizeSelected) setState(() => size = e.selection.size);
  if (e is LoadError) debugPrint(e.error.code);
});
```

---

# addRecommendationListener()

> Calls listener now (once known) and on every change.

Source: https://docs.tryyoursize.com/reference/react-native/add-recommendation-listener/

*Function* · `@tryyoursize/react-native`

Calls `listener` now (once known) and on every change. Returns `{ remove }`.

```ts
function addRecommendationListener(product: string, listener: (r: Recommendation) => void): { remove(): void }
```

## Parameters

- **`product`** (`string`, required): Your product ID or SKU.
- **`listener`** (`(r: Recommendation) => void`, required): Called now (once known) and on every change.

## Returns

`{ remove(): void }`: `{ remove() }`.

## Example

**React Native**

```tsx
useEffect(() => {
  const sub = addRecommendationListener("SKU-123", (rec) => {
    if (rec.status === "ready" && !touched) setSize(rec.size);
  });
  return () => sub.remove();
}, []);
```

**Swift**

```swift
let sub = tys.onRecommendation(for: "SKU-123") { rec in
    if rec.status == .ready, !touched { selectedSize = rec.size }
}
// keep `sub`; sub.cancel() when the screen goes away
```

**Kotlin**

```kotlin
val sub = tys.onRecommendation("SKU-123") { rec ->
    if (rec.status == Recommendation.Status.READY && !touched) selected = rec.size
}
// sub.cancel() in onDestroy
```

**Flutter**

```dart
final sub = tys.onRecommendation('SKU-123').listen((rec) {
  if (rec.status == RecommendationStatus.ready && !touched) setState(() => size = rec.size);
});
// sub.cancel() in dispose()
```

---

# Appearance

> Appearance

Source: https://docs.tryyoursize.com/reference/react-native/appearance/

*Type* · `@tryyoursize/react-native`

```ts
interface Appearance
```

## Properties

- **`theme`** (`"inherit" | "tryyoursize"`, optional): "inherit" (default): your app's own colours and font. "tryyoursize": the light beige brand.
- **`variables`** (`{ /** Hex: "#rrggbb" or "#rrggbbaa". */ colorPrimary?: string; colorBackground?: string; colorText?: string; /** A CSS font-family for the window. */ fontFamily?: string; /** Corner radius, 0–32. */ borderRadius?: number; }`, optional)
- **`fonts`** (`{ cssSrc: string }[]`, optional): Google Fonts stylesheets for the window.

## Example

**React Native**

```tsx
await configure("pk_test_…", { appearance: { variables: { borderRadius: 10 } }, locale: "es" });
```

**Swift**

```swift
let tys = try TryYourSize(publishableKey: "pk_test_…", configuration: .init(
    appearance: Appearance(borderRadius: 10),
    locale: "es"))
```

**Kotlin**

```kotlin
val tys = TryYourSize(context, "pk_test_…", TryYourSize.Configuration(
    appearance = Appearance(borderRadius = 10f),
    locale = "es",
))
```

**Flutter**

```dart
final tys = await TryYourSize.create('pk_test_…', appearance: const Appearance(borderRadius: 10), locale: 'es');
```

---

# configure()

> Call once at startup with your publishable key.

Source: https://docs.tryyoursize.com/reference/react-native/configure/

*Function* · `@tryyoursize/react-native`

Call once at startup with your publishable key. Register your app for the key in Studio: `ios-app://<bundle id>` and `android-app://<package>` (test mode today).

```ts
function configure(publishableKey: string, options: ConfigureOptions = {}): Promise<void>
```

## Parameters

- **`publishableKey`** (`string`, required): Your publishable key (`pk_test_…` / `pk_live_…`).
- **`options`** (`ConfigureOptions`, optional, default `{}`)
  - **`appearance`** (`Appearance`, optional)
  - **`locale`** (`string`, optional): BCP 47; default: the device language.
  - **`embedOrigin`** (`string`, optional): Our window's origin, for staging or local development only.

## Errors

An `Error` for a secret key or a malformed key, before anything reaches the native side.

## Example

**React Native**

```tsx
await configure("pk_test_…", { appearance: { variables: { borderRadius: 10 } }, locale: "es" });
```

**Swift**

```swift
let tys = try TryYourSize(publishableKey: "pk_test_…", configuration: .init(
    appearance: Appearance(borderRadius: 10),
    locale: "es"))
```

**Kotlin**

```kotlin
val tys = TryYourSize(context, "pk_test_…", TryYourSize.Configuration(
    appearance = Appearance(borderRadius = 10f),
    locale = "es",
))
```

**Flutter**

```dart
final tys = await TryYourSize.create('pk_test_…', appearance: const Appearance(borderRadius: 10), locale: 'es');
```

---

# getRecommendation()

> The shopper's recommended size for a product, in your size labels.

Source: https://docs.tryyoursize.com/reference/react-native/get-recommendation/

*Function* · `@tryyoursize/react-native`

The shopper's recommended size for a product, in your size labels. Never starts a simulation.

```ts
async function getRecommendation(product: string): Promise<Recommendation>
```

## Parameters

- **`product`** (`string`, required): Your product ID or SKU.

## Returns

`Promise<Recommendation>`: The shopper's recommended size.

- **`product`** (`string`, required)
- **`status`** (`RecommendationStatus`, required): `none`: simulated, no size can be worn. Same values as the web SDK.
- **`size`** (`string | null`, required): The recommended size in your size labels, or null.
- **`studioSize`** (`string | null`, required): The same size as entered in TryYourSize Studio, or null.
- **`wearableSizes`** (`string[]`, optional): Sizes that can be worn on this body, in your labels (when simulated).

## Example

**React Native**

```tsx
const rec = await getRecommendation("SKU-123");
if (rec.status === "ready") setSize(rec.size);
```

**Swift**

```swift
let rec = try await tys.recommendation(for: "SKU-123")
if rec.status == .ready, let size = rec.size { selectedSize = size }
```

**Kotlin**

```kotlin
lifecycleScope.launch {
    val rec = tys.recommendation("SKU-123")
    if (rec.status == Recommendation.Status.READY) selected = rec.size
}
```

**Flutter**

```dart
final rec = await tys.recommendation('SKU-123');
if (rec.status == RecommendationStatus.ready) setState(() => size = rec.size);
```

---

# present()

> Opens the measuring / try-on window for a product.

Source: https://docs.tryyoursize.com/reference/react-native/present/

*Function* · `@tryyoursize/react-native`

Opens the measuring / try-on window for a product.

```ts
function present(product: string, step?: OpenStep): void
```

## Parameters

- **`product`** (`string`, required): Your product ID or SKU.
- **`step`** (`OpenStep`, optional): `"create"`, `"improve"` or `"view"`.

## Example

**React Native**

```tsx
present("SKU-123");                             // or present("SKU-123", "view")
```

**Swift**

```swift
tys.present(product: "SKU-123")                 // or step: .view, from: viewController
```

**Kotlin**

```kotlin
tys.present(activity, "SKU-123")                // or step = OpenStep.VIEW
```

**Flutter**

```dart
await tys.present('SKU-123');                   // or step: OpenStep.view
```

---

# Recommendation

> Recommendation

Source: https://docs.tryyoursize.com/reference/react-native/recommendation/

*Type* · `@tryyoursize/react-native`

```ts
interface Recommendation
```

## Properties

- **`product`** (`string`, required)
- **`status`** (`RecommendationStatus`, required): `none`: simulated, no size can be worn. Same values as the web SDK.
- **`size`** (`string | null`, required): The recommended size in your size labels, or null.
- **`studioSize`** (`string | null`, required): The same size as entered in TryYourSize Studio, or null.
- **`wearableSizes`** (`string[]`, optional): Sizes that can be worn on this body, in your labels (when simulated).

## Example

**React Native**

```tsx
const rec = await getRecommendation("SKU-123");
if (rec.status === "ready") setSize(rec.size);
```

**Swift**

```swift
let rec = try await tys.recommendation(for: "SKU-123")
if rec.status == .ready, let size = rec.size { selectedSize = size }
```

**Kotlin**

```kotlin
lifecycleScope.launch {
    val rec = tys.recommendation("SKU-123")
    if (rec.status == Recommendation.Status.READY) selected = rec.size
}
```

**Flutter**

```dart
final rec = await tys.recommendation('SKU-123');
if (rec.status == RecommendationStatus.ready) setState(() => size = rec.size);
```

---

# setAppearance()

> Live restyle (e.g.

Source: https://docs.tryyoursize.com/reference/react-native/set-appearance/

*Function* · `@tryyoursize/react-native`

Live restyle (e.g. your dark mode); an open window updates at once.

```ts
function setAppearance(appearance: Appearance): void
```

## Parameters

- **`appearance`** (`Appearance`, required)
  - **`theme`** (`"inherit" | "tryyoursize"`, optional): "inherit" (default): your app's own colours and font. "tryyoursize": the light beige brand.
  - **`variables`** (`{ /** Hex: "#rrggbb" or "#rrggbbaa". */ colorPrimary?: string; colorBackground?: string; colorText?: string; /** A CSS font-family for the window. */ fontFamily?: string; /** Corner radius, 0–32. */ borderRadius?: number; }`, optional)
  - **`fonts`** (`{ cssSrc: string }[]`, optional): Google Fonts stylesheets for the window.

## Example

**React Native**

```tsx
setAppearance({ variables: { colorPrimary: "#3b2f26" } });
```

**Swift**

```swift
tys.appearance.colorPrimary = TYSColor(hex: "#3b2f26") // an open window restyles at once
```

**Kotlin**

```kotlin
tys.appearance = tys.appearance.copy(colorPrimary = 0xFF3B2F26.toInt())
```

**Flutter**

```dart
await tys.setAppearance(const Appearance(colorPrimary: Color(0xFF3B2F26)));
```

---

# <SizeGuide>

> The native "Size guide" button: "Size guide" → "Calculating your size…" → "Your size: M".

Source: https://docs.tryyoursize.com/reference/react-native/size-guide/

*Component* · `@tryyoursize/react-native`

The native "Size guide" button: "Size guide" → "Calculating your size…" → "Your size: M".

```ts
function SizeGuide({ product, variant = "link", label, style, onRecommendation }: SizeGuideProps)
```

## Props

- **`product`** (`string`, required)
- **`variant`** (`"link" | "button"`, optional): "link" (default): link-sized text with the mark. "button": a small bordered button.
- **`label`** (`string`, optional): Your own words instead of "Size guide".
- **`style`** (`StyleProp<ViewStyle>`, optional)
- **`onRecommendation`** (`(r: Recommendation) => void`, optional): The shopper's recommended size, on show and on every change (sizes only).

## Example

**React Native**

```tsx
<SizeGuide
  product="SKU-123"
  onRecommendation={(rec) => rec.status === "ready" && !touched && setSize(rec.size)}
/>
```

**Swift**

```swift
// SwiftUI, where your "Size guide" link was
SizeGuide(client: tys, product: "SKU-123") { rec in
    if rec.status == .ready, !touched { selectedSize = rec.size }
}
```

**Kotlin**

```kotlin
// Compose, where your "Size guide" link was
SizeGuide(tys, "SKU-123", textStyle = MaterialTheme.typography.bodyMedium) { rec ->
    if (rec.status == Recommendation.Status.READY && !touched) selected = rec.size
}
```

**Flutter**

```dart
const SizeGuide(product: 'SKU-123') // listen to tys.onRecommendation to preselect
```

---

# TysEvent

> A window event, by type.

Source: https://docs.tryyoursize.com/reference/react-native/tys-event/

*Type* · `@tryyoursize/react-native`

A window event, by `type`.

```ts
type TysEvent =
  | { type: "ready"; product: string }
  | { type: "open"; product: string }
  | { type: "close"; product: string }
  | { type: "size"; selection: SizeSelection }
  | { type: "loaderror"; code: string; message: string };
```

## Example

**React Native**

```tsx
const sub = addEventListener((e) => {
  if (e.type === "size") setSize(e.selection.size);
  if (e.type === "loaderror") console.warn(e.code);
});
```

**Swift**

```swift
let sub = tys.on { event in
    switch event {
    case .size(let selection): selectedSize = selection.size   // "Use this size"
    case .loadError(let error): print(error.code)
    default: break
    }
}
```

**Kotlin**

```kotlin
val sub = tys.on { event ->
    when (event) {
        is TryYourSize.Event.Size -> selected = event.selection.size
        is TryYourSize.Event.LoadError -> Log.w("tys", event.error.code.wire)
        else -> Unit
    }
}
```

**Flutter**

```dart
tys.events.listen((e) {
  if (e is SizeSelected) setState(() => size = e.selection.size);
  if (e is LoadError) debugPrint(e.error.code);
});
```