Um widget React Native modular para coleta de feedback e pesquisas de satisfação, desenvolvido pela SoluCX seguindo princípios de Clean Code e arquitetura escalável.
O SoluCX Widget permite integrar pesquisas de satisfação diretamente em aplicações React Native/Expo de forma simples e flexível. Desenvolvido para empresas que precisam coletar feedback em tempo real através de diferentes modalidades de apresentação.
4 Modos de Renderização : Bottom, Top, Modal e InlinePersistência Automática : Controle inteligente de frequênciaComunicação WebView : Integração transparente com plataforma SoluCXTypeScript : Totalmente tipado para melhor experiência de desenvolvimentoPerformático : Carregamento otimizado e cache local Expo Managed Workflow Bare React Native
npx expo install @solucx/react-native-solucx-widget
pnpm dlx expo install @solucx/react-native-solucx-widget
bun x expo install @solucx/react-native-solucx-widget
yarn dlx expo install @solucx/react-native-solucx-widget
npm i @solucx/react-native-solucx-widget react-native-webview @react-native-async-storage/async-storage react-native-reanimated react-native-worklets
pnpm i @solucx/react-native-solucx-widget react-native-webview @react-native-async-storage/async-storage react-native-reanimated react-native-worklets
bun add @solucx/react-native-solucx-widget react-native-webview @react-native-async-storage/async-storage react-native-reanimated react-native-worklets
yarn add @solucx/react-native-solucx-widget react-native-webview @react-native-async-storage/async-storage react-native-reanimated react-native-worklets
babel.config.js
module . exports = {
presets: [
...
],
plugins: [
...
'react-native-worklets/plugin' ,
],
};
Em projetos React Native sem Expo (Bare React Native), você deve instalar manualmente os módulos nativos após a instalação do pacote. Em projetos com Expo Managed Workflow , a instalação dos módulos nativos é feita automaticamente.
app.tsx
import { SoluCXWidget } from '@solucx/react-native-solucx-widget' ;
import { StyleSheet, Text, View } from 'react-native' ;
export default function App () {
return (
< View style = {styles.container} >
< Text >Open up App.js to start working on your app !</ Text >
< SoluCXWidget
soluCXKey = ""
type = "inline"
data = {{
journey : "" ,
name : "Cliente" ,
email : '[email protected] ' ,
store_id : '1' ,
employee_id : '1' ,
amount : 10 ,
param_REGIAO : 'SUDESTE'
}}
options = {{}}
/>
</ View >
);
}
package.json
{
"dependencies" : {
"@solucx/react-native-solucx-widget" : "^0.1.5"
}
}
Widget fixo na parte inferior da tela, ideal para feedback não intrusivo.
< SoluCXWidget type = "bottom" { ... props} />
Widget fixo no topo da tela, perfeito para notificações importantes.
< SoluCXWidget type = "top" { ... props} />
Sobreposição centralizada que bloqueia interação com o fundo.
< SoluCXWidget type = "modal" { ... props} />
Integrado ao fluxo normal do layout, respeitando a posição no código.
< SoluCXWidget type = "inline" { ... props} />
Propriedade Tipo Obrigatório Descrição soluCXKeystring✅ Chave de autenticação SoluCX typeWidgetType✅ Modo de renderização dataWidgetData✅ Dados do cliente/transação optionsWidgetOptions✅ Configurações do widget
interface WidgetData {
// Identificadores
transaction_id ?: string ;
customer_id ?: string ;
// Dados do cliente
name ?: string ;
email ?: string ;
phone ?: string ;
birth_date ?: string ; // Formato: YYYY-MM-DD
document ?: string ;
// Contexto da transação
store_id ?: string ;
store_name ?: string ;
employee_id ?: string ;
employee_name ?: string ;
amount ?: number ;
score ?: number ;
journey ?: string ; // Nome da jornada/fluxo
// Parâmetros customizados (prefixo param_)
param_REGIAO ?: string ;
[ key : string ] : string | number | undefined ;
}
interface WidgetOptions {
height ?: number ; // Altura
retry ?: {
attempts ?: number ; // Tentativas (padrão: 3)
interval ?: number ; // Intervalo em ms (padrão: 1000)
};
waitDelayAfterRating ?: number ; // Delay após avaliação
}
type WidgetType = "bottom" | "top" | "inline" | "modal" ;
O widget processa automaticamente os seguintes eventos da pesquisa:
FORM_OPENED - Widget foi abertoFORM_CLOSE - Usuário fechou o widgetFORM_COMPLETED - Pesquisa concluídaFORM_PARTIALCOMPLETED - Completada parcialmenteFORM_RESIZE - Widget redimensionadoFORM_ERROR - Erro no carregamentoO widget controla automaticamente:
Histórico de tentativas : Evita spam de widgetsÚltima avaliação : Data da última interaçãoControle de frequência : Respeita configurações de exibiçãoArmazenamento local : Dados persistem entre sessões
const widgets = [ 'bottom' , 'top' ] as WidgetType [];
return (
<>
{ widgets . map (( type ) => (
< SoluCXWidget
key = {type}
soluCXKey = {key}
type = {type}
data = {data}
options = {options}
/>
))}
</>
);
⚠️ Comportamento Crítico : A posição no JSX não determina onde widgets top, bottom e modal aparecem:
// ❌ Widget "bottom" sempre aparece embaixo, independente da posição
< Text >Conteúdo antes </ Text >
< SoluCXWidget type = "bottom" { ... props} />
< Text >Conteúdo depois </ Text >
// ✅ Apenas "inline" respeita a posição no código
< Text >Conteúdo antes </ Text >
< SoluCXWidget type = "inline" { ... props} />
< Text >Conteúdo depois </ Text >
// Verificações essenciais:
// ✅ Chave SoluCX válida?
// ✅ Conectividade com internet?
// ✅ Logs do WebView no console?
// ✅ Dados obrigatórios preenchidos?
// Debug de comunicação:
const handleMessage = ( message : string ) => {
console. log ( 'Widget event:' , message);
};
// Verificar se JavaScript foi injetado corretamente
// Ajustar dimensões para o dispositivo:
const { height } = Dimensions. get ( 'window' );
const options = {
height: Math. min (height * 0.6 , 400 )
};
Versão React Native Expo iOS Android 1.0.x 0.70+ 50+ 11+ API 21+
Este pacote é proprietário da SoluCX. O uso é restrito a clientes licenciados da plataforma SoluCX.
