From bbb7cfa218402fd055d1166c30657653bbf3e8f7 Mon Sep 17 00:00:00 2001
From: HKafuiEPI <kafui.hounkpatin@epitech.eu>
Date: Thu, 28 Aug 2025 19:27:58 +0100
Subject: [PATCH 1/2] feat: integrate react-native-safe-area-context for
 improved layout handling

---
 example/src/TestComponent.tsx |  4 ++--
 package-lock.json             | 10 +++++++++
 package.json                  |  1 +
 src/kkiapay.tsx               | 41 +++++++++++++++++++----------------
 yarn.lock                     |  5 +++++
 5 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/example/src/TestComponent.tsx b/example/src/TestComponent.tsx
index 8fadd52..aa9f47d 100644
--- a/example/src/TestComponent.tsx
+++ b/example/src/TestComponent.tsx
@@ -8,8 +8,8 @@ export default function TestComponent() {
   const openWidget = () => {
     openKkiapayWidget({
       amount: 100,
-      key: 'your_api_key',
-      sandbox: true,
+      key: 'LprYUAyMpfAjq4z2yTHPiY0b6XktIQ',
+      sandbox: false,
       reason: 'Payment',
     });
   };
diff --git a/package-lock.json b/package-lock.json
index bb5f101..323d55f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@kkiapay-org/react-native-sdk": "^0.1.5",
+        "react-native-safe-area-context": "^5.6.1",
         "react-native-webview": "^13.6.3"
       },
       "devDependencies": {
@@ -16047,6 +16048,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-native-safe-area-context": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-5.6.1.tgz",
+      "integrity": "sha512-/wJE58HLEAkATzhhX1xSr+fostLsK8Q97EfpfMDKo8jlOc1QKESSX/FQrhk7HhQH/2uSaox4Y86sNaI02kteiA==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-webview": {
       "version": "13.13.5",
       "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-13.13.5.tgz",
diff --git a/package.json b/package.json
index 68201d7..7a47ce6 100644
--- a/package.json
+++ b/package.json
@@ -157,6 +157,7 @@
   },
   "dependencies": {
     "@kkiapay-org/react-native-sdk": "^0.1.5",
+    "react-native-safe-area-context": "^5.6.1",
     "react-native-webview": "^13.6.3"
   },
   "overrides": {
diff --git a/src/kkiapay.tsx b/src/kkiapay.tsx
index 35bf61b..2a0b068 100644
--- a/src/kkiapay.tsx
+++ b/src/kkiapay.tsx
@@ -8,6 +8,7 @@ import WebView from 'react-native-webview';
 import { Buffer } from 'buffer';
 import { launchWave } from './linking';
 import { WAVE_LINK } from './typings';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import React from 'react';
 
 console.log(React);
@@ -199,25 +200,27 @@ export function KkiapayProvider({ children }: PropsWithChildren<any>) {
       }}
     >
       {widgetOpened && (
-        <KeyboardAvoidingView
-          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-          style={styles.keyboardAvoidingContainer}
-          keyboardVerticalOffset={StatusBar.currentHeight || 0}
-        >
-          <WebView
-            style={styles.webview}
-            source={{ uri }}
-            onMessage={handleMessage}
-            allowsInlineMediaPlayback
-            javaScriptEnabled
-            domStorageEnabled
-            startInLoadingState
-            originWhitelist={['*']}
-            mixedContentMode="compatibility"
-            androidHardwareAccelerationDisabled={false}
-            androidLayerType="hardware"
-          />
-        </KeyboardAvoidingView>
+        <SafeAreaView style={styles.container}>
+          <KeyboardAvoidingView
+            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+            style={styles.keyboardAvoidingContainer}
+            keyboardVerticalOffset={StatusBar.currentHeight || 0}
+          >
+            <WebView
+              style={styles.webview}
+              source={{ uri }}
+              onMessage={handleMessage}
+              allowsInlineMediaPlayback
+              javaScriptEnabled
+              domStorageEnabled
+              startInLoadingState
+              originWhitelist={['*']}
+              mixedContentMode="compatibility"
+              androidHardwareAccelerationDisabled={false}
+              androidLayerType="hardware"
+            />
+          </KeyboardAvoidingView>
+        </SafeAreaView>
       )}
       {!widgetOpened && children}
     </KkiapayContext.Provider>
diff --git a/yarn.lock b/yarn.lock
index 9c34482..e71ad75 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8028,6 +8028,11 @@ react-native-gradle-plugin@^0.71.17:
   resolved "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.19.tgz"
   integrity sha512-1dVk9NwhoyKHCSxcrM6vY6cxmojeATsBobDicX0ZKr7DgUF2cBQRTKsimQFvzH8XhOVXyH8p4HyDSZNIFI8OlQ==
 
+react-native-safe-area-context@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-5.6.1.tgz"
+  integrity sha512-/wJE58HLEAkATzhhX1xSr+fostLsK8Q97EfpfMDKo8jlOc1QKESSX/FQrhk7HhQH/2uSaox4Y86sNaI02kteiA==
+
 react-native-webview@^13.6.3:
   version "13.13.5"
   resolved "https://registry.npmjs.org/react-native-webview/-/react-native-webview-13.13.5.tgz"

From dbae1000e2a444941a265521a826d096e0df3b3b Mon Sep 17 00:00:00 2001
From: HKafuiEPI <kafui.hounkpatin@epitech.eu>
Date: Thu, 28 Aug 2025 19:28:57 +0100
Subject: [PATCH 2/2] feat: integrate react-native-safe-area-context for
 improved layout handling

---
 example/src/TestComponent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example/src/TestComponent.tsx b/example/src/TestComponent.tsx
index aa9f47d..fb523e5 100644
--- a/example/src/TestComponent.tsx
+++ b/example/src/TestComponent.tsx
@@ -8,7 +8,7 @@ export default function TestComponent() {
   const openWidget = () => {
     openKkiapayWidget({
       amount: 100,
-      key: 'LprYUAyMpfAjq4z2yTHPiY0b6XktIQ',
+      key: 'your_api_key',
       sandbox: false,
       reason: 'Payment',
     });