[SOLVED] React Native Webview "onNavigationStateChange" returning empty document.title only on iOS device

React Native Webview "onNavigationStateChange" returning empty document.title only on iOS device

I'm trying to create a payment checkout process with Paypal, and using WebView to handle the request on an ExpressJS backend. The React Native app reads the document.title of the rendered html in the backend to determine the success or failure of a transaction. On Android it works perfectcly, however on iOS the document.title is always returned as "".

REACT NATIVE SECTION:

const INJECTED_JAVASCRIPT =
    `document.getElementById('total').value="${total}"; 
    document.getElementById('address').value="${address}"; 
    document.getElementById('firstName').value="${userProfile.firstName}";
    document.getElementById('lastName').value="${userProfile.lastName}";
    document.getElementById('email').value="${accessStore.auth.userEmail}";
    document.getElementById('addressDetails').value="${moreDetails}";
    setTimeout(function() {document.f1.submit()}, 1000);`
    
    
<WebView
     source={{uri: process.env.BACKEND_NODE_URL_PAYMENT}}
     onNavigationStateChange={(data) => {
         handleResponse(data), console.log(data)
     }}
     onMessage={(event) => {}}
     injectedJavaScript={INJECTED_JAVASCRIPT}
/>

EXPRESS SECTION

app.get('/success', (req, res) => {

    var PayerID = req.query.PayerID;

    var execute_payment_json = {
         "payer_id": PayerID,
    };

    var paymentId = req.query.paymentId;

    paypal.payment.execute(paymentId, execute_payment_json, function (error, payment)
    {
         if (error) {
              console.log(error.response);
              throw error;
         } else {
             res.render('success');
         }
    });
});

RENDERED HTML IN EXPRESS JS

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>success</title>
</head>
<body>
<h1>Zahlung erfolgreich!</h1>
</body>
</html>

Solution

Solved with a different approach in the end. I used the "url" value and used it in the conditional as

 if (data.url.includes('https://example.com/success')) {
     ///do if payment successfull
 }
 
 if (data.url.includes('https://example.com/cencel')) {
     ///do if payment is cancelled
 }