PaywallFooterContainerView not working with New Architecture

[marcibk]

• 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
Hello there :)! I tried to implement PaywallFooterContainerView with ReactNative as described in the docs. Unfortunately the footer is cut off at the bottom, not clickable and not movable at all. Anyone figured out how this works? I also saw some open discussions about the footer not being supported for react native since start at all?
Thanks :)

    <View style={{ flex: 1 }}>
      <RevenueCatUI.PaywallFooterContainerView>
            <Text>
              Your Custom Paywall Design
          </Text>
        </RevenueCatUI.PaywallFooterContainerView>
    </View>

also tried it without a parent view.

[RCGitBot]

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

[Jethro87]

Hi @marcibk! Is the snippet you shared your full implementation so far, or do you have other parent components? If the latter, can you share a larger snippet so we can determine if anything is conflicting higher up in the tree? Can you also share the version of purchases and purchases-ui SDKs you're using as well as the iOS version of your test device? Thanks!

[garrettwesley]

Running into the same issue

[Noahkoole]

Also running into this issue.

[christophemenager]

I have the same issue, to clarify:

• It's only the case on iOS, android works fine
• There is a constant offset of around 170px (it's the same offset on the 3 different devices I tried it on)
• It's easy to reproduce, just copy-past the code in your react native documentation into a screen (I use react-navigation, either displayed as a fullScreenModal or a standard card)

I managed to fixed it this way, by adding a paddingBottom

  <RevenueCatUI.PaywallFooterContainerView
      options={{
        offering: currentOffering,
      }}
      onDismiss={() => {
        // Dismiss the paywall, i.e. remove the view, navigate to another screen, etc.
      }}
      style={{ flex: 1, paddingBottom: Platform.OS === 'android' ? 0 : 170 }}
    >
      <PaywallContent title={null} description={null} />
    </RevenueCatUI.PaywallFooterContainerView>
  );

@vegaro I hope it could help you to solve this kind of critical issue (for now the Footer component is not usable without this workaround), please tell me what I could do to help

EDIT: My bad, this fixes just the UI but buttons are not pressable...

@garrettwesley @Noahkoole did you manage to make the Footer work?

[christophemenager]

I tried downgrading to :

• 7.18.1
• 8.1.0

Both are broken

I tried another template :

• 2 Sphynx
• 5 Bengal

Both are broken

I suspect this might be linked to my react native config, but I have no time to test to roll back to previous versions. I am currently using:

• react-native 0.76.6
• expo 52.0.27
• latest react-navigation dependencies : 7.2.0
• latest react-native-screens dependency : 4.5.0
• ios version 18.2(both SE and Iphone 16 and 16 Pro)

[garrettwesley]

I tried adding a paddingBottom as well and that works as a quick hack, but none of the buttons are pressable making the Footer completely unusable

[christophemenager]

Just for the sake of centralizing information about this issue, the Support Team asked me if this problem could be reproduced on another iOS version, the answer is yes.

I tried on ios 18.1 and had the exact same issue (padding + buttons not clickable)

[christophemenager]

I think I just found the source of the problem: the new architecture:

• With the new arch enabled on RN 0.76.6, I reproduce the problem
• Without the new arch enabled on RN 0.76.6 I don't reproduce the problem

@garrettwesley @Jethro87 @marcibk can you tell us if you have the new arch enabled in your project?

[joshdholtz]

@christophemenager Thanks for looking into this and diagnosing! We will start looking into fixing this on our side today and will try to get a fix out ASAP

[garrettwesley]

Thank you @joshdholtz!

And yes @christophemenager I am running the new arch

[joshdholtz]

@christophemenager @garrettwesley So we did find why this is happening and its because the reactSetFrame is no longer being used (which we used to properly place the footer position).

There is a Reddit thread (with no answers) of somebody asking how support this. We will keep monitoring that thread for answers while also trying to explore solutions of our own.

I was hoping this was going to be a quick fix from old API to new API but don't have a clear path ATM 🤷‍♂

So in the mean time... RCT_NEW_ARCH_ENABLED=0 pod install (or an equivalent) is the current workout 😬

[christophemenager]

@joshdholtz thanks for the investigation and the update 🙏

It's a shame that the react-native team didn't document the migration from the old renderer (using reactSetFrame) to the new one.

My understanding is:

• There is no equivalent of reactSetFrame as the new architecture introduced a new renderer called Fabric which changes the mindset on how to render a native component in RN.
• This renderer provides a more "direct" connection between JS and native.
• You may have read it already, but I found an example on how to display a centered text in iOS with the new Fabric renderer

I hope those hints could help you, I am not an iOS engineer so maybe you already knew all of that!

Hope you will find a solution soon as the new architecture is becoming more and more popular as the RN team is pushing for adoption :)

[joshdholtz]

@christophemenager Oh, we did some more investigation today and it turns out that is not the issue and I was just having Friday brain moment 🫠

We are still looking into and will still reach out to some React Native maintainers that we know! Will report back as soon as we can 💪

[christophemenager]

Hi @joshdholtz 👋 Any updates on this issue?

I have seen Paywalls v2 are now released in beta for react-native and seems to support the new architecture, congrats for the launch! 🚀

However, as Paywalls v2 do not support Footer Paywalls, this does not solve this issue 😭