Skip to main content
Answer

[V2] displayCloseButton: true is not rendering

  • August 20, 2025
  • 5 replies
  • 114 views
L
Forum|alt.badge.img+8

I am upgrading from Legacy to V2 paywall and am using the React Native Paywall UI component to display my paywall inside a route view.  The docs suggest having an `option` Prop passed `displayCloseButton: true` in order to render the close button:

 

<RevenueCatUI.Paywall
    onDismiss={onPressDown}
    onPurchaseCompleted={handleContinue}
    onPurchaseError={handleError}
    onRestoreCompleted={restoreComplete}
    options={{
        displayCloseButton: true,
        fontFamily: 'Inter_400Regular',

    }}
/>

However, there is no close button visible in my UI anymore. 

Any suggestions for debugging this?

Best answer by lucksp

I got an email response:

 

Yes, the displayCloseButton property was added for the Legacy Paywalls, as the close button couldn't be removed directly from the Dashboard. Adding it in the editor or removing it entirely would be enough for the newer version of Paywalls.
 
In order for the Close Button to be positioned in the corner of the Paywall, you need to configure it so that the close button is displayed on top of the image as follows: 

  • Add your image to a Stack
  • Change the Axis of the Stack to be a z-axis
  • Change the Alignment of the Stack to be Top-Right corner
  • Add the Close Button to the same Stack

 

This is tricky!!!  As a suggestion, Maybe a close button can have it be absolute positioned by default or make it easier to be designed without a stack & Axis?

Closing this as resolved.

This post has been closed for comments

5 replies

L
Forum|alt.badge.img+8
  • lucksp
  • Author
  • Helper
  • August 20, 2025
Adding a “Close Button” component in the paywall editor is not “absolute” position, so this is not an option

Additionally, I have tried the programatic method with no difference: 

RevenueCatUI.presentPaywall({ displayCloseButton: true });

L
Forum|alt.badge.img+8
  • lucksp
  • Author
  • Helper
  • Answer
  • August 22, 2025

I got an email response:

 

Yes, the displayCloseButton property was added for the Legacy Paywalls, as the close button couldn't be removed directly from the Dashboard. Adding it in the editor or removing it entirely would be enough for the newer version of Paywalls.
 
In order for the Close Button to be positioned in the corner of the Paywall, you need to configure it so that the close button is displayed on top of the image as follows: 

  • Add your image to a Stack
  • Change the Axis of the Stack to be a z-axis
  • Change the Alignment of the Stack to be Top-Right corner
  • Add the Close Button to the same Stack

 

This is tricky!!!  As a suggestion, Maybe a close button can have it be absolute positioned by default or make it easier to be designed without a stack & Axis?

Closing this as resolved.

joan-cardona
joan-cardona
RevenueCat Staff
Forum|alt.badge.img+6
  • joan-cardona
  • RevenueCat Staff
  • August 28, 2025

Hi ​@lucksp,

Yeah that’s right - we have it here in our docs but I understand that it is confusing. I’ll share your feedback with the paywalls team so they can prioritize it.

 

Best,

Joan.
L
Forum|alt.badge.img+8
  • lucksp
  • Author
  • Helper
  • September 4, 2025

The RC Close button positioning is very inconsistent between Android & iOS…

​​​​​ANDROID goes into the SAFEAREA
 

 

and

 

 

iOS goes way BELOW the header
 <Stack
      screenOptions={{
        presentation: 'modal',
        animation: 'slide_from_bottom',
        headerShown: true,
        headerTransparent: true,
        headerTitle: '',
        // headerRight: () => <TransparentButton />,
      }}
    />

 using

 

"react-native": "0.79.5",

"react-native-purchases": "^9.2.2",

"react-native-purchases-ui": "^9.2.2",

"expo": "53.0.22",

 

If I change to `headerShown: false`, iOS is better...but Android is still overlapping with the StatusBar.

 

Is there anything that can be done to better handle the header positioning between Android & iOS?

alejandra-wetsch
RevenueCat Staff
Forum|alt.badge.img+6

Hey ​@lucksp, 

Thank you for your feedback! We will try to reproduce this internally and share it with the engineering team to fix it. 

Best, 

Alejandra, Developer Support Engineer @ RevenueCat
Terms & ConditionsCookie settingsAccessibility statement