I am trying to implement this ballerine KYC web ui sdk into my react native app, and load it with react-native-webview. The html works perfectly fine on a regular index.html file but just produces a whitescreen for my react native project.
React native code:
import React from "react";
import { View } from "react-native";
import { WebView } from "react-native-webview";
import styled from "styled-components";
export const IDScanner = () => {
const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<title>My KYC Flow</title>
<script
crossorigin
src="https://cdn.ballerine.io/js/1.3.0/ballerine-sdk.umd.js"
></script>
</head>
<body>
<div id="kyc-host">
</div>
<script>
const ballerineInitConfig = {
endUserInfo: {
id: "test-id",
},
uiConfig: {
uiPack: "default",
flows: {
"my-kyc-flow": {
steps: [
{ name: "welcome", id: "welcome" },
{ name: "document-selection", id: "document-selection" },
{ name: "document-photo", id: "document-photo" },
{ name: "selfie", id: "selfie" },
{ name: "final", id: "final" },
],
},
},
},
};
BallerineSDK.flows.init(ballerineInitConfig).then(() => {
BallerineSDK.flows.openModal("my-kyc-flow", {});
});
</script>
</body>
</html>`;
return (
<View>
<WebView
originWhitelist={["*"]}
source={{
html: htmlContent,
}}
javaScriptEnabled={true}
/>
</Container>
);
};
You can also take the block of html and put it into an index.html to see an expected result.
New contributor
user28784932 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.