[BUG] mixBlendMode inside a ScrollView doesnt work
Open
@jorge-cab is already working on this.
Since Mar 17, 2025.
Component: ScrollView
Needs: Triage :mag:
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
Description
When using a mixBlendMode: 'overlay' on a , wont work when is wrapped with a however works as expected outside of a ScrollView
Steps to reproduce
<View style={{ flex: 1 }}>
<Text style={{ mixBlendMode: 'overlay' }}>This is blended</Text>
<ScrollView>
<Text style={{ mixBlendMode: 'overlay' }}>This wont be blended</Text>
</ScrollView>
</View>
React Native Version
0.77.1
Affected Platforms
Runtime - Android, Runtime - iOS
Output of npx @react-native-community/cli info
info Fetching system and libraries information...
System:
OS: macOS 15.3.1
CPU: (16) arm64 Apple M3 Max
Memory: 564.55 MB / 48.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 23.9.0
path: /opt/homebrew/bin/node
Yarn:
version: 1.22.22
path: /opt/homebrew/bin/yarn
npm:
version: 10.9.2
path: /opt/homebrew/bin/npm
Watchman:
version: 2025.03.03.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.2
- iOS 18.2
- macOS 15.2
- tvOS 18.2
- visionOS 2.2
- watchOS 11.2
Android SDK:
API Levels:
- "33"
- "34"
- "35"
Build Tools:
- 30.0.3
- 33.0.0
- 33.0.1
- 34.0.0
- 35.0.0
System Images:
- android-28 | Google ARM64-V8a Play ARM 64 v8a
- android-29 | Google Play ARM 64 v8a
- android-30 | Google Play ARM 64 v8a
- android-31 | Google Play ARM 64 v8a
- android-34 | Intel x86_64 Atom
- android-34 | Google APIs ARM 64 v8a
- android-35-ext14 | Google Play ARM 64 v8a
- android-35 | Google Play ARM 64 v8a
Android NDK: 22.1.7171670
IDEs:
Android Studio: 2024.2 AI-242.23726.103.2422.13016713
Xcode:
version: 16.2/16C5032a
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": Not Found
react:
installed: 18.3.1
wanted: 18.3.1
react-native:
installed: 0.77.1
wanted: 0.77.1
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Stacktrace or Logs
None
Reproducer
https://github.com/Amurmurmur/rn-mixblendmode-bug
Screenshots and Videos
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.