React Native quickstart

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 and Android 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.

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

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

import TryYourSize, { SizeGuide } from "@tryyoursize/react-native";

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.