---
updatedAt: 2025-09-25T12:39:05.000Z
agentTools:
  projectIndex: https://docs.deuna.com/llms.txt
---

# Primeros Pasos - React Native

Esta página provee una guía comprensiva para inizializar el SDK React Native DEUNA en tu aplicación.

> 📘 Versión Estable: 1.0.4

> 📘 El SDK de React Native de DEUNA es compatible con Expo.

## Requerimientos

Para utilizar el SDK de React Native de DEUNA, debes cumplir con los siguientes requerimientos:

* NodeJs 20 o superior
* Yarn o NPM como gestor de paquetes
* React18.2.0 o superior
* React Native 0.72.0 o superior
* React Native WebView 13.12.5 o superior
* Expo SDK 50 o superior (para aplicaciones con Expo)
* Una cuenta activa en DEUNA
* Credenciales válidas de DEUNA
* Configuraciones mínimas en tu proyecto Android: `minSdkVersion`  24 o superior

> 📘 El SDK de DEUNA también es compatible con dispositivos Huawei con HarmonyOS 2.0 o superior.

> 📘 Si tienes alguna demora en obtener tus credenciales, comunicate con [support@deuna.com](support@deuna.com).

## Instala el SDK

Comienza la inicializacion del SDK React Native.

> 🚧 Recuerda seguir prácticas de seguridad y privacidad al manejar información financiera de los usuarios.

### 1. Agrega el SDK

Utiliza el siguiente comando para agregar el SDK de DEUNA a tu proyecto React Native o Expo:

```shell YARN (Recomendado)
yarn add @deuna/react-native-sdk
```
```shell NPM
npm i @deuna/react-native-sdk
```

Si tu proyecto no contiene la dependencia `react-native-webview`, agregala a tu proyecto:

```shell YARN (Recomendado)
yarn add react-native-webview
```
```shell NPM
npm i react-native-webview
```

### 2. Inicializa el SDK

Inicializa el SDK  o crea una instancia de la clase `DeunaSDK`.

```typescript
import { DeunaSDK, Environment } from '@deuna/react-native-sdk';
const deunaSDK = DeunaSDK.initialize({
  publicApiKey: 'YOUR_PUBLIC_API_KEY',
  environment: 'sandbox', // sandbox or production
});
```

### 3. Elige el componente widget

Continúa con el proceso de integración siguiendo las instrucciones específicas para cada componente.

Elige el componente:

<HTMLBlock>{`
<style>
  .custom-container {
    display: flex; 
    justify-content: space-between; 
    column-gap: 3%;
  }
  .custom-item {
    height: 68px;
    width: 100%; 
    background-color: #f6f7fa;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
    padding: 10px;
    text-decoration: none !important;
  }
  .custom-icon {
    color: #FF5500;
    height: 25px;
    width: 25px;
    margin-bottom: 1px;
  }
  .break {
    flex-basis: 100%;
    height: 0;
  }
  .custom-icon-name {
    color: #FF5500; 
    font-weight: 600;
  }
</style>
<div class="custom-container">
  <a class="custom-item" href="/docs/payment-widget-react-native">
      <div class="break"></div>
      <p class="custom-icon-name">Payment Widget React</p>
  </a>
  <a class="custom-item" href="/docs/payment-vault-react-native">
      <div class="break"></div>
      <p class="custom-icon-name">Payment Vault React</p>
  </a>
</div>
`}</HTMLBlock>