From 018736fb7b419e8a631749dd45d5afacd973cbd7 Mon Sep 17 00:00:00 2001
From: Harithmetic1 <onigemotosin@gmail.com>
Date: Fri, 8 Aug 2025 23:39:29 +0400
Subject: [PATCH 1/3] feat: pushing fix for safearea webview modal

---
 development/PaystackProvider.tsx | 177 +++++++++++++++----------------
 1 file changed, 87 insertions(+), 90 deletions(-)

diff --git a/development/PaystackProvider.tsx b/development/PaystackProvider.tsx
index b440016..ba9861f 100644
--- a/development/PaystackProvider.tsx
+++ b/development/PaystackProvider.tsx
@@ -1,108 +1,105 @@
 import React, { createContext, useCallback, useMemo, useState } from 'react';
-import { Modal, View, ActivityIndicator, } from 'react-native';
+import { Modal, SafeAreaView, ActivityIndicator } from 'react-native';
 import { WebView, WebViewMessageEvent } from 'react-native-webview';
-import {
-    PaystackParams,
-    PaystackProviderProps,
-} from './types';
+import { PaystackParams, PaystackProviderProps } from './types';
 import { validateParams, paystackHtmlContent, generatePaystackParams, handlePaystackMessage } from './utils';
 import { styles } from './styles';
 
 export const PaystackContext = createContext<{
-    popup: {
-        checkout: (params: PaystackParams) => void;
-        newTransaction: (params: PaystackParams) => void;
-    };
+  popup: {
+    checkout: (params: PaystackParams) => void;
+    newTransaction: (params: PaystackParams) => void;
+  };
 } | null>(null);
 
 export const PaystackProvider: React.FC<PaystackProviderProps> = ({
-    publicKey,
-    currency,
-    defaultChannels = ['card'],
-    debug = false,
-    children,
-    onGlobalSuccess,
-    onGlobalCancel,
+  publicKey,
+  currency,
+  defaultChannels = ['card'],
+  debug = false,
+  children,
+  onGlobalSuccess,
+  onGlobalCancel,
 }) => {
-    const [visible, setVisible] = useState(false);
-    const [params, setParams] = useState<PaystackParams | null>(null);
-    const [method, setMethod] = useState<'checkout' | 'newTransaction'>('checkout');
+  const [visible, setVisible] = useState(false);
+  const [params, setParams] = useState<PaystackParams | null>(null);
+  const [method, setMethod] = useState<'checkout' | 'newTransaction'>('checkout');
 
-    const fallbackRef = useMemo(() => `ref_${Date.now()}`, []);
+  const fallbackRef = useMemo(() => `ref_${Date.now()}`, []);
 
-    const open = useCallback(
-        (params: PaystackParams, selectedMethod: 'checkout' | 'newTransaction') => {
-            if (debug) console.log(`[Paystack] Opening modal with method: ${selectedMethod}`);
-            if (!validateParams(params, debug)) return;
-            setParams(params);
-            setMethod(selectedMethod);
-            setVisible(true);
-        },
-        [debug]
-    );
+  const open = useCallback(
+    (params: PaystackParams, selectedMethod: 'checkout' | 'newTransaction') => {
+      if (debug) console.log(`[Paystack] Opening modal with method: ${selectedMethod}`);
+      if (!validateParams(params, debug)) return;
+      setParams(params);
+      setMethod(selectedMethod);
+      setVisible(true);
+    },
+    [debug],
+  );
 
-    const checkout = (params: PaystackParams) => open(params, 'checkout');
-    const newTransaction = (params: PaystackParams) => open(params, 'newTransaction');
+  const checkout = (params: PaystackParams) => open(params, 'checkout');
+  const newTransaction = (params: PaystackParams) => open(params, 'newTransaction');
 
-    const close = () => {
-        setVisible(false);
-        setParams(null);
-    }
+  const close = () => {
+    setVisible(false);
+    setParams(null);
+  };
 
-    const handleMessage = (event: WebViewMessageEvent) => {
-        handlePaystackMessage({
-            event,
-            debug,
-            params,
-            onGlobalSuccess,
-            onGlobalCancel,
-            close,
-        });
-    };
+  const handleMessage = (event: WebViewMessageEvent) => {
+    handlePaystackMessage({
+      event,
+      debug,
+      params,
+      onGlobalSuccess,
+      onGlobalCancel,
+      close,
+    });
+  };
 
-    const paystackHTML = useMemo(() => {
-        if (!params) return '';
-        return paystackHtmlContent(
-            generatePaystackParams({
-                publicKey,
-                email: params.email,
-                amount: params.amount,
-                reference: params.reference || fallbackRef,
-                metadata: params.metadata,
-                ...(currency && { currency }),
-                channels: defaultChannels, 
-                plan: params.plan,
-                invoice_limit: params.invoice_limit,
-                subaccount: params.subaccount,
-                split: params.split,
-                split_code: params.split_code,
-            }),
-            method
-        );
-    }, [params, method]);
+  const paystackHTML = useMemo(() => {
+    if (!params) return '';
+    return paystackHtmlContent(
+      generatePaystackParams({
+        publicKey,
+        email: params.email,
+        amount: params.amount,
+        reference: params.reference || fallbackRef,
+        metadata: params.metadata,
+        ...(currency && { currency }),
+        channels: defaultChannels,
+        plan: params.plan,
+        invoice_limit: params.invoice_limit,
+        subaccount: params.subaccount,
+        split: params.split,
+        split_code: params.split_code,
+      }),
+      method,
+    );
+  }, [params, method]);
 
-    if (debug && visible) {
-        console.log('[Paystack] HTML Injected:', paystackHTML);
-    }
+  if (debug && visible) {
+    console.log('[Paystack] HTML Injected:', paystackHTML);
+  }
 
-    return (
-        <PaystackContext.Provider value={{ popup: { checkout, newTransaction } }}>
-            {children}
-            <Modal visible={visible} transparent animationType="slide">
-                <View style={styles.container}>
-                    <WebView
-                        originWhitelist={["*"]}
-                        source={{ html: paystackHTML }}
-                        onMessage={handleMessage}
-                        javaScriptEnabled
-                        domStorageEnabled
-                        startInLoadingState
-                        onLoadStart={() => debug && console.log('[Paystack] WebView Load Start')}
-                        onLoadEnd={() => debug && console.log('[Paystack] WebView Load End')}
-                        renderLoading={() => <ActivityIndicator size="large" />}
-                    />
-                </View>
-            </Modal>
-        </PaystackContext.Provider>
-    );
-};
\ No newline at end of file
+  return (
+    <PaystackContext.Provider value={{ popup: { checkout, newTransaction } }}>
+      {children}
+      <Modal visible={visible} transparent animationType="slide">
+        <SafeAreaView style={styles.container}>
+          <WebView
+            originWhitelist={['*']}
+            source={{ html: paystackHTML }}
+            onMessage={handleMessage}
+            javaScriptEnabled
+            domStorageEnabled
+            startInLoadingState
+            onLoadStart={() => debug && console.log('[Paystack] WebView Load Start')}
+            onLoadEnd={() => debug && console.log('[Paystack] WebView Load End')}
+            renderLoading={() => <ActivityIndicator size="large" />}
+          />
+        </SafeAreaView>
+      </Modal>
+    </PaystackContext.Provider>
+  );
+};

