Skip to main content

Dear RevenueCat, Thank you for the Paywall functionality.

How can I customise the close button color in Swift?

Hi! That is not something that is currently possible through our Paywall functionality, but I can understand the appeal of being able to customize the color of the close button. I am going to share this improvement internally


If you would like to specify the color of the Close button outside of the Paywall functionality, it does use your app’s tint color, so you could specify its color through that as well. Here is the documentation for tintColor.


Alternatively you can override it using the SwiftUI modifier:

PaywallView(displayCloseButton: true)
.tintColor(Color.blue)

We’ll add a note for this in the documentation 👍


 @NachoSoto I was about to ask this but for the react native paywall implementation. Is that something we can also override with RN? Thanks


@wes_clark @NachoSoto 

I would also like to know how to change the color of the close button in Flutter using 

await RevenueCatUI.presentPaywallIfNeeded(
entitlementIdentifier,
displayCloseButton: true);

 


Any answers on how to change the Close Button in Flutter?

This is very important, depending on the Image being used, the close button cannot be seen, this would cause users to be frustrated.

 

Thanks...


@jedipixels Here is an answer I received 10 days ago: https://community.revenuecat.com/sdks-51/close-button-color-in-flutter-paywalls-4271?tid=4271&postid=13767#post13767


Thanks for the link, I am looking forward to it. 

To address my issue I created a Stateless Widget and used ```PaywallView()```

The following is my code just in case it will help someone else with the same issue.

class Paywall extends StatelessWidget {
const Paywall({super.key});

static const String route = '/paywall';

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
automaticallyImplyLeading: false,
actions:
IconButton.filledTonal(
onPressed: () => Navigator.of(context).pop(),
icon: const Icon(Icons.close),
style: ButtonStyle(
foregroundColor: MaterialStatePropertyAll(ThemeColors.white),
backgroundColor: MaterialStatePropertyAll(
Theme.of(context).primaryColor.withOpacity(0.4)),
),
),
],
),
extendBodyBehindAppBar: true,
body: SafeArea(
top: false,
child: PaywallView(
// Optional Offering object obtained through getOfferings
// offering: offering,
onRestoreCompleted: (CustomerInfo customerInfo) {
// Optional listener. Called when a restore has been completed.
// This may be called even if no entitlements have been granted.
},
onDismiss: () {
// Dismiss the paywall, i.e. remove the view, navigate to another screen, etc.
// Will be called when the close button is pressed (if enabled) or when a purchase succeeds.
Navigator.of(context).pop();
},
),
),
);
}
}

 


Hi
I’m using latest Revenucat iOS SDK v5.7.1 & presenting full PaywallViewController screen using below code

let controller = PaywallViewController(displayCloseButton: true)
controller.delegate = self
controller.modalPresentationStyle = .fullScreen
self.present(controller, animated: true, completion: nil)

On implementing above code, Paywall screen shows NavigationBar with white background color, also it shows close (X) button in black color on top right corner on white background navigation bar.
Question is
1. How can I change white navigation bar color to clearColor &
2. How can I change close(x) button color to white color ?


@amol If you are using RevenueCat paywall web editor, you can change the color of the close button there now.


Reply