diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts index 39bbb12e55fd..c951a773d0ec 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts @@ -365,7 +365,8 @@ export type BlendMode = | 'hue' | 'saturation' | 'color' - | 'luminosity'; + | 'luminosity' + | 'plus-lighter'; export type LinearGradientValue = { type: 'linear-gradient'; diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js index a5a9b947d799..1bf46c32b078 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js @@ -838,7 +838,8 @@ type ____BlendMode_Internal = | 'hue' | 'saturation' | 'color' - | 'luminosity'; + | 'luminosity' + | 'plus-lighter'; export type ____ViewStyle_InternalBase = Readonly<{ backfaceVisibility?: 'visible' | 'hidden', diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm index 56a81e66166e..37801132345b 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm @@ -567,6 +567,9 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared & case BlendMode::Luminosity: self.layer.compositingFilter = @"luminosityBlendMode"; break; + case BlendMode::PlusLighter: + self.layer.compositingFilter = @"linearDodgeBlendMode"; + break; case BlendMode::Normal: self.layer.compositingFilter = nil; break; diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BlendModeHelper.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BlendModeHelper.kt index d7b7ec23340a..686918c363cb 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BlendModeHelper.kt +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BlendModeHelper.kt @@ -54,6 +54,7 @@ internal object BlendModeHelper { "saturation" -> BlendMode.SATURATION "color" -> BlendMode.COLOR "luminosity" -> BlendMode.LUMINOSITY + "plus-lighter" -> BlendMode.PLUS else -> throw IllegalArgumentException("Invalid mix-blend-mode name: $mixBlendMode") } } diff --git a/packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropSerializer.cpp b/packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropSerializer.cpp index 9ba2feda9b4b..065874af36ad 100644 --- a/packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropSerializer.cpp +++ b/packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropSerializer.cpp @@ -530,6 +530,9 @@ void packMixBlendMode( case BlendMode::Luminosity: blendModeStr = "luminosity"; break; + case BlendMode::PlusLighter: + blendModeStr = "plus-lighter"; + break; default: throw std::runtime_error("Unknown blend mode"); } diff --git a/packages/react-native/ReactCommon/react/renderer/graphics/BlendMode.h b/packages/react-native/ReactCommon/react/renderer/graphics/BlendMode.h index afc6ce572bc2..25a1c91232b6 100644 --- a/packages/react-native/ReactCommon/react/renderer/graphics/BlendMode.h +++ b/packages/react-native/ReactCommon/react/renderer/graphics/BlendMode.h @@ -29,6 +29,7 @@ enum class BlendMode { Saturation, Color, Luminosity, + PlusLighter, }; inline std::optional blendModeFromString(std::string_view blendModeName) @@ -65,6 +66,8 @@ inline std::optional blendModeFromString(std::string_view blendModeNa return BlendMode::Color; } else if (blendModeName == "luminosity") { return BlendMode::Luminosity; + } else if (blendModeName == "plus-lighter") { + return BlendMode::PlusLighter; } else { return std::nullopt; } @@ -105,6 +108,8 @@ inline std::string toString(const BlendMode &blendMode) return "color"; case BlendMode::Luminosity: return "luminosity"; + case BlendMode::PlusLighter: + return "plus-lighter"; default: abort(); } diff --git a/packages/react-native/ReactNativeApi.d.ts b/packages/react-native/ReactNativeApi.d.ts index a2bbb68bb330..12e2020d70a7 100644 --- a/packages/react-native/ReactNativeApi.d.ts +++ b/packages/react-native/ReactNativeApi.d.ts @@ -4,7 +4,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * - * @generated SignedSource<<093ad6137fc6ea19fc24f5449a183065>> + * @generated SignedSource<<481366a332c1435df38ef98031869bb9>> * * This file was generated by scripts/js-api/build-types/index.js. */ @@ -590,6 +590,7 @@ declare type ____BlendMode_Internal = | "multiply" | "normal" | "overlay" + | "plus-lighter" | "saturation" | "screen" | "soft-light" @@ -5998,17 +5999,17 @@ export { AccessibilityValue, // cf8bcb74 ActionSheetIOS, // b558559e ActionSheetIOSOptions, // 1756eb5a - ActivityIndicator, // 0fbc1b53 - ActivityIndicatorProps, // 64ab03e1 + ActivityIndicator, // b7929377 + ActivityIndicatorProps, // 327327a4 Alert, // 5bf12165 AlertButton, // bf1a3b60 AlertButtonStyle, // ec9fb242 AlertOptions, // a0cdac0f AlertType, // 5ab91217 AndroidKeyboardEvent, // e03becc8 - Animated, // f39d3c6f + Animated, // b39057e6 AppConfig, // ebddad4b - AppRegistry, // 6cdee1d6 + AppRegistry, // f7a253e4 AppState, // 12012be5 AppStateEvent, // 80f034c3 AppStateStatus, // 447e5ef2 @@ -6018,7 +6019,7 @@ export { BackPressEventName, // 4620fb76 BlurEvent, // 870b9bb5 BoxShadowValue, // b679703f - Button, // ef82aed4 + Button, // 12c96cf0 ButtonProps, // 3c081e75 Clipboard, // 41addb89 CodegenTypes, // adbc477c @@ -6037,8 +6038,8 @@ export { DimensionsPayload, // 653bc26c DisplayMetrics, // 1dc35cef DisplayMetricsAndroid, // 872e62eb - DrawerLayoutAndroid, // 5659aca9 - DrawerLayoutAndroidProps, // 66371296 + DrawerLayoutAndroid, // 21d003c0 + DrawerLayoutAndroidProps, // d0c886d4 DrawerSlideEvent, // cc43db83 DropShadowValue, // e9df2606 DynamicColorIOS, // d96c228c @@ -6053,8 +6054,8 @@ export { EventSubscription, // b8d084aa ExtendedExceptionData, // 5a6ccf5a FilterFunction, // bf24c0e3 - FlatList, // da903f7f - FlatListProps, // 30719d0d + FlatList, // 91757c22 + FlatListProps, // 164888a2 FocusEvent, // 529b43eb FontVariant, // 7c7558bb GestureResponderEvent, // b466f6d6 @@ -6066,25 +6067,25 @@ export { IEventEmitter, // fbef6131 IOSKeyboardEvent, // e67bfe3a IgnorePattern, // ec6f6ece - Image, // 957b3726 - ImageBackground, // 06d5af5c - ImageBackgroundProps, // 473a9eb4 + Image, // 2ec3e730 + ImageBackground, // 0389b17e + ImageBackgroundProps, // 8d0275c3 ImageErrorEvent, // b7b2ae63 ImageLoadEvent, // 5baae813 ImageProgressEventIOS, // adb35052 - ImageProps, // 089f290a + ImageProps, // 6b9e13ae ImagePropsAndroid, // 9fd9bcbb - ImagePropsBase, // cab66428 + ImagePropsBase, // 0d040383 ImagePropsIOS, // 318adce2 ImageRequireSource, // 681d683b ImageResolvedAssetSource, // f3060931 ImageSize, // 1c47cf88 ImageSource, // 48c7f316 ImageSourcePropType, // bfb5e5c6 - ImageStyle, // 8b22ac76 + ImageStyle, // ad6a6dee ImageURISource, // 016eb083 - InputAccessoryView, // ddb7f881 - InputAccessoryViewProps, // 4b6f5450 + InputAccessoryView, // 2a113ad4 + InputAccessoryViewProps, // 273c1565 InputModeOptions, // 4e8581b9 Insets, // e7fe432a InteractionManager, // c324d6e3 @@ -6092,8 +6093,8 @@ export { KeyEvent, // 20fa4267 KeyUpEvent, // 7c3054e1 Keyboard, // 49414c97 - KeyboardAvoidingView, // 23d0b271 - KeyboardAvoidingViewProps, // 81cba23f + KeyboardAvoidingView, // 014175c1 + KeyboardAvoidingViewProps, // 729e7118 KeyboardEvent, // c3f895d4 KeyboardEventEasing, // af4091c8 KeyboardEventName, // 59299ad6 @@ -6118,9 +6119,9 @@ export { MeasureInWindowOnSuccessCallback, // a285f598 MeasureLayoutOnSuccessCallback, // 3592502a MeasureOnSuccessCallback, // 82824e59 - Modal, // 9f28d6fe + Modal, // 549d4c8f ModalBaseProps, // 0c81c9b1 - ModalProps, // a69426b0 + ModalProps, // a7416079 ModalPropsAndroid, // 515fb173 ModalPropsIOS, // 4fbcedf6 ModeChangeEvent, // 16790307 @@ -6158,13 +6159,13 @@ export { PointerEvent, // ff3129ff PressabilityConfig, // 9bb563c2 PressabilityEventHandlers, // ade29c37 - Pressable, // a4242e8c + Pressable, // e98cfef3 PressableAndroidRippleConfig, // 42bc9727 - PressableProps, // 42ae2cc7 + PressableProps, // ddf6b855 PressableStateCallbackType, // 9af36561 ProcessedColorValue, // 33f74304 - ProgressBarAndroid, // f6740378 - ProgressBarAndroidProps, // 021ef6d2 + ProgressBarAndroid, // 724297f7 + ProgressBarAndroidProps, // 0b510e34 PromiseTask, // 5102c862 PublicRootInstance, // 8040afd7 PublicTextInstance, // e775d6b1 @@ -6173,8 +6174,8 @@ export { PushNotificationPermissions, // c2e7ae4f Rationale, // 5df1b1c1 ReactNativeVersion, // abd76827 - RefreshControl, // 2adf2586 - RefreshControlProps, // f0d99302 + RefreshControl, // 4f8857da + RefreshControlProps, // ad88b7c5 RefreshControlPropsAndroid, // 99f64c97 RefreshControlPropsIOS, // 72a36381 Registry, // e1ed403e @@ -6183,24 +6184,24 @@ export { Role, // af7b889d RootTag, // 3cd10504 RootTagContext, // 38bfc8f6 - RootViewStyleProvider, // cc8d50e9 + RootViewStyleProvider, // d4818465 Runnable, // 2cb32c54 Runnables, // d3749ae1 - SafeAreaView, // 1b0e10d1 + SafeAreaView, // f6f8e235 ScaledSize, // 07e417c7 ScrollEvent, // 84e5b805 - ScrollResponderType, // 8eff013e + ScrollResponderType, // a971f2ba ScrollToLocationParamsType, // d7ecdad1 - ScrollView, // 29adab85 - ScrollViewImperativeMethods, // 92677f19 - ScrollViewProps, // 91750f9a + ScrollView, // 926eb585 + ScrollViewImperativeMethods, // 642b738d + ScrollViewProps, // 44360048 ScrollViewPropsAndroid, // 44210553 ScrollViewPropsIOS, // d83c9733 ScrollViewScrollToOptions, // 3313411e SectionBase, // b376bddc - SectionList, // f27f5afb + SectionList, // c772828c SectionListData, // 119baf83 - SectionListProps, // af193761 + SectionListProps, // dd6d35bd SectionListRenderItem, // 1fad0435 SectionListRenderItemInfo, // 745e1992 Separators, // 6a45f7e3 @@ -6217,18 +6218,18 @@ export { StatusBarProps, // 06c98add StatusBarStyle, // 986b2051 StyleProp, // fa0e9b4a - StyleSheet, // 0040560f + StyleSheet, // e77dd046 SubmitBehavior, // c4ddf490 - Switch, // cd54192c + Switch, // 68d3d3c8 SwitchChangeEvent, // 2e5bd2de - SwitchProps, // 5b2f78be + SwitchProps, // be49c609 Systrace, // b5aa21fc TVViewPropsIOS, // 330ce7b5 TargetedEvent, // 16e98910 TaskProvider, // 266dedf2 - Text, // 0620c789 + Text, // b8d8cb2c TextContentType, // 239b3ecc - TextInput, // dbb9f0e2 + TextInput, // ce4fd696 TextInputAndroidProps, // 3f09ce49 TextInputChangeEvent, // 6821f629 TextInputContentSizeChangeEvent, // 5fba3f54 @@ -6236,38 +6237,38 @@ export { TextInputFocusEvent, // c36e977c TextInputIOSProps, // 0d05a855 TextInputKeyPressEvent, // 967178c2 - TextInputProps, // 3c24b82d + TextInputProps, // 23a015ce TextInputSelectionChangeEvent, // a1a7622f TextInputSubmitEditingEvent, // 48d903af TextLayoutEvent, // 45b0a8d7 - TextProps, // 95d8874d - TextStyle, // f3404e2b + TextProps, // fc6ffddd + TextStyle, // bb9b7a58 ToastAndroid, // 88a8969a Touchable, // b89b4800 - TouchableHighlight, // 254e7a9d - TouchableHighlightProps, // 4af01d74 - TouchableNativeFeedback, // 60a3e196 - TouchableNativeFeedbackProps, // 372d3213 - TouchableOpacity, // bd92a35c - TouchableOpacityProps, // 822164b4 - TouchableWithoutFeedback, // 7363a906 - TouchableWithoutFeedbackProps, // 68e3d87f + TouchableHighlight, // 3e3a1105 + TouchableHighlightProps, // 1bc11e98 + TouchableNativeFeedback, // 825bda53 + TouchableNativeFeedbackProps, // 67b5c252 + TouchableOpacity, // 8e7239e1 + TouchableOpacityProps, // 55ea2958 + TouchableWithoutFeedback, // efa59486 + TouchableWithoutFeedbackProps, // be530043 TransformsStyle, // 65e70f18 TurboModule, // dfe29706 TurboModuleRegistry, // 4ace6db2 UIManager, // a1a7cc01 UTFSequence, // ad625158 Vibration, // 31e4bbf8 - View, // 76fc9522 - ViewProps, // 1945fbb5 + View, // 04ab9769 + ViewProps, // dcb89dca ViewPropsAndroid, // 21385d96 ViewPropsIOS, // 58ee19bf - ViewStyle, // c2db0e6e + ViewStyle, // 00a0f8fb VirtualViewMode, // 6be59722 VirtualizedList, // 68c7345e - VirtualizedListProps, // 555207ac + VirtualizedListProps, // a9937e8e VirtualizedSectionList, // 9fd9cd61 - VirtualizedSectionListProps, // 5092b543 + VirtualizedSectionListProps, // e66af841 WrapperComponentProvider, // 9cf3844c codegenNativeCommands, // 628a7c0a codegenNativeComponent, // a733b8b6 diff --git a/packages/rn-tester/js/examples/MixBlendMode/MixBlendModeExample.js b/packages/rn-tester/js/examples/MixBlendMode/MixBlendModeExample.js index 55c46b80cb05..b679c791ddc6 100644 --- a/packages/rn-tester/js/examples/MixBlendMode/MixBlendModeExample.js +++ b/packages/rn-tester/js/examples/MixBlendMode/MixBlendModeExample.js @@ -131,6 +131,7 @@ const mixBlendModes = [ 'saturation', 'color', 'luminosity', + 'plus-lighter', ] as const; const examples: Array = mixBlendModes.map(mode => ({