Using nested views has huge padding/safe areas

[cjpete]

Using the nested views as documented here https://docs.purchasely.com/docs/nesting-views#react-native

1. Cannot create this component, as you get the same error referenced in this issue: Invariant Violation: Tried to register two views with the same name PurchaselyView #107 - I assume because in the react-native-purchasely folder there is the PLYPresentationViewBeta

2. Using the PLYPresentationViewBeta works, but when presented full screen, there is huge safe area padding, and the paywall itself scrolls within this smaller container, as shown in the following image.

<View style={{ flex: 1, backgroundColor: "purple" }}>
      <PLYPresentationView
        placementId="sample_placement"
        onPresentationClosed={onClose}
      />
</View>

I think if the application is rendering the purchasely native view, then it should be structured in such a way that the application is in control of its boundaries, i.e. applying safe areas or padding as needed, rather than it being handled in the native component where there is no control for the application.

[PierreCapo]

@cjpete I got the same issue too. I agree it would be nice Purchasely exposes View without the insets.
By looking to the iOS source code, it seems that the safe area inset is added as the top anchor, and the height anchor avoids also the safearea, in other words, by applying the following patch you should have a temporary workaround.

  const insets = useSafeAreaInsets();
  return (
    <View
      style={{
        flex: 1,
        marginTop: -insets.top,
        marginBottom: -(insets.bottom + insets.top),
      }}>
      <PLYPresentationView
        placementId="MAIN"
        // instead of setting a placementId, you can set a presentation instance directly
        // from the result of fetchPresentation
        //presentation={presentationForComponent}
        onPresentationClosed={callback}
      />
    </View>
  );

The last issue is the close button that is pushed too high on the screen and is placed below the status bar. A workaround for that is to set the opacity of the close button to 0 on the purchasely console, and then implement your own cross button.

For Android, it's not clear yet for me what's causing this issue.

[EPIKorial]

Hi @PierreCapo, @cjpete

Thank you for reaching out to us regarding the issue you encountered. I'm Florian, an iOS engineer here at Purchasely, and I wanted to personally let you know that I've tested the scenario you described, and you're absolutely correct—there is an issue.

I'll be diving into this right away to find a solution. Please rest assured that I'm prioritizing this, and I'll do my best to implement a fix as quickly as possible.

Your feedback is invaluable to us, as it helps improve our product for everyone. I'll keep you updated on our progress and notify you as soon as the fix is available.

Thank you again for your understanding and support.

Best regards,

Florian
iOS Engineer
Purchasely

[chouaibMo]

hi @PierreCapo @cjpete

I'm Chouaïb from the android team at Purchasely.

I would like to understand more about what's happening on Android platform.
I’ve tried to reproduce the issue on my end but wasn’t able to encounter the same problem. Could you provide additional details about the issue you're facing there? (SDK version, steps to reproduce, logs or screenshots...).

Any additional information would be greatly appreciated.

Sincerely,
Chouaïb