Form sheet with inverted FlatList interferes with sheet dismiss gesture

[iankberry]

Description

I have an app that contains a chat view within a form sheet. I am using the inverted prop on the FlatList to maintain the "new items at the bottom" without needing to call scrollToBottom in a bunch of places.

However this seems to create some sort of conflict with the sheet dismiss gesture as you can see in both examples here. On iOS it causes the sheet to start dismissing when overscrolling beyond the latest item (bottom of the list). On Android it just causes the sheet contents to disappear.

iOS behavior:

Screen.Recording.2026-05-06.at.11.31.50.AM.mov

Android behavior:

Screen.Recording.2026-05-06.at.11.32.33.AM.mov

Steps to reproduce

1. Checkout the example repo
2. Run npm run ios or npm run android
3. Tap the Open sheet button
4. Attempt to overscroll by swiping up at the bottom of the list

Snack or a link to a repository

https://github.com/iankberry/formsheet-inverted-list-repro

Screens version

4.24.0

React Native version

0.83.6

Platforms

iOS

JavaScript runtime

None

Workflow

Expo bare workflow

Architecture

Fabric (New Architecture)

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[kligarski]

Hi, @iankberry. Thank you for reporting the issue.

ScrollView/FlatList uses scale(Y): -1 to handle inverted prop. This doesn't really work with native UIModalPresentationFormSheet on iOS and BottomSheetBehavior on Android. I checked pure native apps (in bare UIKit and MDC-Android respectively) and the behavior is similar:

Android	iOS
inverted_Android.mov	inverted_iOS.mov

Android reproduction

package com.example.androidinvertedscrollviewformsheetbug

import android.os.Bundle
import android.view.Gravity
import android.widget.Button
import android.widget.FrameLayout
import android.widget.LinearLayout
import android.widget.ScrollView
import android.widget.TextView
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.coordinatorlayout.widget.CoordinatorLayout
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import com.google.android.material.bottomsheet.BottomSheetBehavior

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        val dp = resources.displayMetrics.density

        val coordinator = CoordinatorLayout(this).apply {
            layoutParams = CoordinatorLayout.LayoutParams(
                CoordinatorLayout.LayoutParams.MATCH_PARENT,
                CoordinatorLayout.LayoutParams.MATCH_PARENT
            )
        }

        // Button
        val button = Button(this).apply {
            text = "Toggle Sheet"
            layoutParams = CoordinatorLayout.LayoutParams(
                CoordinatorLayout.LayoutParams.WRAP_CONTENT,
                CoordinatorLayout.LayoutParams.WRAP_CONTENT
            ).apply { gravity = Gravity.CENTER }
        }
        coordinator.addView(button)

        // Bottom sheet container
        val sheet = FrameLayout(this).apply {
            setBackgroundColor(0xFFFFFFFF.toInt())
            layoutParams = CoordinatorLayout.LayoutParams(
                CoordinatorLayout.LayoutParams.MATCH_PARENT,
                (400 * dp).toInt()
            ).apply {
                behavior = BottomSheetBehavior<FrameLayout>().apply {
                    peekHeight = (200 * dp).toInt()
                    isHideable = true
                    state = BottomSheetBehavior.STATE_HIDDEN
                }
            }
        }

        // Inverted scroll view
        val scrollView = ScrollView(this).apply {
            scaleY = -1f
            layoutParams = FrameLayout.LayoutParams(
                FrameLayout.LayoutParams.MATCH_PARENT,
                FrameLayout.LayoutParams.MATCH_PARENT
            )
            isNestedScrollingEnabled = true
        }

        val column = LinearLayout(this).apply {
            orientation = LinearLayout.VERTICAL
            layoutParams = LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.WRAP_CONTENT
            )
        }

        for (i in 0 until 40) {
            column.addView(TextView(this).apply {
                text = "Message $i"
                textSize = 16f
                scaleY = -1f
                setPadding((16 * dp).toInt(), (8 * dp).toInt(), (16 * dp).toInt(), (8 * dp).toInt())
            })
        }

        scrollView.addView(column)
        sheet.addView(scrollView)
        coordinator.addView(sheet)

        val behavior = BottomSheetBehavior.from(sheet)
        button.setOnClickListener {
            behavior.state = if (behavior.state == BottomSheetBehavior.STATE_HIDDEN)
                BottomSheetBehavior.STATE_COLLAPSED
            else
                BottomSheetBehavior.STATE_HIDDEN
        }

        setContentView(coordinator)
    }
}

iOS reproduction

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground

        let button = UIButton(type: .system)
        button.setTitle("Present Sheet", for: .normal)
        button.addTarget(self, action: #selector(presentSheet), for: .touchUpInside)
        button.frame = CGRect(x: 0, y: 0, width: 200, height: 44)
        button.center = view.center
        view.addSubview(button)
    }

    @objc private func presentSheet() {
        let vc = SheetViewController()
        vc.modalPresentationStyle = .formSheet
        if let sheet = vc.sheetPresentationController {
            sheet.detents = [.medium(), .large()]
            sheet.prefersGrabberVisible = true
        }
        present(vc, animated: true)
    }
}

class SheetViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground

        let scrollView = UIScrollView()
        scrollView.transform = CGAffineTransform(scaleX: 1, y: -1)
        scrollView.frame = view.bounds
        scrollView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.addSubview(scrollView)

        var y: CGFloat = 8
        for i in 0..<40 {
            let label = UILabel()
            label.text = "Message \(i)"
            label.font = .systemFont(ofSize: 16)
            label.frame = CGRect(x: 16, y: y, width: 300, height: 32)
            label.transform = CGAffineTransform(scaleX: 1, y: -1)
            scrollView.addSubview(label)
            y += 36
        }
        scrollView.contentSize = CGSize(width: view.bounds.width, height: y)
    }
}

Unfortunately, we're not aware of any reasonable workaround that could be implemented on react-native-screens side. There are also other problems related to how inverted prop is handled, e.g. see this issue on react-native repository.

If you have any more questions, let us know.

[iankberry]

Hi @kligarski, thanks for taking a closer look at this! I am actually aware of that that specific RN issue as I had to patch my app with the fix linked in the issue.

I wish there was a less hacky way to achieve that perfect scroll-to-bottom behavior for chat apps. The inverted prop seems to do this well but with a bunch of unwanted side effects.