iOS: Empty paywall after updating Compose Multiplatform to 1.7.3

[MrJohn10]

When displaying paywall after updating Compose Multiplatform from 1.6.11 to 1.7.3 and purchases-kmp from 1.0.0+13.2.0 to 1.3.6+13.13.1 the paywall only displays an image. No text/buttons are being displayed.

purchases-kmp = "1.3.6+13.13.1"
compose-plugin = "1.7.3"
kotlin = "2.0.0"
platform = ios

[JayShortway]

Hi, thanks for reporting this! Some questions to help investigate this:

• Would you be able to share a code snippet of how you're displaying the paywall, including the PaywallOptions used?
• Does it work correctly with Compose Multiplatform 1.7.0?
• Does it work correctly on Android?

Thanks in advance!

[MrJohn10]

@Composable
fun PaywallDialog(
    displayDismissButton: Boolean = true,
    onDismiss: () -> Unit,
) {
    Paywall(PaywallOptions(dismissRequest = onDismiss) {shouldDisplayDismissButton = true})
}

It does work on android.
It does not work on iOS with compose 1.7.0

[JayShortway]

Thanks for providing that info. Unfortunately I'm not able to reproduce it on my end. Are you showing the Paywall in an alert dialog somehow? Would you be able to share a minimal reproduction project so I can take a look?

[MrJohn10]

I'm showing it as a full screen that I navigate to using org.jetbrains.androidx.navigation
I will try to reproduce in a sample project next week.

[MrJohn10]

It has to be something with the size of the screen. When testing on iPhone 16 pro, only image is visible, but after applying padding to the paywall, everything is correct. It works for 64.dp padding, it doesn't work for e.g. 16.dp padding.

    Box(Modifier.fillMaxSize().background(Color.Red).padding(64.dp)) {
        Paywall(options)
    }

Tested on the 1. paywall (Jaguar).

When testing on iPhone 8 Plus:

• image and main content is visible
• after adding padding everything is visible

Screenshots from iPhone 16 Pro:

[JayShortway]

Thanks for sharing that. That's very odd. I tried to reproduce again using template 1 specifically on an iPhone 16 simulator, but (unfortunately) it's showing fine, both with and without padding. Thanks for taking the time to create a reproducer project! I think that's our best shot.

[MrJohn10]

I wasn't able to reproduce it in a blank project.
I found a workaround in my project, everything works if I remove the initialOffsetY argument from the enter transition:

fun NavGraphBuilder.paywallScreen(navigateBack: () -> Unit) {
    composable(
        route = "paywall",
        enterTransition = { slideInVertically(
            initialOffsetY = { fullHeight -> fullHeight }, // works with this line removed
            animationSpec = tween(durationMillis = 500)
        ) },
        exitTransition = { slideOutVertically(
            targetOffsetY = { fullHeight -> fullHeight },
            animationSpec = tween(durationMillis = 500)
        ) }
    ) {
        Paywall(
            PaywallOptions(
                dismissRequest = navigateBack,
                builder = { shouldDisplayDismissButton = true }
            )
        )
    }
}

In my current paywall (when the bug occurs) I can see that the content is drawn below the screen (you can see a part of the main content text at the bottom of the screen). Colors were only for my debug purposes.

[JayShortway]

Thanks, that's an interesting finding! That triggered a bunch of questions for me haha.

1. Does it still animate in with the initialOffsetY argument removed?
2. Does the initialOffsetY argument have a default value?
3. Does the fullHeight value seem correct when you do have the initialOffsetY argument?
4. Does fullHeight have the same value in targetOffsetY?

I'm currently thinking in the direction of some kind of measurement bug.