fix(flutterwavecheckout): handle redirect before load

Author: corneliusyaovi

dist/FlutterwaveCheckout.d.ts.map

@@ -74,14 +74,15 @@ var FlutterwaveCheckout = function FlutterwaveCheckout(props) {
         var rx = /\/flutterwave\.com\/rn-redirect/;
         // Don't end payment if not redirected back
         if (!rx.test(ev.url)) {
-            return;
+            return true;
         }
         // dismiss modal
         animateOut().then(function () {
             if (onRedirect) {
                 onRedirect(getRedirectParams(ev.url));
             }
         });
+        return false;
     }, [onRedirect]);
     var doAnimate = React.useCallback(function () {
         if (visible === show) {
@@ -113,7 +114,7 @@ var FlutterwaveCheckout = function FlutterwaveCheckout(props) {
             opacity: opacity
         }
     ]} testID='flw-checkout-dialog'>
-        <WebView ref={webviewRef} source={{ uri: link || '' }} style={styles.webview} startInLoadingState={true} scalesPageToFit={true} javaScriptEnabled={true} onNavigationStateChange={handleNavigationStateChange} renderError={function () { return <FlutterwaveCheckoutError hasLink={!!link} onTryAgain={handleReload}/>; }} renderLoading={function () { return <FlutterwaveCheckoutLoader />; }}/>
+        <WebView ref={webviewRef} source={{ uri: link || '' }} style={styles.webview} startInLoadingState={true} scalesPageToFit={true} javaScriptEnabled={true} onShouldStartLoadWithRequest={handleNavigationStateChange} renderError={function () { return <FlutterwaveCheckoutError hasLink={!!link} onTryAgain={handleReload}/>; }} renderLoading={function () { return <FlutterwaveCheckoutLoader />; }}/>
       </Animated.View>
     </Modal>);
 };

dist/FlutterwaveCheckout.js

@@ -71,7 +71,7 @@ const FlutterwaveCheckout: React.FC<FlutterwaveCheckoutProps> = function Flutter
     }).start();
   }, []);
 
-  const animateOut = React.useCallback(() => {
+  const animateOut = React.useCallback((): Promise<void> => {
     return new Promise(resolve => {
       Animated.timing(animation.current, {
         toValue: 0,
@@ -106,19 +106,20 @@ const FlutterwaveCheckout: React.FC<FlutterwaveCheckoutProps> = function Flutter
     animateOut().then(onAbort);
   }, [onAbort, animateOut]);
 
-  const handleNavigationStateChange = React.useCallback((ev: WebViewNavigation) => {
+  const handleNavigationStateChange = React.useCallback((ev: WebViewNavigation): boolean => {
     // cregex to check if redirect has occured on completion/cancel
     const rx = /\/flutterwave\.com\/rn-redirect/;
     // Don't end payment if not redirected back
     if (!rx.test(ev.url)) {
-      return
+      return true;
     }
     // dismiss modal
     animateOut().then(() => {
       if (onRedirect) {
         onRedirect(getRedirectParams(ev.url))
       }
     });
+    return false;
   }, [onRedirect]);
 
   const doAnimate = React.useCallback(() => {
@@ -169,7 +170,7 @@ const FlutterwaveCheckout: React.FC<FlutterwaveCheckoutProps> = function Flutter
           startInLoadingState={true}
           scalesPageToFit={true}
           javaScriptEnabled={true}
-          onNavigationStateChange={handleNavigationStateChange}
+          onShouldStartLoadWithRequest={handleNavigationStateChange}
           renderError={() => <FlutterwaveCheckoutError hasLink={!!link} onTryAgain={handleReload} />}
           renderLoading={() => <FlutterwaveCheckoutLoader />}
         />