react-native-purchases icon indicating copy to clipboard operation
react-native-purchases copied to clipboard

Vertical position of close button on paywall on Android does not match design

Open asnaseer opened this issue 4 months ago • 5 comments

Describe the bug This is one of the paywalls that we have designed using your paywall editor: Image

and this is what it looks like on Android: Image

the same design looks like this on an iOS device: Image

As you can see, the top of the paywall seems to be chopped off on Android and it displays the safe area on Android. In addition, we had to move the close button down quite a lot in order for it to appear in the rendered version on Android.

Due to this, we have had to create two separate versions of our paywall - one for iOS devices and one for Android devices. We would like to be able to have just a single design that works on both iOS and Android correctly.

This is a snippet of the code we use to render your paywall:

export const RevenueCatPaywallContainer = (): JSX.Element => {
  ...
  return (
    <View style={styles.container}>
      <RevenueCatUI.Paywall
        key={`paywall-${forceRenderKey}`}
        onPurchaseCompleted={onPurchaseCompleted}
        onPurchaseStarted={onPurchaseStarted}
        onDismiss={onDismiss}
        options={{ offering: selectedOffering }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: tailwind("flex-1"),
});
  1. Environment
    1. Platform: Expo 52 with React Native (not new architecture)
    2. SDK version: 8.11.3
    3. OS version: iOS 18.5, Android 14
    4. Xcode/Android Studio version:
    5. React Native version: 0.76.9
    6. SDK installation (CocoaPods + version or manual):
    7. How widespread is the issue. Percentage of devices affected. 100%
  2. Debug logs that reproduce the issue
  3. Steps to reproduce, with a description of expected vs. actual behavior
  4. Other information (e.g. stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, etc.)

Additional context The paywalls we design via your web page seem to match what we see on iOS devices. Its just Android devices that seem to have the issue.

asnaseer avatar Jun 09 '25 15:06 asnaseer