Skip to content

Commit aaa0684

Browse files
bigcupcoffeemeta-codesync[bot]
bigcupcoffee
authored and
meta-codesync[bot]
committed
feat: Add mixBlendMode add-lighter (#56278)
Summary: Adds missing `mixBlendMode: 'plus-lighter'` which has full support on CSS across all browsers (as opposed to, for example, `plus-darker`) iOS: ended up using linear dodge blend mode which should be identical, I tried using `@"addition"` which should've used `CIAdditionCompositing` but that didn't work, although I did confirm `maximum` does work and apply `CIMaximumCompositing`, funny stuff, can't wait for SwiftUI layer to take this over Android works as expected with its `BlendMode.PLUS` ## Changelog: [GENERAL] [ADDED] - Add mixBlendMode plus-lighter Pull Request resolved: #56278 Test Plan: <img width="726" height="822" alt="image" src="https://github.com/user-attachments/assets/6f8a235c-f79b-4739-9d6c-90c989bad5f5" /> Reviewed By: javache, jorge-cab Differential Revision: D98842036 Pulled By: NickGerleman fbshipit-source-id: 3f4bf83918276579c48c784479d2a20bf2a2ba4c
1 parent d92e70b commit aaa0684

8 files changed

Lines changed: 75 additions & 59 deletions

File tree

‎packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -365,7 +365,8 @@ export type BlendMode =
365365
| 'hue'
366366
| 'saturation'
367367
| 'color'
368-
| 'luminosity';
368+
| 'luminosity'
369+
| 'plus-lighter';
369370

370371
export type LinearGradientValue = {
371372
type: 'linear-gradient';

‎packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -838,7 +838,8 @@ type ____BlendMode_Internal =
838838
| 'hue'
839839
| 'saturation'
840840
| 'color'
841-
| 'luminosity';
841+
| 'luminosity'
842+
| 'plus-lighter';
842843

843844
export type ____ViewStyle_InternalBase = Readonly<{
844845
backfaceVisibility?: 'visible' | 'hidden',

‎packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -567,6 +567,9 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
567567
case BlendMode::Luminosity:
568568
self.layer.compositingFilter = @"luminosityBlendMode";
569569
break;
570+
case BlendMode::PlusLighter:
571+
self.layer.compositingFilter = @"linearDodgeBlendMode";
572+
break;
570573
case BlendMode::Normal:
571574
self.layer.compositingFilter = nil;
572575
break;

‎packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BlendModeHelper.kt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ internal object BlendModeHelper {
5454
"saturation" -> BlendMode.SATURATION
5555
"color" -> BlendMode.COLOR
5656
"luminosity" -> BlendMode.LUMINOSITY
57+
"plus-lighter" -> BlendMode.PLUS
5758
else -> throw IllegalArgumentException("Invalid mix-blend-mode name: $mixBlendMode")
5859
}
5960
}

‎packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropSerializer.cpp‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -530,6 +530,9 @@ void packMixBlendMode(
530530
case BlendMode::Luminosity:
531531
blendModeStr = "luminosity";
532532
break;
533+
case BlendMode::PlusLighter:
534+
blendModeStr = "plus-lighter";
535+
break;
533536
default:
534537
throw std::runtime_error("Unknown blend mode");
535538
}

‎packages/react-native/ReactCommon/react/renderer/graphics/BlendMode.h‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ enum class BlendMode {
2929
Saturation,
3030
Color,
3131
Luminosity,
32+
PlusLighter,
3233
};
3334

3435
inline std::optional<BlendMode> blendModeFromString(std::string_view blendModeName)
@@ -65,6 +66,8 @@ inline std::optional<BlendMode> blendModeFromString(std::string_view blendModeNa
6566
return BlendMode::Color;
6667
} else if (blendModeName == "luminosity") {
6768
return BlendMode::Luminosity;
69+
} else if (blendModeName == "plus-lighter") {
70+
return BlendMode::PlusLighter;
6871
} else {
6972
return std::nullopt;
7073
}
@@ -105,6 +108,8 @@ inline std::string toString(const BlendMode &blendMode)
105108
return "color";
106109
case BlendMode::Luminosity:
107110
return "luminosity";
111+
case BlendMode::PlusLighter:
112+
return "plus-lighter";
108113
default:
109114
abort();
110115
}

‎packages/react-native/ReactNativeApi.d.ts‎

Lines changed: 58 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* This source code is licensed under the MIT license found in the
55
* LICENSE file in the root directory of this source tree.
66
*
7-
* @generated SignedSource<<093ad6137fc6ea19fc24f5449a183065>>
7+
* @generated SignedSource<<481366a332c1435df38ef98031869bb9>>
88
*
99
* This file was generated by scripts/js-api/build-types/index.js.
1010
*/
@@ -590,6 +590,7 @@ declare type ____BlendMode_Internal =
590590
| "multiply"
591591
| "normal"
592592
| "overlay"
593+
| "plus-lighter"
593594
| "saturation"
594595
| "screen"
595596
| "soft-light"
@@ -5998,17 +5999,17 @@ export {
59985999
AccessibilityValue, // cf8bcb74
59996000
ActionSheetIOS, // b558559e
60006001
ActionSheetIOSOptions, // 1756eb5a
6001-
ActivityIndicator, // 0fbc1b53
6002-
ActivityIndicatorProps, // 64ab03e1
6002+
ActivityIndicator, // b7929377
6003+
ActivityIndicatorProps, // 327327a4
60036004
Alert, // 5bf12165
60046005
AlertButton, // bf1a3b60
60056006
AlertButtonStyle, // ec9fb242
60066007
AlertOptions, // a0cdac0f
60076008
AlertType, // 5ab91217
60086009
AndroidKeyboardEvent, // e03becc8
6009-
Animated, // f39d3c6f
6010+
Animated, // b39057e6
60106011
AppConfig, // ebddad4b
6011-
AppRegistry, // 6cdee1d6
6012+
AppRegistry, // f7a253e4
60126013
AppState, // 12012be5
60136014
AppStateEvent, // 80f034c3
60146015
AppStateStatus, // 447e5ef2
@@ -6018,7 +6019,7 @@ export {
60186019
BackPressEventName, // 4620fb76
60196020
BlurEvent, // 870b9bb5
60206021
BoxShadowValue, // b679703f
6021-
Button, // ef82aed4
6022+
Button, // 12c96cf0
60226023
ButtonProps, // 3c081e75
60236024
Clipboard, // 41addb89
60246025
CodegenTypes, // adbc477c
@@ -6037,8 +6038,8 @@ export {
60376038
DimensionsPayload, // 653bc26c
60386039
DisplayMetrics, // 1dc35cef
60396040
DisplayMetricsAndroid, // 872e62eb
6040-
DrawerLayoutAndroid, // 5659aca9
6041-
DrawerLayoutAndroidProps, // 66371296
6041+
DrawerLayoutAndroid, // 21d003c0
6042+
DrawerLayoutAndroidProps, // d0c886d4
60426043
DrawerSlideEvent, // cc43db83
60436044
DropShadowValue, // e9df2606
60446045
DynamicColorIOS, // d96c228c
@@ -6053,8 +6054,8 @@ export {
60536054
EventSubscription, // b8d084aa
60546055
ExtendedExceptionData, // 5a6ccf5a
60556056
FilterFunction, // bf24c0e3
6056-
FlatList, // da903f7f
6057-
FlatListProps, // 30719d0d
6057+
FlatList, // 91757c22
6058+
FlatListProps, // 164888a2
60586059
FocusEvent, // 529b43eb
60596060
FontVariant, // 7c7558bb
60606061
GestureResponderEvent, // b466f6d6
@@ -6066,34 +6067,34 @@ export {
60666067
IEventEmitter, // fbef6131
60676068
IOSKeyboardEvent, // e67bfe3a
60686069
IgnorePattern, // ec6f6ece
6069-
Image, // 957b3726
6070-
ImageBackground, // 06d5af5c
6071-
ImageBackgroundProps, // 473a9eb4
6070+
Image, // 2ec3e730
6071+
ImageBackground, // 0389b17e
6072+
ImageBackgroundProps, // 8d0275c3
60726073
ImageErrorEvent, // b7b2ae63
60736074
ImageLoadEvent, // 5baae813
60746075
ImageProgressEventIOS, // adb35052
6075-
ImageProps, // 089f290a
6076+
ImageProps, // 6b9e13ae
60766077
ImagePropsAndroid, // 9fd9bcbb
6077-
ImagePropsBase, // cab66428
6078+
ImagePropsBase, // 0d040383
60786079
ImagePropsIOS, // 318adce2
60796080
ImageRequireSource, // 681d683b
60806081
ImageResolvedAssetSource, // f3060931
60816082
ImageSize, // 1c47cf88
60826083
ImageSource, // 48c7f316
60836084
ImageSourcePropType, // bfb5e5c6
6084-
ImageStyle, // 8b22ac76
6085+
ImageStyle, // ad6a6dee
60856086
ImageURISource, // 016eb083
6086-
InputAccessoryView, // ddb7f881
6087-
InputAccessoryViewProps, // 4b6f5450
6087+
InputAccessoryView, // 2a113ad4
6088+
InputAccessoryViewProps, // 273c1565
60886089
InputModeOptions, // 4e8581b9
60896090
Insets, // e7fe432a
60906091
InteractionManager, // c324d6e3
60916092
KeyDownEvent, // 5309360e
60926093
KeyEvent, // 20fa4267
60936094
KeyUpEvent, // 7c3054e1
60946095
Keyboard, // 49414c97
6095-
KeyboardAvoidingView, // 23d0b271
6096-
KeyboardAvoidingViewProps, // 81cba23f
6096+
KeyboardAvoidingView, // 014175c1
6097+
KeyboardAvoidingViewProps, // 729e7118
60976098
KeyboardEvent, // c3f895d4
60986099
KeyboardEventEasing, // af4091c8
60996100
KeyboardEventName, // 59299ad6
@@ -6118,9 +6119,9 @@ export {
61186119
MeasureInWindowOnSuccessCallback, // a285f598
61196120
MeasureLayoutOnSuccessCallback, // 3592502a
61206121
MeasureOnSuccessCallback, // 82824e59
6121-
Modal, // 9f28d6fe
6122+
Modal, // 549d4c8f
61226123
ModalBaseProps, // 0c81c9b1
6123-
ModalProps, // a69426b0
6124+
ModalProps, // a7416079
61246125
ModalPropsAndroid, // 515fb173
61256126
ModalPropsIOS, // 4fbcedf6
61266127
ModeChangeEvent, // 16790307
@@ -6158,13 +6159,13 @@ export {
61586159
PointerEvent, // ff3129ff
61596160
PressabilityConfig, // 9bb563c2
61606161
PressabilityEventHandlers, // ade29c37
6161-
Pressable, // a4242e8c
6162+
Pressable, // e98cfef3
61626163
PressableAndroidRippleConfig, // 42bc9727
6163-
PressableProps, // 42ae2cc7
6164+
PressableProps, // ddf6b855
61646165
PressableStateCallbackType, // 9af36561
61656166
ProcessedColorValue, // 33f74304
6166-
ProgressBarAndroid, // f6740378
6167-
ProgressBarAndroidProps, // 021ef6d2
6167+
ProgressBarAndroid, // 724297f7
6168+
ProgressBarAndroidProps, // 0b510e34
61686169
PromiseTask, // 5102c862
61696170
PublicRootInstance, // 8040afd7
61706171
PublicTextInstance, // e775d6b1
@@ -6173,8 +6174,8 @@ export {
61736174
PushNotificationPermissions, // c2e7ae4f
61746175
Rationale, // 5df1b1c1
61756176
ReactNativeVersion, // abd76827
6176-
RefreshControl, // 2adf2586
6177-
RefreshControlProps, // f0d99302
6177+
RefreshControl, // 4f8857da
6178+
RefreshControlProps, // ad88b7c5
61786179
RefreshControlPropsAndroid, // 99f64c97
61796180
RefreshControlPropsIOS, // 72a36381
61806181
Registry, // e1ed403e
@@ -6183,24 +6184,24 @@ export {
61836184
Role, // af7b889d
61846185
RootTag, // 3cd10504
61856186
RootTagContext, // 38bfc8f6
6186-
RootViewStyleProvider, // cc8d50e9
6187+
RootViewStyleProvider, // d4818465
61876188
Runnable, // 2cb32c54
61886189
Runnables, // d3749ae1
6189-
SafeAreaView, // 1b0e10d1
6190+
SafeAreaView, // f6f8e235
61906191
ScaledSize, // 07e417c7
61916192
ScrollEvent, // 84e5b805
6192-
ScrollResponderType, // 8eff013e
6193+
ScrollResponderType, // a971f2ba
61936194
ScrollToLocationParamsType, // d7ecdad1
6194-
ScrollView, // 29adab85
6195-
ScrollViewImperativeMethods, // 92677f19
6196-
ScrollViewProps, // 91750f9a
6195+
ScrollView, // 926eb585
6196+
ScrollViewImperativeMethods, // 642b738d
6197+
ScrollViewProps, // 44360048
61976198
ScrollViewPropsAndroid, // 44210553
61986199
ScrollViewPropsIOS, // d83c9733
61996200
ScrollViewScrollToOptions, // 3313411e
62006201
SectionBase, // b376bddc
6201-
SectionList, // f27f5afb
6202+
SectionList, // c772828c
62026203
SectionListData, // 119baf83
6203-
SectionListProps, // af193761
6204+
SectionListProps, // dd6d35bd
62046205
SectionListRenderItem, // 1fad0435
62056206
SectionListRenderItemInfo, // 745e1992
62066207
Separators, // 6a45f7e3
@@ -6217,57 +6218,57 @@ export {
62176218
StatusBarProps, // 06c98add
62186219
StatusBarStyle, // 986b2051
62196220
StyleProp, // fa0e9b4a
6220-
StyleSheet, // 0040560f
6221+
StyleSheet, // e77dd046
62216222
SubmitBehavior, // c4ddf490
6222-
Switch, // cd54192c
6223+
Switch, // 68d3d3c8
62236224
SwitchChangeEvent, // 2e5bd2de
6224-
SwitchProps, // 5b2f78be
6225+
SwitchProps, // be49c609
62256226
Systrace, // b5aa21fc
62266227
TVViewPropsIOS, // 330ce7b5
62276228
TargetedEvent, // 16e98910
62286229
TaskProvider, // 266dedf2
6229-
Text, // 0620c789
6230+
Text, // b8d8cb2c
62306231
TextContentType, // 239b3ecc
6231-
TextInput, // dbb9f0e2
6232+
TextInput, // ce4fd696
62326233
TextInputAndroidProps, // 3f09ce49
62336234
TextInputChangeEvent, // 6821f629
62346235
TextInputContentSizeChangeEvent, // 5fba3f54
62356236
TextInputEndEditingEvent, // 8c22fac3
62366237
TextInputFocusEvent, // c36e977c
62376238
TextInputIOSProps, // 0d05a855
62386239
TextInputKeyPressEvent, // 967178c2
6239-
TextInputProps, // 3c24b82d
6240+
TextInputProps, // 23a015ce
62406241
TextInputSelectionChangeEvent, // a1a7622f
62416242
TextInputSubmitEditingEvent, // 48d903af
62426243
TextLayoutEvent, // 45b0a8d7
6243-
TextProps, // 95d8874d
6244-
TextStyle, // f3404e2b
6244+
TextProps, // fc6ffddd
6245+
TextStyle, // bb9b7a58
62456246
ToastAndroid, // 88a8969a
62466247
Touchable, // b89b4800
6247-
TouchableHighlight, // 254e7a9d
6248-
TouchableHighlightProps, // 4af01d74
6249-
TouchableNativeFeedback, // 60a3e196
6250-
TouchableNativeFeedbackProps, // 372d3213
6251-
TouchableOpacity, // bd92a35c
6252-
TouchableOpacityProps, // 822164b4
6253-
TouchableWithoutFeedback, // 7363a906
6254-
TouchableWithoutFeedbackProps, // 68e3d87f
6248+
TouchableHighlight, // 3e3a1105
6249+
TouchableHighlightProps, // 1bc11e98
6250+
TouchableNativeFeedback, // 825bda53
6251+
TouchableNativeFeedbackProps, // 67b5c252
6252+
TouchableOpacity, // 8e7239e1
6253+
TouchableOpacityProps, // 55ea2958
6254+
TouchableWithoutFeedback, // efa59486
6255+
TouchableWithoutFeedbackProps, // be530043
62556256
TransformsStyle, // 65e70f18
62566257
TurboModule, // dfe29706
62576258
TurboModuleRegistry, // 4ace6db2
62586259
UIManager, // a1a7cc01
62596260
UTFSequence, // ad625158
62606261
Vibration, // 31e4bbf8
6261-
View, // 76fc9522
6262-
ViewProps, // 1945fbb5
6262+
View, // 04ab9769
6263+
ViewProps, // dcb89dca
62636264
ViewPropsAndroid, // 21385d96
62646265
ViewPropsIOS, // 58ee19bf
6265-
ViewStyle, // c2db0e6e
6266+
ViewStyle, // 00a0f8fb
62666267
VirtualViewMode, // 6be59722
62676268
VirtualizedList, // 68c7345e
6268-
VirtualizedListProps, // 555207ac
6269+
VirtualizedListProps, // a9937e8e
62696270
VirtualizedSectionList, // 9fd9cd61
6270-
VirtualizedSectionListProps, // 5092b543
6271+
VirtualizedSectionListProps, // e66af841
62716272
WrapperComponentProvider, // 9cf3844c
62726273
codegenNativeCommands, // 628a7c0a
62736274
codegenNativeComponent, // a733b8b6

‎packages/rn-tester/js/examples/MixBlendMode/MixBlendModeExample.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ const mixBlendModes = [
131131
'saturation',
132132
'color',
133133
'luminosity',
134+
'plus-lighter',
134135
] as const;
135136

136137
const examples: Array<RNTesterModuleExample> = mixBlendModes.map(mode => ({

0 commit comments

Comments
 (0)