How to use Custom NativeAdTemplate in common main

[long06031999]

Hello,
I would like to ask how to use a custom template with NativeAd.

When I implement NativeAd, I always have to create an expect class like this:

public expect class NativeAdSmallTemplate : NativeAdTemplate

And I must implement all functions defined in your public abstract class NativeAdTemplate().

As a result, every time I create a new template, I have to re-implement many methods, which makes the process quite complex and repetitive, even though some components are reused multiple times across templates.

I have the following suggestion:

@DependsOnGoogleMobileAds
@Composable
public expect fun NativeAd(
    loadedAd: NativeAdHandler,
    nativeAdTemplate: @Composable NativeAdUiScope.(NativeAdData) -> Unit,
)

public interface NativeAdUiScope {
    public val nativeAdData: NativeAdData

    @Composable
    public fun NativeAdAdvertiser(modifier: Modifier = Modifier, content: @Composable () -> Unit = {})

    @Composable
    public fun NativeAdChoices(modifier: Modifier = Modifier)

    @Composable
    public fun NativeAdMedia(modifier: Modifier = Modifier)

    @Composable
    public fun NativeAdPrice(modifier: Modifier = Modifier, content: @Composable () -> Unit = {})

    @Composable
    public fun NativeAdStarRating(modifier: Modifier = Modifier, content: @Composable () -> Unit = {})

    @Composable
    public fun NativeAdStore(modifier: Modifier = Modifier, content: @Composable () -> Unit = {})

    @Composable
    public fun NativeAdAttribution(modifier: Modifier = Modifier, text: String = "Ad")

    @Composable
    public fun NativeAdHeadline(modifier: Modifier = Modifier, content: @Composable () -> Unit = {})

    @Composable
    public fun NativeAdIcon(modifier: Modifier = Modifier)

    @Composable
    public fun NativeAdBody(modifier: Modifier = Modifier, content: @Composable () -> Unit = {})

    @Composable
    public fun NativeAdCallToAction(modifier: Modifier = Modifier, content: @Composable () -> Unit = {})
}

in android side

