---
title: "Procesar datos de onboardings en el SDK de React Native"
description: "Guarda y usa datos de onboardings en tu app de React Native con el SDK de Adapty."
---
Cuando tus usuarios responden a una pregunta de un quiz o introducen datos en un campo de texto, se invocará el método `onStateUpdatedAction`. Puedes guardar o procesar el tipo de campo en tu código.
Por ejemplo:
```javascript
// Presentación a pantalla completa
const unsubscribe = view.registerEventHandlers({
onStateUpdated(action, meta) {
// Procesar datos
},
});
// Widget embebido
```
Consulta el formato de la acción [aquí](https://react-native.adapty.io/types/onboardingstateupdatedaction).
Ejemplos de datos guardados (el formato puede variar según tu implementación)
```javascript
// Ejemplo de una acción de selección guardada
{
"elementId": "preference_selector",
"meta": {
"onboardingId": "onboarding_123",
"screenClientId": "preferences_screen",
"screenIndex": 1,
"screensTotal": 3
},
"params": {
"type": "select",
"value": {
"id": "option_1",
"value": "premium",
"label": "Premium Plan"
}
}
}
// Ejemplo de una acción de selección múltiple guardada
{
"elementId": "interests_selector",
"meta": {
"onboardingId": "onboarding_123",
"screenClientId": "interests_screen",
"screenIndex": 2,
"screensTotal": 3
},
"params": {
"type": "multiSelect",
"value": [
{
"id": "interest_1",
"value": "sports",
"label": "Sports"
},
{
"id": "interest_2",
"value": "music",
"label": "Music"
}
]
}
}
// Ejemplo de una acción de entrada guardada
{
"elementId": "name_input",
"meta": {
"onboardingId": "onboarding_123",
"screenClientId": "profile_screen",
"screenIndex": 0,
"screensTotal": 3
},
"params": {
"type": "input",
"value": {
"type": "text",
"value": "John Doe"
}
}
}
// Ejemplo de una acción de selector de fecha guardada
{
"elementId": "birthday_picker",
"meta": {
"onboardingId": "onboarding_123",
"screenClientId": "profile_screen",
"screenIndex": 0,
"screensTotal": 3
},
"params": {
"type": "datePicker",
"value": {
"day": 15,
"month": 6,
"year": 1990
}
}
}
```
## Casos de uso \{#use-cases\}
### Enriquecer perfiles de usuario con datos \{#enrich-user-profiles-with-data\}
Si quieres vincular inmediatamente los datos introducidos con el perfil del usuario y evitar pedirle la misma información dos veces, debes [actualizar el perfil de usuario](react-native-setting-user-attributes) con esos datos al gestionar la acción.
Por ejemplo, si pides a los usuarios que introduzcan su nombre en el campo de texto con el ID `name` y quieres usar ese valor como su nombre de pila, y también les pides su correo electrónico en el campo `email`, en el código de tu app quedaría así:
```javascript showLineNumbers
// Presentación a pantalla completa
const unsubscribe = view.registerEventHandlers({
onStateUpdated(action, meta) {
// Guardar preferencias o respuestas del usuario
if (action.elementType === 'input') {
const profileParams = {};
// Mapear elementId al campo de perfil correspondiente
switch (action.elementId) {
case 'name':
if (action.value.type === 'text') {
profileParams.firstName = action.value.value;
}
break;
case 'email':
if (action.value.type === 'email') {
profileParams.email = action.value.value;
}
break;
}
// Actualizar el perfil si hay datos que actualizar
if (Object.keys(profileParams).length > 0) {
adapty.updateProfile(profileParams).catch(error => {
// gestionar el error
});
}
}
},
});
// Widget embebido
0) {
adapty.updateProfile(profileParams).catch(error => {
// gestionar el error
});
}
}
},
}}
/>
```
### Personalizar paywalls según las respuestas \{#customize-paywalls-based-on-answers\}
Usando quizzes en los onboardings, también puedes personalizar los paywalls que muestras a los usuarios cuando completan el onboarding.
Por ejemplo, puedes preguntarles sobre su experiencia con el deporte y mostrar distintos CTAs y productos a diferentes grupos de usuarios.
1. [Añade un quiz](onboarding-quizzes) en el constructor de onboarding y asigna IDs con significado a sus opciones.
2. Gestiona las respuestas del quiz según sus IDs y [establece atributos personalizados](react-native-setting-user-attributes) para los usuarios.
```javascript showLineNumbers
// Presentación a pantalla completa
const unsubscribe = view.registerEventHandlers({
onStateUpdated(action, meta) {
// Gestionar respuestas del quiz y establecer atributos personalizados
if (action.elementType === 'select') {
const profileParams = {};
// Mapear respuestas del quiz a atributos personalizados
switch (action.elementId) {
case 'experience':
// Establecer el atributo personalizado 'experience' con el valor seleccionado (beginner, amateur, pro)
profileParams.codableCustomAttributes = {
experience: action.value.value
};
break;
}
// Actualizar el perfil si hay datos que actualizar
if (Object.keys(profileParams).length > 0) {
adapty.updateProfile(profileParams).catch(error => {
// gestionar el error
});
}
}
},
});
// Widget embebido
0) {
adapty.updateProfile(profileParams).catch(error => {
// gestionar el error
});
}
}
},
}}
/>
```
3. [Crea segmentos](segments) para cada valor de atributo personalizado.
4. Crea un [placement](placements) y añade [audiencias](audience) para cada segmento que hayas creado.
5. [Muestra un paywall](react-native-paywalls) para el placement en el código de tu app. Si tu onboarding tiene un botón que abre un paywall, implementa el código del paywall como [respuesta a la acción de ese botón](react-native-handling-onboarding-events#opening-a-paywall).