IssueTracker

Jetpack Compose version: androidxComposeBom = "2024.08.00"

Jetpack Compose component used: Material3 BottomSheetScaffold, NavHostController, AndroidView

Android Studio Build: Ladybug | 2024.2.1 Patch 2

Kotlin version: "2.0.21"

Issue Title: React Native ScrollView Inside BottomSheet Requires Two-Finger Scroll Gesture in Jetpack Compose

Description: We are experiencing an issue where a ScrollView inside a React Native view, which is embedded within a Jetpack Compose BottomSheet, does not respond to the standard one-finger scroll gesture. Instead, it requires a two-finger scroll gesture to work.

In our application, we use a BottomSheet to display a React Native view, which contains a ScrollView. However, this ScrollView can only be scrolled with two fingers when it is inside the BottomSheet. The same React Native view works correctly in other parts of the application where it is embedded within an XML layout and a Fragment without Jetpack Compose.

Code Structure

Here's a simplified version of our code structure:

@Composable
fun BottomSheet(
    bottomSheetState: SheetState,
    navController: NavHostController,
    modifier: Modifier = Modifier,
) {
    BoxWithConstraints(
        modifier
            .fillMaxSize()
            .statusBarsPadding(),
    ) {
        val peekPadding = 20.dp
        val sheetPeekHeight = remember { (maxHeight * ratio) + peekPadding }
        BottomSheetScaffold(
            scaffoldState = rememberBottomSheetScaffoldState(bottomSheetState = bottomSheetState),
            sheetDragHandle = null,
            sheetContainerColor = Transparent,
            containerColor = Transparent,
            sheetContent = {
                Column(
                    modifier = Modifier
                        .fillMaxSize(),
                ) {
                    BottomSheetNavHost(navController = navController)
                }
            },
            sheetPeekHeight = sheetPeekHeight,
            sheetShape = RoundedCornerShape(
                topStart = 10.dp,
                topEnd = 10.dp,
            ),
        ) {
            // Some other ui elements
        }
    }
}

@Composable
fun BottomSheetNavHost(
    navController: NavHostController,
    modifier: Modifier = Modifier,
    startDestination: String = MyDestination.route,
) {
    NavHost(
        navController = navController,
        startDestination = startDestination,
        modifier = modifier,
    ) {
        otherGraph()

        reactNativeGraph(
            navController = navController,
        )
    }
}

fun NavGraphBuilder.reactNativeGraph(navController: NavController) {
    navigation(
        startDestination = REACT_NATIVE_NAVIGATION_ROUTE,
        route = MyDestination.route,
    ) {
        composable(
            route = REACT_NATIVE_NAVIGATION_ROUTE,
        ) {
            ReactNativeComposableView(
                navController = navController,
                component = component,
                props = props,
                modifier = modifier,
            )
        }
    }
}

@Composable
fun ReactNativeComposableView(
    navController: NavController,
    component: String,
    modifier: Modifier = Modifier,
    props: String? = null,
) {
    var initialized by rememberSaveable { mutableStateOf(false) }
    val currentBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = currentBackStackEntry?.destination?.route
    val isVisible = currentRoute?.startsWith(REACT_NATIVE_NAVIGATION_ROUTE) ?: false

    AndroidView(
        modifier = modifier.fillMaxSize(),
        factory = { context ->
            ReactNativeRootViewWrapper(
                context = context,
                component = component,
                props = props,
                navController = navController,
            )
        },
        update = { wrapper ->
            if (!initialized) {
                initialized = true
                return@AndroidView
            }

            wrapper.toggleVisibility(isVisible)
            wrapper.updatePropsThroughLaunchProperties(props)
        },
        onReset = { wrapper ->
            wrapper.destroyReactView()
        },
    )
}

import com.facebook.react.ReactRootView

class ReactNativeRootViewWrapper(
    context: Context,
    private var props: String?,
    component: String,
    private val navController: NavController,
) : FrameLayout(context), ReactNativeComposeNavigationConnector {

    private var reactContainer = ReactNativeViewContainer(context)
    private var launchParamsPropsProvider = LaunchParametersPropsProvider(props)
    private var rootView: ReactRootView
    private val reactInstanceManagerAccess: ReactInstanceManagerAccess by inject()

    init {
        reactContainer.addPropsProvider(launchParamsPropsProvider)

        rootView = reactContainer.startReactNativeComponent(component)
        rootView.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
        rootView.isNestedScrollingEnabled = true

        addView(rootView)

        reactInstanceManagerAccess.reactInstanceManager.currentReactContext?.getNativeModule(
            ReactNativeComposeNavigationModule::class.java,
        )?.setConnector(this)
    }
}

What We Have Tried

1. Nested Scroll Connections: We attempted linking the nestedScrollConnection from the BottomSheet to the ReactNativeViewWrapper, but this did not resolve the issue.
2. React Native Gesture Handler: We tried using a FlatList from the react-native-gesture-handler library, which is generally optimized for Android scrolling performance. However, this approach also did not improve the situation—only the two-finger gesture was still recognized by React Native.

Observations

• Two-Finger Gesture Required: The React Native view inside the BottomSheet only scrolls with a two-finger gesture.
• One-Finger Gesture Works Outside Compose: The same view functions as expected with a one-finger scroll when used outside of Jetpack Compose, also in an xml file.

Questions

• Is there a compatibility issue between Jetpack Compose’s BottomSheet and React Native’s ScrollView?
• Could this be an issue with our specific implementation, or a limitation in handling touch events between Jetpack Compose and React Native?

Request

We would appreciate any insights into why this behavior might be occurring and guidance on potential solutions. Thank you for your assistance!