react-native-purchases
react-native-purchases copied to clipboard
Vertical position of close button on paywall on Android does not match design
- [x] I have updated Purchases SDK to the latest version
- [x] I have read the Contribution Guidelines
- [x] I have searched the Community
- [x] I have read docs.revenuecat.com
- [x] I have searched for existing Github issues
Describe the bug
This is one of the paywalls that we have designed using your paywall editor:
and this is what it looks like on Android:
the same design looks like this on an iOS device:
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"),
});
- Environment
- Platform: Expo 52 with React Native (not new architecture)
- SDK version: 8.11.3
- OS version: iOS 18.5, Android 14
- Xcode/Android Studio version:
- React Native version: 0.76.9
- SDK installation (CocoaPods + version or manual):
- How widespread is the issue. Percentage of devices affected. 100%
- Debug logs that reproduce the issue
- Steps to reproduce, with a description of expected vs. actual behavior
- 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.