I have a problem implementing an SDK inside of react native webview. While sdk.onAddToCard works all fine and I can get the data via onMessage, sdk.setPath does not work at all. I tried many solutions but none of them worked. Should I go Iframe inside of Webview (because that works) or how can I communicate with the view with the help of sdk?
function App(): React.JSX.Element {
const ref = useRef<WebView>(null);
const jsObject = `
var script = document.createElement('script');
script.id='initial-script'
script.src = 'SDK CDN file';
script.onload = function() {
sdk.onAddToCart((products)=>{
window.ReactNativeWebView.postMessage(products);
})
}
document.body.appendChild(script);
`;
const injectAdditionalScript = () => {
if (ref.current) {
const scriptToInject = `
sdk.setPath("choose-model")
`;
ref.current.injectJavaScript(scriptToInject);
}
};
return (
<SafeAreaView style={{flex: 1}}>
<WebView
originWhitelist={['*']}
ref={ref}
style={{flex: 1}}
containerStyle={{flex: 1}}
source={{
uri: 'http://localhost:4000/vto/makeup',
}}
contentMode={'mobile'}
onMessage={event => console.log(event.nativeEvent.data)}
injectedJavaScriptForMainFrameOnly={false}
injectedJavaScript={jsObject}
sharedCookiesEnabled={true}
thirdPartyCookiesEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
/>
<Button title={'button'} onPress={() => injectAdditionalScript()} />
</SafeAreaView>
);
}
export default App;