RC Paywall - touch event on close button gets propagated through

[asnaseer]

• 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
A clear and concise description of what the bug is. The more detail you can provide the faster our team will be able to triage and resolve the issue. Do not remove any of the steps from the template below. If a step is not applicable to your issue, please leave that step empty.

1. Environment
   1. Platform: React Native - Android
   2. SDK version: 8.9.1
   3. OS version: 14
   4. Xcode/Android Studio version:
   5. React Native version: 0.74.5
   6. SDK installation (CocoaPods + version or manual): We use Expo 51
   7. How widespread is the issue. Percentage of devices affected. All
2. Debug logs that reproduce the issue
3. Steps to reproduce, with a description of expected vs. actual behavior
   We have a screen that has button that the user can touch in order to subscribe to our app. When they touch this button we navigate to a screen that displays the paywall component as follows:

    <View style={styles.container}>
      <RevenueCatUI.Paywall
        onPurchaseCompleted={onPurchaseCompleted}
        onPurchaseStarted={onPurchaseStarted}
        onDismiss={onDismiss}
        options={{ offering: selectedOffering }}
      />
    </View>

When the user touches the close button on the RC Paywall, it invokes the onDismiss handler which then calls navigation.goBack() to take the user back to the screen they came from. However, the close button happens to be positioned just above another button in our app and this button then gets invoked. So it looks like the touch event on the RC Paywall is not being fully consumed by the RevenueCatUI.Paywall component.
4. 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.

[RCGitBot]

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

[HaleyRevcat]

Hi @asnaseer thank you for reporting this, we are looking into this and will update you on how to fix this.

[HaleyRevcat]

Hi @asnaseer can you please provide your full paywall code so we can reproduce what you are doing on our end?

[asnaseer]

I have updated the react-native-purchases and react-native-purchases-ui libs to 8.9.3 and retried our scenario to get the same crash. I also enabled the debug logs by calling Purchases.setLogLevel(Purchases.LOG_LEVEL.DEBUG); just before calling Purchases.configure(...); but did not see any RevenueCat related logs appear in my console output or the output from running npx react-native log-android in a separate terminal while my Android device was connected to my computer via a USB cable.

I did notice one thing however, when I touch the close button on the RevenueCat Paywall, it seems to take just over a second before the paywall closes. During this time, the close button remains in the enabled state. So, when I was touching the close button, I thought maybe it didn't register my touch because it did not close quickly enough, so I touched it again. That seems to be the cause of the crash. If I touch the close button just once and then wait, it closes without crashing.

I think it would be better for you to disable the close button as soon as it is touched (before calling the onDismiss callback) to prevent this crash.

Our code basically navigates to this component to display the paywall:

import { useNavigation } from "@react-navigation/native";
import { StackNavigationProp } from "@react-navigation/stack";
import React, { useState } from "react";

import { SubscribeScreenSetParams } from "../../navigation/SubscribeScreenSet";
import { RevenueCatPaywallContainer } from "../../organisms/RevenueCatPaywallContainer";

export const PaywallScreen = (): JSX.Element => {
  const [wasPurchased, setWasPurchased] = useState(false);

  const navigation =
    useNavigation<StackNavigationProp<SubscribeScreenSetParams>>();

  const onPressClose = () => {
    if (!wasPurchased) {
      navigation.goBack();
    }
  };

  const onSuccessfullPurchase = () => {
    setWasPurchased(true);
    navigation.navigate("SubscriptionConfirmation");
  };

  return (
    <RevenueCatPaywallContainer
      onPressClose={onPressClose}
      onSuccessfullPurchase={onSuccessfullPurchase}
    />
  );
};

The RevenueCatPaywallContainer is defined as follows:

import { tailwind } from "@tailwind";
import React from "react";
import { StyleSheet, View } from "react-native";
import { NativeViewGestureHandler } from "react-native-gesture-handler";
import RevenueCatUI from "react-native-purchases-ui";

interface Props {
  onPressClose: () => void;
  onSuccessfullPurchase: () => void;
}

export const RevenueCatPaywallContainer = ({
  onPressClose,
  onSuccessfullPurchase,
}: Props): JSX.Element | null => {
  // We are wrapping this in a NativeViewGestureHandler to prevent the events captured by RevenueCatUI.Paywall
  // from being propagated further - see https://github.com/RevenueCat/react-native-purchases/issues/1226
  return (
    <NativeViewGestureHandler>
      <View style={styles.container}>
        <RevenueCatUI.Paywall
          onPurchaseCompleted={onSuccessfullPurchase}
          onDismiss={onPressClose}
          options={{ offering:"default" }}
        />
      </View>
    </NativeViewGestureHandler>
  );
};

const styles = StyleSheet.create({
  container: tailwind("flex-1"),
});

[asnaseer]

@HaleyRevcat Any updates on this as we would really like to use this feature?