To use our SDK with React Native, you only need to check the nativeEvent
field from the WebViewMessageEvent
, which contains data about the specific event. See the example below:
import { useEffect, useRef, useState } from "react";
import { Linking } from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
import { WebView, WebViewMessageEvent } from "react-native-webview";
const urlMapper = {
cert: {
sdkMobile: "https://sdk-mobile.cert.zerohash.com",
zeroHashAppsURL: "https://web-sdk.cert.zerohash.com",
},
prod: {
sdkMobile: "https://sdk-mobile.zerohash.com",
zeroHashAppsURL: "https://web-sdk.zerohash.com",
},
};
/**
* List of permissions used to request a JWT in the `client_auth_token` request
*/
const permissions = [
"crypto-buy",
"crypto-sell",
"crypto-withdrawals",
"crypto-payouts",
"fiat-deposits",
"fiat-withdrawals",
"fwc", // Fund
"onboarding",
"participant-profile",
"update-participant",
"crypto-account-link",
];
/**
* You can copy and paste a JWT on jwtToken for testing. You will need to
* implement a function to fetch the JWT from your backend and replace this variable.
* We have an example below using fetchJwt and setToken functions.
* */
const jwtToken = ``;
const App = () => {
const webViewRef = useRef<WebView>(null);
const [token, setToken] = useState<string>(jwtToken);
useEffect(() => {
fetchJwt();
}, []);
// Fetch JWT token from server
const fetchJwt = async () => {
const jwtPayload = {
// The participant code you want to request the JWT for.
participant_code: "<PARTICIPANT_CODE>",
// The permission required for your use-case, refer to Permissions for
// the allowed values
permissions: ["fwc"],
};
try {
const response = await fetch(`<API_URL_TO_FETCH_TOKEN>`, {
method: "POST",
body: JSON.stringify(jwtPayload),
});
const parsedResponse = await response.json();
setToken(parsedResponse.message.token);
} catch (e) {
console.error("could not fetch jwt", e);
}
};
// Open modal using injected JS script in webview
const openModal = () => {
// Replace "jwtToken" with "token" to use the token you got from your backend
webViewRef.current?.injectJavaScript(
`window.postMessage({ "type": "OPEN_MODAL", "payload": { "appIdentifier": "fund", "jwt": "${jwtToken}"}});true;`
);
};
const handleMessage = (event: WebViewMessageEvent) => {
try {
// Parse message from webview event data checking nativeEvent field
const parsedMessage = JSON.parse(event.nativeEvent.data);
console.log("Received message:", parsedMessage);
if (parsedMessage.type === "SDK_MOBILE_READY") {
console.log("SDK is ready, opening modal...");
openModal();
}
// Handle webview events
// Your code here...
} catch (e) {
alert(
`could not parse message: ${JSON.stringify(event.nativeEvent.data)}`
);
}
};
return (
<SafeAreaProvider>
<SafeAreaView style={{ flex: 1 }}>
<WebView
allowsInlineMediaPlayback={true}
ref={webViewRef}
onMessage={handleMessage}
source={{
// Double check the environment you are using and pick the correct URLs
// accordingly
uri: `${urlMapper.cert.sdkMobile}/v1?zeroHashAppsURL=${urlMapper.cert.zeroHashAppsURL}`,
}}
onNavigationStateChange={(event) => {
if (!event.url.startsWith(urlMapper.cert.sdkMobile)) {
webViewRef?.current.stopLoading();
Linking.openURL(event.url);
}
}}
/>
</SafeAreaView>
</SafeAreaProvider>
);
};
export default App;