Integración Devera Widget React Native/Expo

  1. Instalar el paquete webview:

  2. npm: npm install react-native-webview

  3. yarn: yarn add react-native-webview

  4. expo: expo install react-native-webview

  5. Coloca el webview en tu componente:

    import React from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';

export default function App() {
  const productId = "<your-product-id>"
  const token = "<your-token>"
  const clientId = "<your-client-id>"
  const language = "" /* Por defecto escoge el idioma del sistema, pero puedes seleccionar es para Español, en para Inglés o de para Alemán. */
  const mainColor = "#4b858e" /* Puedes cambiar los valores por defecto */
  const mainActive = "#2c4e54"
  const mainDisabled = "#9db8bc"
  const secondary = "#a3d5cd"
  const secondaryDark = "#9ac6bf"
  const secondaryMiddle = "#c8e7e2"
  const secondaryLight = "#e8f6f3"
  const secondarySuperDark = "#7baaa3"
  const font = "'Montserrat', sans-serif"
  const maxWidth = "420px"
  const height = "500px"

  const htmlData = `
    <html>
      <head>
        <style>
          :root {
            --devera-main: ${mainColor};
            --devera-mainActive: ${mainActive};
            --devera-mainDisabled: ${mainDisabled};
            --devera-secondary: ${secondary};
            --devera-secondaryDark: ${secondaryDark};
            --devera-secondaryMiddle: ${secondaryMiddle};
            --devera-secondaryLight: ${secondaryLight};
            --devera-secondarySuperDark: ${secondarySuperDark};
            --devera-font: ${font};
            --devera-microMaxWidth: ${maxWidth};
            --devera-microHeight: ${height};
          }
        </style>
      </head>
      <body>
        <devera-widget
          product-id="${productId}"
          client-id="${clientId}"
          token="${token}"
          language="${language}"
        ></devera-widget>
        <script src="https://widget.devera.ai/widget.umd.js"></script>
      </body>
    </html>
  `;

  return (
    <View style={styles.container}>
      <WebView
        originWhitelist={['*']}
        source={{ html: htmlData }}
      />
    </View>
  );
}

Para personalizar la fuente también necesitas añadir la importación de ella en tu código.

Recuerda cambiar los valores de your-token por tu token, your-client-id por tu client id y your-product-id por el id de producto que nos disteis para relacionarlo.