Passing styles to Paywall in react-native-purchases-ui not working #1366
Description
- I have updated Purchases SDK to the latest version
- I have read the Contribution Guidelines
- I have searched the Community
- I have read docs.revenuecat.com
- I have searched for existing Github issues
Describe the bug
When passing styles - in this case paddingTop - via the style prop, the style it not being applied to the paywall.
Only when adding a timeout before rendering the paywall, it seems to work.
This comment let me try the timeout solution.
❌ not working example
export function PaywallScreen() {
return (
<View style={{ flex: 1, backgroundColor: "#fff" }}
<RevenueCatUI.Paywall
style={{ paddingTop: 32 }}
/>
</View>
);
}✅ working example
export function PaywallScreen() {
const [loading, setLoading] = React.useState(true);
return (
<View style={{ flex: 1, backgroundColor: "#fff" }}>
{loading ? (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<ActivityIndicator />
</View>
) : (
<RevenueCatUI.Paywall
style={{ paddingTop: 32 }}
/>
)}
</View>
);
}- Environment
- Platform: React Native, iOS simulator
- SDK version: "react-native-purchases": "9.2.2", "react-native-purchases-ui": "9.2.2",
- OS version: 15.5
- Xcode version: 16.3
- React Native version: 0.76.9 (no expo)
- SDK installation (CocoaPods + version or manual):
- How widespread is the issue. Percentage of devices affected.
- 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
Add any other context about the problem here.