public class AndroidNativeAdUiScope(
    override val nativeAdData: NativeAdData
) : NativeAdUiScope {
    @Composable
    override fun NativeAdAdvertiser(
        modifier: Modifier,
        content: @Composable (() -> Unit)
    ) {
        val nativeAdView =
            LocalNativeAdView.current ?: throw IllegalStateException("NativeAdView null")
        AndroidView(
            factory = { context ->
                ComposeView(context).apply {
                    id = View.generateViewId()
                    setContent(content)
                    nativeAdView.advertiserView = this
                }
            },
            modifier = modifier,
            update = { view -> view.setContent(content) },
        )
    }

    @Composable
    override fun NativeAdChoices(
        modifier: Modifier
    ) {
        val nativeAdView =
            LocalNativeAdView.current ?: throw IllegalStateException("NativeAdView null")
        val localContext = LocalContext.current
        AndroidView(
            factory = {
                AdChoicesView(localContext).apply {
                    minimumWidth = 15
                    minimumHeight = 15
                }
            },
            update = { view -> nativeAdView.adChoicesView = view },
            modifier = modifier,
        )
    }

    @Composable
    override fun NativeAdMedia(
        modifier: Modifier
    ) {
        val nativeAdView =
            LocalNativeAdView.current ?: throw IllegalStateException("NativeAdView null")
        val localContext = LocalContext.current
        AndroidView(
            factory = { MediaView(localContext) },
            update = { view ->
                nativeAdView.mediaView = view
            },
            modifier = modifier,
        )
    }

    @Composable
    override fun NativeAdPrice(
        modifier: Modifier,
        content: @Composable (() -> Unit)
    ) {
        val nativeAdView =
            LocalNativeAdView.current ?: throw IllegalStateException("NativeAdView null")
        val localContext = LocalContext.current
        val localComposeView =
            remember { ComposeView(localContext).apply { id = View.generateViewId() } }
        AndroidView(
            factory = {
                nativeAdView.priceView = localComposeView
                localComposeView.apply { setContent(content) }
            },
            modifier = modifier,
        )
    }

    @Composable
    override fun NativeAdStarRating(
        modifier: Modifier,
        content: @Composable (() -> Unit)
    ) {
        val nativeAdView =
            LocalNativeAdView.current ?: throw IllegalStateException("NativeAdView null")
        val localContext = LocalContext.current
        val localComposeView =
            remember { ComposeView(localContext).apply { id = View.generateViewId() } }
        AndroidView(
            factory = {
                nativeAdView.starRatingView = localComposeView
                localComposeView.apply { setContent(content) }
            },
            modifier = modifier,
        )
    }

    @Composable
    override fun NativeAdStore(
        modifier: Modifier,
        content: @Composable (() -> Unit)
    ) {
        val nativeAdView =
            LocalNativeAdView.current ?: throw IllegalStateException("NativeAdView null")
        val localContext = LocalContext.current
        val localComposeView =
            remember { ComposeView(localContext).apply { id = View.generateViewId() } }
        AndroidView(
            factory = {
                nativeAdView.storeView = localComposeView
                localComposeView.apply { setContent(content) }
            },
            modifier = modifier,
        )
    }

    @Composable
    override fun NativeAdAttribution(
        modifier: Modifier,
        text: String
    ) {
        Box(
            modifier =
                modifier
                    .background(ButtonDefaults.buttonColors().containerColor)
                    .clip(ButtonDefaults.shape)
        ) {
            Text(color = ButtonDefaults.buttonColors().contentColor, text = text)
        }
    }

    @Composable
    override fun NativeAdHeadline(modifier: Modifier, content: @Composable () -> Unit) {
        val nativeAdView =
            LocalNativeAdView.current ?: throw IllegalStateException("NativeAdView null")
        val localContext = LocalContext.current
        val localComposeView =
            remember { ComposeView(localContext).apply { id = View.generateViewId() } }
        AndroidView(
            factory = {
                nativeAdView.headlineView = localComposeView
                localComposeView.apply {
                    setContent(content)
                }
            },
            modifier = modifier,
        )
    }

    @Composable
    override fun NativeAdIcon(modifier: Modifier) {
        val nativeAdView =
            LocalNativeAdView.current ?: throw IllegalStateException("NativeAdView null")
        val localContext = LocalContext.current
        val localComposeView =
            remember { ComposeView(localContext).apply { id = View.generateViewId() } }
        AndroidView(
            factory = {
                nativeAdView.iconView = localComposeView
                localComposeView.apply {
                    setContent {
                        nativeAdData.icon?.let { icon ->
                            icon.drawable?.toBitmap()?.let { bitmap ->
                                Image(
                                    modifier = Modifier.clip(RoundedCornerShape(8.dp)),
                                    bitmap = bitmap.asImageBitmap(),
                                    contentDescription = "Icon"
                                )
                            }
                        } ?: Box(
                            modifier = Modifier
                                .width(80.dp)
                                .aspectRatio(1f)
                                .clip(RoundedCornerShape(8.dp))
                                .background(Color.White)
                        )
                    }
                }
            },
            modifier = modifier,
        )
    }

    @Composable
    override fun NativeAdBody(modifier: Modifier, content: @Composable () -> Unit) {
        val nativeAdView =
            LocalNativeAdView.current ?: throw IllegalStateException("NativeAdView null")
        val localContext = LocalContext.current
        val localComposeView =
            remember { ComposeView(localContext).apply { id = View.generateViewId() } }
        AndroidView(
            factory = {
                nativeAdView.bodyView = localComposeView
                localComposeView.apply {
                    setContent(content)
                }
            },
            modifier = modifier,
        )
    }

    @Composable
    override fun NativeAdCallToAction(modifier: Modifier, content: @Composable () -> Unit) {
        val nativeAdView =
            LocalNativeAdView.current ?: throw IllegalStateException("NativeAdView null")
        val localContext = LocalContext.current
        val localComposeView =
            remember { ComposeView(localContext).apply { id = View.generateViewId() } }
        AndroidView(
            factory = {
                nativeAdView.callToActionView = localComposeView
                localComposeView.apply {
                    setContent(content)
                }
            },
            modifier = modifier,
        )
    }
}

so my implement just re-write in common main (not in platform side)

private fun NativeAdUiScope.NativeAdSmallTemplate(nativeAd: NativeAdData){
     Column(
        modifier = Modifier
            .fillMaxWidth()
            .height(95.sdp)
            .border(
                1.sdp,
                MaterialTheme.englishPalette.outline,
                RoundedCornerShape(8.sdp)
            )
            .background(colors.last(), RoundedCornerShape(8.sdp))
            .padding(12.sdp)
    ) {
        Row {
            NativeAdIcon()
NativeAdHeadline {}
.......
}
}
}

And Use

NativeAd(
          loadedAd = nativeAdHandler,
          nativeAdTemplate = { nativeAd ->
                          NativeAdSmallTemplate(nativeAd)
          },
)

[robertjamison]

Thank you for the detailed analysis!
I agree that the current NativeAdDefault approach is pretty lack-luster.

I'll look at implementing your recommendation later this week, possibly as part of v1.1.0-beta02.

[robertjamison]

Pushing to v1.1.0-beta03 due to urgent feature / security update.
Still publishing this weekend.

[robertjamison]

I think I'll have to break user-space for this update -- specifically NativeAds.
I believe it will be worth it as implementation goes from 1,000 lines of code to just 60.

[robertjamison]

I wasn't able to finish it this weekend, but I think I'll get it out in v1.1.0-beta04, which should be the last beta before v1.1.0.

The good news is that you will be able to build in exclusively commonMain by extending a NativeAdTemplate interface.
I'm hoping that iOS will start passing tests soon.

[long06031999]

Thank you for your hard work
Can you push commit about it ?
And how can i contribute for it ?
@robertjamison

[robertjamison]

I've been posting my commits in the NativeAdTemplate branch. Feel free to dissect it.

[robertjamison]

iOS side is still unstable, but I don't want to delay putting it out there for Android devs to use and iOS devs to improve.