Shows blank white screen when I close the modal from the X button

[PrincewillIroka]

This library is awesome, but I'm facing a little challenge with going back to the app after closing the Paystack Interface (WebView) from the X button. When I click the X button, the WebView closes, but the app shows a blank white screen. I always have to close the app and open it again at this point.

[just1and0]

Hey @PrincewillIroka,

I honestly don't understand your issue, could you maybe share a screen record so i best understand the issue. Also what version of react native are you using ?

[PrincewillIroka]

@just1and0 Thanks for the prompt response. I'm using react-native 0.59.8, here is a screen record of the issue. You'll observe that after closing the modal, I get a blank white screen.

[okechukwu0127]

I am stock on the white screen too when i click on the Cancel button and when i complete a payment.

I have a feeling that the WebView property onMessage is not been triggered, thus it stuck since the state showModal remains true
I am using "react-native": "0.59.8".

How can i resolve this issue of white screen ?

[okechukwu0127]

I was able to solve the entire issue for this plugin after some research.

PROBLEM 1 => PACKAGE GETS STUCK ON WHITE SCREEN
The reason for the white screen is because the WebView does not send a message to the RN app successfully so the app ends up been stock on the Model true visibility state.

SOLUTION
After WebView v.5, the syntax for sending data from WebView changed and the application seems to be using the old syntax which would not work anymore

Locate plugin index file at
node_modules\react-native-paystack-webview\index.js

change => postMessage(JSON.stringify(resp))
to => window.ReactNativeWebView.postMessage(JSON.stringify(resp))

Do this for both the callback: function(response) & on the onClose: function().
Once this is done, the app would no lonnger be stock on the white screen.

My app runs on the following versions
"react-native-webview": "^8.1.0",
"react-native": "0.59.8",
"react": "16.8.3",

PROBLEM 2 => PPAYMENT GETWAY WEBVIEW CONTENT IS TOO TINY

SOLUTION

Solving this is very easy.
All you need to do is add the following line of code to your head tag within the plugin

Locate plugin index file at
node_modules\react-native-paystack-webview\index.js

add this code on the head tag

so try this and THANK ME LATER
Best of luck

[just1and0]

Thanks, @okechukwu0127! seems you've cracked this one!

I'm currently running a test on the PR you sent, once I'm done I guess I can close this issue by tonight.
Really grateful you could help out and reduce my work 😅

I have been working on some cool stuff for a new release to support react-native version 0.60>, if you'd like to be a maintainer I won't mind letting you in while we build cool stuff 😏

again thanks!

[okechukwu0127]

@just1and0 thats not a problem at all.
I would always be willing to assist at my spear time.

Regards

[deveid]

I was able to solve the entire issue for this plugin after some research.

PROBLEM 1 => PACKAGE GETS STUCK ON WHITE SCREEN
The reason for the white screen is because the WebView does not send a message to the RN app successfully so the app ends up been stock on the Model true visibility state.

SOLUTION
After WebView v.5, the syntax for sending data from WebView changed and the application seems to be using the old syntax which would not work anymore

Locate plugin index file at
node_modules\react-native-paystack-webview\index.js

change => postMessage(JSON.stringify(resp))
to => window.ReactNativeWebView.postMessage(JSON.stringify(resp))

Do this for both the callback: function(response) & on the onClose: function().
Once this is done, the app would no lonnger be stock on the white screen.

My app runs on the following versions
"react-native-webview": "^8.1.0",
"react-native": "0.59.8",
"react": "16.8.3",

PROBLEM 2 => PPAYMENT GETWAY WEBVIEW CONTENT IS TOO TINY

SOLUTION

Solving this is very easy.
All you need to do is add the following line of code to your head tag within the plugin

Locate plugin index file at
node_modules\react-native-paystack-webview\index.js

add this code on the head tag
so try this and THANK ME LATER
Best of luck

Which code should be written for the tiny webpageview?

[just1and0]

@deveid I don't understand the question.

[deveid]

@just1and0 The payment gateway is tiny, so I was asking how do I magnify it without having to zoom in

[just1and0]

hey, this issue has been resolved, try upgrading the package version to the latest! that should do it 😊

[deveid]

I'm using version 2.0.2 and its tiny except when zoomed in

[okechukwu0127]

I'm using version 2.0.2 and its tiny except when zoomed in

Add this code to the head tag =>

                  <meta name="viewport" content="width=device-width, initial-scale=1.0">

Also, upgrading the package would resolve all these issues like @just1and0 just said