hey, I got some custom view in SwiftUI, I want to ...

# multiplatform

[Wojciech]

hey, I got some custom view in SwiftUI, I want to show this view as composable in shared module. Is it possible ?

[Ana Sekuloski]

I’m not sure what you want to achieve, a common UI? Then I think you should opt for Compose Multiplatform instead of KMP.

[Wojciech]

@Ana Sekuloski I want to add AdMob to app. I am using Compose Multiplatform for UI, but to implement AdMob I need to use different views for iOS/Android. It is easy for Android because it has compose and I can use wrapper:

AndroidView(
            modifier = Modifier.fillMaxWidth(),
            factory = { context ->
                AdView(context).apply { } 
            }
)

but iOS does not, so I can not use AdMob iOS API to present ad.

[Ana Sekuloski]

I don’t have much experience with Compose Multiplatform, just with Kotlin Multiplatform. Since AdMob is platform specific SDK, I assume you cannot use it on CMP/KMP project in the shared code, only on the platform specific code. Therefore as I see it, you’ll have to build two separate platform specific UIs to use AdMob views. I’ve researched a bit, seems like there is a AdMob SDK for iOS: https://developers.google.com/admob/ios/quick-start. So, as I understand it, you can add this dependency in the iOS app and use its views in the iOS project.

[Wojciech]

exactly what I am trying to do! 🙂 Then I got in share code such code:

expect class Platform {
   
    fun initAdNetwork()
    
    @Composable
    fun bannerAd(): AdConfig
}

In Android it is easy to implement it:

actual class Platform(
    private val context: Context
) {

    @Composable
    actual fun adView(adConfig: AdConfig) {
        AndroidView(
            modifier = Modifier.fillMaxWidth(),
            factory = { context ->
                AdView(context).apply {
                    adUnitId = adConfig.adId
                    loadAd(AdRequest.Builder().build())
                }
            }
        )
    }

}

and that is because we got AndroidView() whch work as wrapper to ppaltform specific android views. Also implementation is on Android project.

However for iOS we got iosMain project which is separate from iosApp (swift code). And now I am looking for a “bridge” between ios module <-> swift project where I can write actual implementation:

actual class Platform() {
    @Composable
    actual fun adView(adConfig: AdConfig) {
        IosView( <--- this class not exists
            modifier = Modifier.fillMaxWidth(),
            factory = { context ->
                GADBannerView(...) <--- GADBannerView is not accesible from ios module because it is swift project class.
            }
        )
    }
}

[Ana Sekuloski]

Why not just remove adView() and just initialize and use the views in swift/android projects? or you need the adView() function in the shared code somewhere?

[Wojciech]

that’s correct, whole UI is in shared code, so I am calling adView() there to show ad banner

[Emirhan Emmez]

Hello @Wojciech , do you have any public sample for ad usage in cmp?

[Wojciech]

hey @Emirhan Emmez no, and it worked only for Android, not for iOS yet

[Emirhan Emmez]

I did actually

[Emirhan Emmez]

referencing this article:
https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-swiftui-integration.html

[Wojciech]

could you share some demo? 😮

[Emirhan Emmez]

its production code but I ll send some code block

[Wojciech]

It would be awesome!

[Emirhan Emmez]

I ll only show ios part, I believe you can set Android part. But if you have any question I ll gladly help.
First of all you need to initialize admob for ios. Check this video:

https://www.youtube.com/watch?v=OLs5dVRdN3c▾

• Create a delegate class for initializing AdMob (AppDelegate.swift) and call in your iOSApp.swift
• After that add swiftui component from AdBannerView.swift . There was some crash when you didn't give specific height to banner. So I gave 50. It's working fine.
• Give a lambda parameter to your MainViewController fun like in MainViewController.kt . UIKitViewController is your banner view. You can freely transfer inside composables (I did like that)
• And finally describe lambda parameter for MainViewController in ContentView.swift .
If you need help let me know

AdBannerView.swiftiOSApp.swiftAdBannerView.swiftMainViewController.ktAppDelegate.swiftContentView.swift