Fix mixBlendMode not updating on Image state updates (#46680)

jorge-cab · facebook-github-bot · commit fae572d815c7 · 2024-09-29T22:59:28.000-07:00
Summary: Pull Request resolved: #46680 Since the parent of a view with mixBlendMode prop set is the one responsible for setting the compositing of the child, when updating mixBlendMode on a child we need to also invalidate the parent. Changelog: [Android] [Fixed] - mixBlendMode now properly does state updates Reviewed By: joevilches Differential Revision: D63424394 fbshipit-source-id: 0eb15520f1087e25683853632943e64a66344481
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java
@@ -213,6 +213,11 @@ public void setFilter(@NonNull T view, @Nullable ReadableArray filter) {
   public void setMixBlendMode(@NonNull T view, @Nullable String mixBlendMode) {
     if (ViewUtil.getUIManagerType(view) == UIManagerType.FABRIC) {
       view.setTag(R.id.mix_blend_mode, BlendModeHelper.parseMixBlendMode(mixBlendMode));
+      // We need to trigger drawChild for the parent ViewGroup which will set the
+      // mixBlendMode compositing on the child
+      if (view.getParent() instanceof View) {
+        ((View) view.getParent()).invalidate();
+      }
     }
   }
 

Original file line number	Diff line number	Diff line change
`@@ -213,6 +213,11 @@ public void setFilter(@NonNull T view, @Nullable ReadableArray filter) {`
`213`	`213`	`public void setMixBlendMode(@NonNull T view, @Nullable String mixBlendMode) {`
`214`	`214`	`if (ViewUtil.getUIManagerType(view) == UIManagerType.FABRIC) {`
`215`	`215`	`view.setTag(R.id.mix_blend_mode, BlendModeHelper.parseMixBlendMode(mixBlendMode));`
	`216`	`+ // We need to trigger drawChild for the parent ViewGroup which will set the`
	`217`	`+ // mixBlendMode compositing on the child`
	`218`	`+ if (view.getParent() instanceof View) {`
	`219`	`+ ((View) view.getParent()).invalidate();`
	`220`	`+ }`
`216`	`221`	`}`
`217`	`222`	`}`
`218`	`223`