Question

Close Button is Not Visible on Android

  • 16 February 2024
  • 13 replies
  • 132 views

Badge +3

I am using react-native-purchases-ui. In my code, I have explicitly set displayCloseButton: true when calling the presentPaywallIfNeeded function. The close button is shown successfully on iOS with the teal color. However, on Android, it is not visible at all. 

 

I am using:

 

“expo”: “49.0.17”,
"react-native": "0.72.6",
"react-native-purchases": "7.21.0",
"react-native-purchases-ui": "7.21.0",

 

See examples:

ANDROID
 

Android Paywall (no close button)
​​​​

iOS

 


This post has been closed for comments

13 replies

Userlevel 5
Badge +9

Hey @chember,

Thanks for reporting this, I notified the team and I’ll let you know what we find.

Userlevel 5
Badge +9

Hey @chember,

The close button is actually there in the Android screenshot in the upper right, it’s black so it is very difficult to see against the photo. The team is now aware of this and is evaluating how best to address this, for now in order to not block your app release would it be possible for you to choose a different photo that is lighter in the corner to make the button contrast more?

Badge +2

Hi, is there any update on this?

The close button color is really blocking us from using paywalls. It blends in with the background image and makes us look like a scam app with a hard paywall.

Userlevel 5
Badge +9

Hi @mirkan,

I’ll ask the team for an update and get back to you soon.

Badge +1

Same problem here. A solution would be to make a filled circle behind the close button or to make the color selectable.

It really looks like a hard paywall ;-(

 

Userlevel 5
Badge +9

Hey all,

I pinged the engineering team for an update and will update this post with any new findings.

Userlevel 5
Badge +9

Hey all,

The engineering team is still evaluating the best fix here. If this is very urgent I recommend changing the picture so that it contrasts with the button, as you don’t have to wait for an SDK release to do that. Please let me know if you have any questions.

Userlevel 5
Badge +9

Hey all,

A workaround is available. If you disable the close button in version 7.24.0 of our React Native SDK, you can display your own close button to hide the paywall.

Badge

We have the same issue in flutter integration too.

 

Our app is about to be removed from the store because of the sub par implementation of the flutter code in android.

 

This is the final rejection issue (close button not visible) after fixing all the issues raised by google and we are using the default paywall design.

 

How hard could it be to add a parameter for setting the close button color?

Userlevel 5
Badge +9

Hey @serdarcsk,

We totally hear you, it is planned for work but the team has quite the backlog to work through to bring React Native and Flutter paywalls up to feature parity with the native paywalls and this will probably be prioritized after that work. Currently we don’t support changing the close button’s color in native Android paywalls so that work would have to be done first before this one. I’ll bring this up to the team as an additional point of feedback.

Badge

Thanks for addressing the issue @sharif . meanwhile we have been rejected once more because of the same issue even after updating the background image, and we’ve been literally blocked by google because of their never ending demands and fixes for the paywall. 

 

i was the one who called for using revenuecat paywall ui over our custom implementation because our team believed RC’s extensive experience in subscriptions and payment systems yet we start to realize that especially flutter implementation is not ready for production at the current state. 

Userlevel 5
Badge +9

Hi all,

I spoke with the engineering team and the current recommended workaround is to hide the built-in close button and overlay your own close button on top. This is available from version 7.24.0 and up. To hide the close button just call displayCloseButton on the Paywall. We’re considering allowing you to choose the close button color manually in code but due to the fact that we have to also incorporate that code into the iOS and Android native SDKs it’s not a quick fix coming soon. Apologies for the confusion, let me know how it goes with the workaround and/or if there’s anything else I can pass back to the team.

Badge +4

I don’t understand why this simple library is created in such complex way, it’s almost imposible to edit the sources and compile. I have been trying to compile but you have like more than 5 packages some of the are like the same but using other alias, like hybrid packages (not documented anywhere). 

 

It’s so simple to let us to modify the paywall layout from the sources but it’s imposible to compile, for the case of iOS it’s more simple as we can modify the pods generated files, not the case of android in which it’s very dificult or imposible to edit the 5 different AAR files.