Skip to main content
Question

Paywall component disappears from the page


Forum|alt.badge.img+1

I have an application on React native Expo. In this application I want to show Paywall.
I use expo@51.0.36 and expo-router@3.5.23. OS - android. Same problem on physical device and emulator. 

import { View } from 'react-native';
import RevenueCatUI from 'react-native-purchases-ui';

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

When I open a page with Paywall component, everything works, the component is displayed correctly. But if you go to another page and go back to the page with Paywall, the component disappears. 

What could be the problem?

This post has been closed for comments

4 replies

Forum|alt.badge.img+1
  • Author
  • New Member
  • 2 replies
  • October 9, 2024

So far I've come to this decision.  

 const [key, setKey] = useState('1');

  useFocusEffect(
    useCallback(() => {
      setKey(new Date().toISOString());

      return () => {};
    }, [])
  );

 <View style={styles.container}>
      <RevenueCatUI.Paywall key={key} />
 </View>

It's working. But if I use FooterContainer, the application crashes

<RevenueCatUI.PaywallFooterContainerView key={key}>
            <Text>Your Custom Paywall Design</Text>
 </RevenueCatUI.PaywallFooterContainerView>


 


jeffrey_bunn
RevenueCat Staff
Forum|alt.badge.img+6
  • RevenueCat Staff
  • 139 replies
  • October 16, 2024

Hi @Denton - for the first issue, are you dismissing the full paywall and opening it again? Or, are you pushing another route on top of the paywall and attempting to go back to the paywall? Can you share debug logs for both of the issues you’re experiencing?

It sounds like the first issue might be a component lifecycle issue, while it’s tough to debug the second without logs. I’ll share our documentation on displaying paywalls as well - can you also try the `presentPaywall` method of showing the paywall for the first issue and let me know if you continuing experiencing errors?

Thanks!


Forum|alt.badge.img+1
  • Author
  • New Member
  • 2 replies
  • October 17, 2024

Hi @jeffrey_bunn

I'm using
 'expo-router/drawer'
@react-navigation/drawer@6.7.2 
 

    <Drawer
        drawerContent={CustomDrawerMenu}
        screenOptions={({ navigation }) => ({
          drawerItemStyle: { marginVertical: 0 },
          headerTitleAlign: 'center',
          drawerLabelStyle: {
            fontSize: 16,
            marginLeft: -20,
          },
          headerTintColor: colors.primary,
        })}
      >

        <Drawer.Screen
          name="settings"
          options={{
            drawerLabel: t('settingsMenu'),
            title: t('settingsMenu'),
            drawerIcon: ({ size, color }) => <Icon source="cog" size={size} color={color} />,
            headerTitle: (props) => (
              <HeaderTitle text={t('settingsMenu')} icon="cog-outline" color={props.tintColor} />
            ),
          }}
        />
        <Drawer.Screen
          name="paywall"
          options={{
            drawerLabel: 'Paywall Test',
            title: 'Paywall Test',
            drawerIcon: ({ size, color }) => <Icon source="crown" size={size} color={color} />,
            headerTitle: (props) => (
              <HeaderTitle text='Paywall Test' icon="crown" color={props.tintColor} />
            ),
          }}
        />

        <Drawer.Screen
          name="about"
          options={{
            drawerLabel: t('aboutMenu'),
            title: t('aboutMenu'),
            drawerIcon: ({ size, color }) => (
              <Icon source="information" size={size} color={color} />
            ),
            headerTitle: (props) => (
              <HeaderTitle
                text={t('aboutMenu')}
                icon="information-outline"
                color={props.tintColor}
              />
            ),
          }}
        />
      </Drawer>

‘Paywall Test’ page code:

import { View } from 'react-native';
import RevenueCatUI from 'react-native-purchases-ui';
const PaywallPage = () => {
  return (
    <View style={{ flex: 1 }}>
      <RevenueCatUI.Paywall />
    </View>
  );
};
export default PaywallPage;

When I open the Paywall Test page from the menu (Drawer) I see the Paywall Test page with Paywall.  I can select a product, I can buy a product, etc. 
But if I go to the About page for example, or any other page of the application, and then return to the Paywall Test page, it is empty.

And if I add another View with height for example 20 and background color “red”, this View will be visible at the bottom of the page, as if the <RevenueCatUI.Paywall /> component is still displayed.

RevenueCatUI.presentPaywall and RevenueCatUI.presentPaywallIfNeeded work fine. At the moment I am displaying Paywall using RevenueCatUI.presentPaywallIfNeeded and custom DrawerItem.

 

<DrawerItem
  label={!isSubscribed ? t('getPremium') : t('premiumPageTitle')}
  labelStyle={{
    fontSize: 16,
    marginLeft: -20,
  }}
  icon={({ focused, color, size }) => (
    <Icon color={colors.secondary} size={size} source="crown" />
  )}
  onPress={
    isSubscribed ? () => router.navigate('/user/user-subscription') : presentPaywallIfNeeded
  }
/>

Screenshots

 

 


jeffrey_bunn
RevenueCat Staff
Forum|alt.badge.img+6
  • RevenueCat Staff
  • 139 replies
  • October 23, 2024

@Denton It’s good to hear that presentPaywallIfNeeded is working for you. Regarding the other issue, can you set up component lifecycle listeners with logging on the paywall view and see if that helps us get to the bottom of this?


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings