Devera Widget React Native/Expo Integration

  1. Install webview package:

  2. npm: npm install react-native-webview

  3. yarn: yarn add react-native-webview

  4. expo: expo install react-native-webview

  5. Put the webview in your component:

    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 = "" /* If you leave it empty it's the system default language, but you can set with es for spanish, en for english and de for german */
  const mainColor = "#4b858e" /* You can change the default values */
  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>
  );
}

To customize the font you need to add the import in your code too.

Remember to change the values of your-token to your token, your-client-id to your client id and your-product-id with the id of the product that you gave us to relate it to.