From 0637a1db003eedee3feef2bd8328b3fbbb78bcb5 Mon Sep 17 00:00:00 2001
From: Harithmetic1 <onigemotosin@gmail.com>
Date: Mon, 11 Aug 2025 22:05:39 +0400
Subject: [PATCH 2/3] Revert "feat: pushing fix for safearea webview modal"

This reverts commit 018736fb7b419e8a631749dd45d5afacd973cbd7.
---
 development/PaystackProvider.tsx | 177 ++++++++++++++++---------------
 1 file changed, 90 insertions(+), 87 deletions(-)

diff --git a/development/PaystackProvider.tsx b/development/PaystackProvider.tsx
index ba9861f..b440016 100644
--- a/development/PaystackProvider.tsx
+++ b/development/PaystackProvider.tsx
@@ -1,105 +1,108 @@
 import React, { createContext, useCallback, useMemo, useState } from 'react';
-import { Modal, SafeAreaView, ActivityIndicator } from 'react-native';
+import { Modal, View, ActivityIndicator, } from 'react-native';
 import { WebView, WebViewMessageEvent } from 'react-native-webview';
-import { PaystackParams, PaystackProviderProps } from './types';
+import {
+    PaystackParams,
+    PaystackProviderProps,
+} from './types';
 import { validateParams, paystackHtmlContent, generatePaystackParams, handlePaystackMessage } from './utils';
 import { styles } from './styles';
 
 export const PaystackContext = createContext<{
-  popup: {
-    checkout: (params: PaystackParams) => void;
-    newTransaction: (params: PaystackParams) => void;
-  };
+    popup: {
+        checkout: (params: PaystackParams) => void;
+        newTransaction: (params: PaystackParams) => void;
+    };
 } | null>(null);
 
 export const PaystackProvider: React.FC<PaystackProviderProps> = ({
-  publicKey,
-  currency,
-  defaultChannels = ['card'],
-  debug = false,
-  children,
-  onGlobalSuccess,
-  onGlobalCancel,
+    publicKey,
+    currency,
+    defaultChannels = ['card'],
+    debug = false,
+    children,
+    onGlobalSuccess,
+    onGlobalCancel,
 }) => {
-  const [visible, setVisible] = useState(false);
-  const [params, setParams] = useState<PaystackParams | null>(null);
-  const [method, setMethod] = useState<'checkout' | 'newTransaction'>('checkout');
+    const [visible, setVisible] = useState(false);
+    const [params, setParams] = useState<PaystackParams | null>(null);
+    const [method, setMethod] = useState<'checkout' | 'newTransaction'>('checkout');
 
-  const fallbackRef = useMemo(() => `ref_${Date.now()}`, []);
+    const fallbackRef = useMemo(() => `ref_${Date.now()}`, []);
 
-  const open = useCallback(
-    (params: PaystackParams, selectedMethod: 'checkout' | 'newTransaction') => {
-      if (debug) console.log(`[Paystack] Opening modal with method: ${selectedMethod}`);
-      if (!validateParams(params, debug)) return;
-      setParams(params);
-      setMethod(selectedMethod);
-      setVisible(true);
-    },
-    [debug],
-  );
+    const open = useCallback(
+        (params: PaystackParams, selectedMethod: 'checkout' | 'newTransaction') => {
+            if (debug) console.log(`[Paystack] Opening modal with method: ${selectedMethod}`);
+            if (!validateParams(params, debug)) return;
+            setParams(params);
+            setMethod(selectedMethod);
+            setVisible(true);
+        },
+        [debug]
+    );
 
-  const checkout = (params: PaystackParams) => open(params, 'checkout');
-  const newTransaction = (params: PaystackParams) => open(params, 'newTransaction');
+    const checkout = (params: PaystackParams) => open(params, 'checkout');
+    const newTransaction = (params: PaystackParams) => open(params, 'newTransaction');
 
-  const close = () => {
-    setVisible(false);
-    setParams(null);
-  };
+    const close = () => {
+        setVisible(false);
+        setParams(null);
+    }
 
-  const handleMessage = (event: WebViewMessageEvent) => {
-    handlePaystackMessage({
-      event,
-      debug,
-      params,
-      onGlobalSuccess,
-      onGlobalCancel,
-      close,
-    });
-  };
+    const handleMessage = (event: WebViewMessageEvent) => {
+        handlePaystackMessage({
+            event,
+            debug,
+            params,
+            onGlobalSuccess,
+            onGlobalCancel,
+            close,
+        });
+    };
 
-  const paystackHTML = useMemo(() => {
-    if (!params) return '';
-    return paystackHtmlContent(
-      generatePaystackParams({
-        publicKey,
-        email: params.email,
-        amount: params.amount,
-        reference: params.reference || fallbackRef,
-        metadata: params.metadata,
-        ...(currency && { currency }),
-        channels: defaultChannels,
-        plan: params.plan,
-        invoice_limit: params.invoice_limit,
-        subaccount: params.subaccount,
-        split: params.split,
-        split_code: params.split_code,
-      }),
-      method,
-    );
-  }, [params, method]);
+    const paystackHTML = useMemo(() => {
+        if (!params) return '';
+        return paystackHtmlContent(
+            generatePaystackParams({
+                publicKey,
+                email: params.email,
+                amount: params.amount,
+                reference: params.reference || fallbackRef,
+                metadata: params.metadata,
+                ...(currency && { currency }),
+                channels: defaultChannels, 
+                plan: params.plan,
+                invoice_limit: params.invoice_limit,
+                subaccount: params.subaccount,
+                split: params.split,
+                split_code: params.split_code,
+            }),
+            method
+        );
+    }, [params, method]);
 
-  if (debug && visible) {
-    console.log('[Paystack] HTML Injected:', paystackHTML);
-  }
+    if (debug && visible) {
+        console.log('[Paystack] HTML Injected:', paystackHTML);
+    }
 
-  return (
-    <PaystackContext.Provider value={{ popup: { checkout, newTransaction } }}>
-      {children}
-      <Modal visible={visible} transparent animationType="slide">
-        <SafeAreaView style={styles.container}>
-          <WebView
-            originWhitelist={['*']}
-            source={{ html: paystackHTML }}
-            onMessage={handleMessage}
-            javaScriptEnabled
-            domStorageEnabled
-            startInLoadingState
-            onLoadStart={() => debug && console.log('[Paystack] WebView Load Start')}
-            onLoadEnd={() => debug && console.log('[Paystack] WebView Load End')}
-            renderLoading={() => <ActivityIndicator size="large" />}
-          />
-        </SafeAreaView>
-      </Modal>
-    </PaystackContext.Provider>
-  );
-};
+    return (
+        <PaystackContext.Provider value={{ popup: { checkout, newTransaction } }}>
+            {children}
+            <Modal visible={visible} transparent animationType="slide">
+                <View style={styles.container}>
+                    <WebView
+                        originWhitelist={["*"]}
+                        source={{ html: paystackHTML }}
+                        onMessage={handleMessage}
+                        javaScriptEnabled
+                        domStorageEnabled
+                        startInLoadingState
+                        onLoadStart={() => debug && console.log('[Paystack] WebView Load Start')}
+                        onLoadEnd={() => debug && console.log('[Paystack] WebView Load End')}
+                        renderLoading={() => <ActivityIndicator size="large" />}
+                    />
+                </View>
+            </Modal>
+        </PaystackContext.Provider>
+    );
+};
\ No newline at end of file

