# Inicio rápido de React Native

> @tryyoursize/react-native: el botón nativo Guía de tallas y la talla recomendada, sobre los SDK de iOS y Android.

Source: https://docs.tryyoursize.com/es/quickstarts/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](https://docs.tryyoursize.com/es/quickstarts/ios.md) y [Android](https://docs.tryyoursize.com/es/quickstarts/android.md). 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.

> **Caution: 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

```sh
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

```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` 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.