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>

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!

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

@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?