diff --git a/dist/FlutterwaveCheckout.js b/dist/FlutterwaveCheckout.js
index 952c75c..8a8ec63 100644
--- a/dist/FlutterwaveCheckout.js
+++ b/dist/FlutterwaveCheckout.js
@@ -59,7 +59,7 @@ var FlutterwaveCheckout = function FlutterwaveCheckout(props) {
             Alert.alert('', 'Are you sure you want to cancel this payment?', [
                 { text: 'No' },
                 {
-                    text: 'Yes, Cancel',
+                    text: 'Yes',
                     style: 'destructive',
                     onPress: function () { return handleAbort(true); }
                 },
@@ -67,7 +67,16 @@ var FlutterwaveCheckout = function FlutterwaveCheckout(props) {
             return;
         }
         // remove tx_ref and dismiss
-        animateOut().then(onAbort);
+        // animateOut().then(onAbort);
+        if (webviewRef.current) {
+    webviewRef.current.stopLoading();
+  }
+  
+  // Stop animations
+  animation.current.stopAnimation();
+  
+  // Close modal after cleanup
+  setTimeout(() => setShow(false), 50);
     }, [onAbort, animateOut]);
     var handleNavigationStateChange = React.useCallback(function (ev) {
         // cregex to check if redirect has occured on completion/cancel
diff --git a/package.json b/package.json
index db39527..bad273c 100644
--- a/package.json
+++ b/package.json
@@ -27,48 +27,48 @@
   "author": "Flutterwave Developers",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/runtime": "^7.6.3",
-    "@react-native-community/eslint-config": "^1.0.0",
-    "@semantic-release/git": "^9.0.0",
-    "@types/jest": "^24.9.1",
-    "@types/react": "^16.9.34",
-    "@types/react-native": "^0.62.2",
-    "@types/react-test-renderer": "^16.9.2",
-    "@typescript-eslint/eslint-plugin": "^2.27.0",
-    "@typescript-eslint/parser": "^2.27.0",
-    "abortcontroller-polyfill": "^1.4.0",
+    "@babel/core": "^7.22.10",
+    "@babel/runtime": "^7.23.0",
+    "@react-native-community/eslint-config": "^3.2.0",
+    "@semantic-release/git": "^10.0.1",
+    "@types/jest": "^29.5.3",
+    "@types/react": "^18.2.14",
+    "@types/react-native": "^0.73.0",
+    "@types/react-test-renderer": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.3.1",
+    "@typescript-eslint/parser": "^6.3.1",
+    "abortcontroller-polyfill": "^1.7.3",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^24.9.0",
-    "babel-plugin-module-resolver": "3.1.3",
-    "babel-preset-react-native": "^4.0.1",
-    "commitizen": "^4.0.4",
-    "copyfiles": "^2.2.0",
-    "cz-conventional-changelog": "^3.1.0",
-    "dotenv": "^8.2.0",
-    "eslint": "^6.8.0",
-    "jest": "^24.9.0",
+    "babel-jest": "^29.7.0",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "babel-preset-react-native": "^5.0.2",
+    "commitizen": "^4.3.0",
+    "copyfiles": "^2.4.1",
+    "cz-conventional-changelog": "^3.3.0",
+    "dotenv": "^16.3.1",
+    "eslint": "^8.45.0",
+    "jest": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
-    "log-symbols": "^4.0.0",
-    "metro-react-native-babel-preset": "^0.56.0",
-    "mockdate": "^3.0.2",
+    "log-symbols": "^5.1.0",
+    "metro-react-native-babel-preset": "^0.76.8",
+    "mockdate": "^3.0.5",
     "ncp": "^2.0.0",
-    "prettier": "^2.0.4",
-    "pretty-quick": "^2.0.1",
-    "react": "^16.13.1",
-    "react-native": "^0.62.2",
-    "react-test-renderer": "16.8.6",
-    "semantic-release": "^17.0.8",
-    "ts-jest": "^24.2.0",
-    "typescript": "^3.8.3"
-  },
+    "prettier": "^2.8.8",
+    "pretty-quick": "^3.2.3",
+    "react": "^18.2.0",
+    "react-native": "^0.74.3",
+    "react-test-renderer": "^18.2.0",
+    "semantic-release": "^21.0.5",
+    "ts-jest": "^29.1.0",
+    "typescript": "^5.2.2"
+},
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
   "dependencies": {
-    "prop-types": "^15.6.2",
-    "react-native-webview": ">=6.0.2"
+    "prop-types": "^15.8.1",
+    "react-native-webview": "^13.8.6"
   },
   "config": {
     "commitizen": {
diff --git a/src/FlutterwaveCheckout.tsx b/src/FlutterwaveCheckout.tsx
index c2a39ec..3a36b32 100644
--- a/src/FlutterwaveCheckout.tsx
+++ b/src/FlutterwaveCheckout.tsx
@@ -95,7 +95,7 @@ const FlutterwaveCheckout: React.FC<FlutterwaveCheckoutProps> = function Flutter
       Alert.alert('', 'Are you sure you want to cancel this payment?', [
         {text: 'No'},
         {
-          text: 'Yes, Cancel',
+          text: 'Yes',
           style: 'destructive',
           onPress: () => handleAbort(true),
         },
@@ -103,7 +103,22 @@ const FlutterwaveCheckout: React.FC<FlutterwaveCheckoutProps> = function Flutter
       return;
     }
     // remove tx_ref and dismiss
-    animateOut().then(onAbort);
+   // animateOut()
+
+  //   if(onAbort){
+  //    setTimeout(() => {
+  //   onAbort();
+  // }, 500);
+  //   }
+  if (webviewRef.current) {
+    webviewRef.current.stopLoading();
+  }
+  
+  // Stop animations
+  animation.current.stopAnimation();
+  
+  // Close modal after cleanup
+  setTimeout(() => setShow(false), 50);
   }, [onAbort, animateOut]);
 
   const handleNavigationStateChange = React.useCallback((ev: WebViewNavigation): boolean => {