kotlin-multiplatformcompose-multiplatformswiftui-scrollview

Compose Multiplatform Composable View not scrolling in IOS Scroll view when scrolled from Composable View


I integrated a composable view into my Compose Multiplatform project and embedded it within an iOS UIScrollView. I expected the scroll view to function as intended, allowing smooth vertical or horizontal scrolling.

The setup worked perfectly with version 1.6.10 of the org.jetbrains.compose plugin. However, after upgrading to version 1.7.3 (the latest version currently available), the scroll view stopped responding to gestures, suggesting a possible conflict between the composable view’s gesture handling and the UIScrollView's scroll gestures. If you watch carefully when i scroll from the Composable View part in the android device its working fine but in IOS part its not scrolling at all when scrolling from the Composable View. Also checked but there are no errors faced just that scroll behaviour is not proper as compared to the android side.

Here is my code:

ContentView.Swift

import SwiftUI
import candlestickchart

struct ContentView: View {
    var body: some View {
        ScrollView {
            Rectangle().fill(Color.red).frame(maxWidth: .infinity).frame(height: 300)
            ComposeView().frame(maxWidth: .infinity).frame(height: 300)
            Rectangle().fill(Color.red).frame(maxWidth: .infinity).frame(height: 300)
        }
        
    }
}

struct ComposeView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        return MainKt.MainView().view
    }
    func updateUIView(_ uiView: UIView, context: Context) {}
}
Ios Main.kt

fun MainView() = ComposeUIViewController(configure = { enforceStrictPlistSanityCheck = false }) {
    TestComposable()
}
TestComposable.kt

@Composable
fun TestComposable() {
    Box(
        modifier = Modifier.background(Color.Cyan).fillMaxWidth()
            .height(350.dp)
    )
}
MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            Column(modifier = Modifier
                .verticalScroll(rememberScrollState())
                .fillMaxWidth()
                .wrapContentHeight()) {
                Box(
                    modifier = Modifier
                        .background(Color.Red)
                        .fillMaxWidth()
                        .height(350.dp)
                )
                TestComposable()
                Box(
                    modifier = Modifier
                        .background(Color.Red)
                        .fillMaxWidth()
                        .height(350.dp)
                )
            }
        }
    }
}

Also here is the video for both platforms:
IOS Scroll Video: https://drive.google.com/file/d/10deK60g54WTQBAPrRrOAu7hxKvaKIdK1/view?usp=sharing
Android Scroll Video: https://drive.google.com/file/d/1BW5v3xleOPVazFT26udfDAfcW1_GlEF\_/view?usp=sharing


Solution

  • I ran into the same issue in my project, and after debugging, I traced it back to a regression in compose-multiplatform-core.

    The root cause is documented in this pull request:

    - https://github.com/JetBrains/compose-multiplatform-core/pull/1818

    Upgrading the Compose Multiplatform plugin to version 1.8.0 resolves the issue, as the fix has been included in that release.