Using nested views has huge padding/safe areas

cjpete commented 2 months ago

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

Cannot create this component, as you get the same error referenced in this issue: https://github.com/Purchasely/Purchasely-ReactNative/issues/107 - I assume because in the react-native-purchasely folder there is the PLYPresentationViewBeta
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 commented 2 months ago

@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 commented 2 months ago

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 commented 2 months ago

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

Purchasely / Purchasely-ReactNative

Using nested views has huge padding/safe areas #136