<RevenueCatUI.Paywall /> component is not clickable

[x8848]

• 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

<RevenueCatUI.Paywall /> component is not clickable after page rendered.
But start to be clickable when I switch to any other app and back

1. Environment
   1. Platform: IOS simulator iphone 15 & on device iphone XsMax
   2. SDK version: 7.21.0
   3. OS version: MacOS 14.2.1 (23C71)
   4. Xcode/Android Studio version: Xcode 15.2 (15C500b)
   5. React Native version: 0.73.4"
   6. SDK installation (CocoaPods + version or manual): Expo Development Build

[RCGitBot]

👀 We've just linked this issue to our internal tracker and notified the team. Thank you for reporting, we're checking this out!

[tonidero]

Hi @x8848, thanks for reaching out! could you provide a few pieces of information to try to diagnose this issue:

• Does this happen in iOS only, or also in Android? (in case you can try it out there)
• Could you provide some debug logs from sdk configuration, up to showing the paywall (not tappable state) and then the logs from backgrounding + foregrounding the app?

[tonidero]

Hi again @x8848, it would also be great if you could provide a minimum reproducible project that we could use. It would seem that something is making the paywall not have the focus for some reason but we haven't been able to reproduce in our test apps.

[buzlan]

@RCGitBot the same situation with this bug.

[fedarenchyk]

same issue

[tonidero]

Hi @x8848, thanks for reaching out! could you provide a few pieces of information to try to diagnose this issue:

• Does this happen in iOS only, or also in Android? (in case you can try it out there)
• Could you provide some debug logs from sdk configuration, up to showing the paywall (not tappable state) and then the logs from backgrounding + foregrounding the app?

Hi @buzlan and @fedarenchyk, if you could provide the same info I asked before, it would help us to debug the issue 🙏. Thanks!

[buzlan]

Hi @x8848, thanks for reaching out! could you provide a few pieces of information to try to diagnose this issue:

• Does this happen in iOS only, or also in Android? (in case you can try it out there)
• Could you provide some debug logs from sdk configuration, up to showing the paywall (not tappable state) and then the logs from backgrounding + foregrounding the app?

Hi @buzlan and @fedarenchyk, if you could provide the same info I asked before, it would help us to debug the issue 🙏. Thanks!

@tonidero My application is currently only working on iOS, and I need to do a lot of work to make it run on Android.
Regarding the logs, I tried to add them following the documentation, but it doesn't seem to be working. There might be an issue with the CodePush integration, as I can't see any logs from the Purchases library in Flipper or the Metro console.
Additionally, please check the functionality of the paywall in the attached video. When I background the application and then return to it, the paywall becomes clickable.

Link with video how it works.
https://drive.google.com/drive/folders/16O0FEcDOHIt4d-_2RQ7N41_PdG_sxOlq?usp=sharing

I have this logs, mb it have some reference

I have attached a screenshot with the code where I attempted to add the logs.

[tonidero]

Thanks for providing that @buzlan,

I have this logs, mb it have some reference

Those logs are actually the ones from our SDK yeah! Do you have more of them?

Another thing that would be helpful is to get an export of the view hierarchy when it's in the wrong state (taps not working). You can get that if you open the project using Xcode:

Feel free to open a ticket from our dashboard referencing this issue if you prefer to send us the docs/that file.

[vegaro]

The latest version (7.22.0) adds some extra logging with the prefix RNPaywalls - which might be able to help us figure this out. They should appear when loading the screen. If you can share some logs that contain those logs and also share what @tonidero pointed out #914 (comment) we might be able to get some hints of what's going on.

Thanks!

[vegaro]

@buzlan @x8848 are you able to share some of the logs I talked about in my previous comment? Are you still seeing this issue?

[vegaro]

We still can't reproduce this, I've been thinking about it and one question I have is if RevenueCatUI.Paywall is part of another component? In our testing app we have a Stack.Screen and its only element is PaywallScreen which returns:

return (
    <View style={styles.flex1}>
      <RevenueCatUI.Paywall/>
    </View>
);

https://github.com/RevenueCat/react-native-purchases/blob/main/examples/purchaseTesterTypescript/app/screens/PaywallScreen.tsx

Can you please take a look and check how your setup differs? Maybe it has something to do with another component wrapping RevenueCatUI.Paywall

If you could share a minimal reproducible project we would appreciate it. Thanks

[brenodt]

Hi there, we're also having this issue at the company I work at. Seems to only occur on iOS.

The code is closed-source, but I did share as much info as I could come up with in a support ticket (nº 39411).

[rikur]

There's definitely something off with the dimension calculations on iOS paywalls. For me, tapping on CTA will initially trigger the buttons below: Restore, Privacy, Terms. After closing the Privacy/Terms modal, the hitboxes are correct and tapping CTA works.

This silly workaround below fixes it, so that the first tap on CTA works:

const Paywall = () => {
  const [paddingBottom, setPaddingBottom] = useState(1)
  useEffect(() => {
    setTimeout(() => {
      setPaddingBottom(0)
    }, 250)
  }, [])

  return (
    <View style={{ flex: 1, paddingBottom }}>
      <RevenueCatUI.Paywall />
    </View>
  )
}

[vegaro]

@rikur can you provide more code than that?

I just tried a brand new app with latest RN and this super simple code and it works fine:

function App(): React.JSX.Element {
  useEffect(() => {
    Purchases.setLogLevel(Purchases.LOG_LEVEL.DEBUG);

    Purchases.configure({apiKey: '-------'});
  }, []);

  return (
    <View style={{flex: 1}}>
      <RevenueCatUI.Paywall />
    </View>
  );
}

I think the reason why we can't reproduce might be on how you're rendering your Paywall. Where are you using that const Paywall?

Thanks. Hopefully we can get to the root of this soon.