Scrolling Sheet stops scrolling correctly after one scroll on iOS with FlashList/FlatList/ScrollView #440
Description
Before submitting a new issue
- I tested using the latest version of the library.
- I tested using a supported version of React Native.
- I checked for existing issues that might answer my question.
Bug Summary
Following the guide to use scrollables in TrueSheet works for the first attempt at scrolling, however, subsequent attempts trigger the List to scroll, but TrueSheet does not scroll following the scroll gesture.
Tested using React Native 0.78.3 on iPhone 17 simulator.
Tested with version 3.7.3 and 3.5.8, behaviour remains the same.
Affected Platforms
(Did not test other than iOS)
- iOS
- Android
- Web
- Other
Library Version
3.7.3, 3.5.8
Environment Info
System:
OS: macOS 15.7.3
CPU: (14) arm64 Apple M4 Pro
Memory: 154.38 MB / 48.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 24.6.0
path: ~/.nvm/versions/node/v24.6.0/bin/node
Yarn: Not Found
npm:
version: 11.5.1
path: ~/.nvm/versions/node/v24.6.0/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.16.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 25.2
- iOS 26.2
- macOS 26.2
- tvOS 26.2
- visionOS 26.2
- watchOS 26.2
Android SDK: Not Found
IDEs:
Android Studio: 2025.1 AI-251.25410.109.2511.13752376
Xcode:
version: 26.2/17C52
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.14
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 15.1.3
wanted: ^15.1.3
react:
installed: 19.0.0
wanted: ^19.0.0
react-native:
installed: 0.78.3
wanted: ^0.78.3
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
info React Native v0.83.0 is now available (your project is running on v0.78.3).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.83.0
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.78.3&to=0.83.0
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".Steps to Reproduce
Open the list, attempt to expand sheet via scrolling up, then attempt to resize the sheet via scrolling down after a brief pause.
Video:
bug.mov
Repro
repro below
Additional Context
Example:
Attempted the same example below using FlashList, FlatList and ScrollView
I also attempted wrapping GestureHandlerRootView around the List component, which does not fix it.
<TrueSheet
name='devices'
detents={[0.1, 0.4, 0.9]}
stackBehavior='replace'
initialDetentIndex={1}
backgroundColor={'#ffffff'}
scrollable={true}
header={
<View
style={{
flexDirection: 'row',
paddingVertical: 12,
paddingHorizontal: 32,
justifyContent: 'space-between',
}}>
<Text styleName='bodyBaseMedium' text='Devices' customStyle={genericTextStyle} />
</View>
}
dimmed={false}>
<View style={{ flex: 1 }}>
<FlatList
nestedScrollEnabled={true}
data={devices}
keyExtractor={(item, index) => `${item.properties?.deviceName}-${index}`}
contentContainerStyle={{
paddingBottom: 50,
}}
renderItem={({ item }) => (
<View
style={{
flexDirection: 'row',
paddingVertical: 20,
paddingHorizontal: 32,
justifyContent: 'space-between',
borderBottomColor: '#E0E0E0',
borderBottomWidth: 1,
}}>
<Text styleName='bodySmRegular' text={item.properties?.deviceName} customStyle={genericTextStyle} />
</View>
)}
/>
</View>
</TrueSheet>