Inicio rápido de React Native

Para tu equipo de desarrollo

Qué hace: Añade el botón nativo «Guía de tallas» de TryYourSize y la talla recomendada del cliente a nuestra app de React Native. La app solo recibe tallas.

Tiempo necesario: Alrededor de un día.

Qué enviarle: La clave publicable de prueba (pk_test_…) y el bundle ID de iOS y el paquete de Android de nuestra app, que hay que registrar.

Una capa fina sobre los SDK nativos de iOS y Android. Requiere un development build (React Native sin framework o Expo prebuild); Expo Go no es compatible. React Native 0.73+, iOS 16+, Android minSdk 24.

Vista previa

La capa de JavaScript y el módulo de Android están probados; el módulo de iOS está en vista previa. De momento, los orígenes de app solo funcionan en modo de prueba. El paquete npm se publica para clientes del piloto que lo soliciten.

Instalación

npm install @tryyoursize/react-native

El paquete depende de los SDK nativos: añade el pod TryYourSize a tu Podfile (y después ejecuta pod install) y la biblioteca com.tryyoursize:tryyoursize-android a tu build de Android. MainActivity (una ReactActivity) ya es una ComponentActivity.

Registra tu app en Studio para el modo de prueba: ios-app://<bundle id> y android-app://<package>.

Uso

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 toma los valores del SDK web: ready, computing, none, signed_out, unavailable. Los colores de apariencia son #rrggbb o #rrggbbaa. El tema por defecto, inherit, toma los colores nativos de texto y de fondo de tu app.