From 04e62cc3c685b68b89a547c02b3a62a4559e488c Mon Sep 17 00:00:00 2001
From: Harithmetic1 <onigemotosin@gmail.com>
Date: Mon, 11 Aug 2025 22:09:23 +0400
Subject: [PATCH 3/3] feat: pushing fix for safearea webview modal

---
 development/PaystackProvider.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/development/PaystackProvider.tsx b/development/PaystackProvider.tsx
index b440016..5304397 100644
--- a/development/PaystackProvider.tsx
+++ b/development/PaystackProvider.tsx
@@ -1,5 +1,5 @@
 import React, { createContext, useCallback, useMemo, useState } from 'react';
-import { Modal, View, ActivityIndicator, } from 'react-native';
+import { Modal, SafeAreaView, ActivityIndicator, } from 'react-native';
 import { WebView, WebViewMessageEvent } from 'react-native-webview';
 import {
     PaystackParams,
@@ -89,7 +89,7 @@ export const PaystackProvider: React.FC<PaystackProviderProps> = ({
         <PaystackContext.Provider value={{ popup: { checkout, newTransaction } }}>
             {children}
             <Modal visible={visible} transparent animationType="slide">
-                <View style={styles.container}>
+                <SafeAreaView style={styles.container}>
                     <WebView
                         originWhitelist={["*"]}
                         source={{ html: paystackHTML }}
@@ -101,7 +101,7 @@ export const PaystackProvider: React.FC<PaystackProviderProps> = ({
                         onLoadEnd={() => debug && console.log('[Paystack] WebView Load End')}
                         renderLoading={() => <ActivityIndicator size="large" />}
                     />
-                </View>
+                </SafeAreaView>
             </Modal>
         </PaystackContext.Provider>
     );