Skip to content

Commit

Permalink
feat: improve animating colors (#2471)
Browse files Browse the repository at this point in the history 
# Summary

Currently on Fabric, you cannot animate color properties like `fill` or
`stroke` using Animated with `useNativeDriver: true` or Reanimated.
That's because we have custom structure that needs to be parsed on `JS`
and looks like:

```ts
type ColorStruct = Readonly<{
  type?: WithDefault<Int32, -1>;
  payload?: ColorValue;
  brushRef?: string;
}>;
```

However, special values like `currentColor` / `context-fill` /
`context-stroke` / `/^url\(#(.+)\)$/` can not be animated anyway.
Instead, we should allow passing `ColorValue` directly and detect on the
native side if its ColorValue or ColorStruct.

## Test Plan

Example app -> TestX

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    ✅      |
| MacOS   |    ✅      |
| Android |    ✅      |

## Checklist

- [x] I have tested this on a device and a simulator
- [ ] I added documentation in `README.md`
  • Loading branch information
@jakex7
jakex7 authored Oct 4, 2024
1 parent 74c3bf9 commit 690cddd
Show file tree
Hide file tree
Showing 56 changed files with 233 additions and 171 deletions.
5 changes: 2 additions & 3 deletions android/src/paper/java/com/facebook/react/viewmanagers/RNSVGCircleManagerDelegate.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
import com.facebook.react.bridge.ColorPropConverter;
import com.facebook.react.bridge.DynamicFromObject;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.uimanager.BaseViewManagerDelegate;
import com.facebook.react.uimanager.BaseViewManagerInterface;

Expand Down Expand Up @@ -65,7 +64,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
mViewManager.setColor(view, ColorPropConverter.getColor(value, view.getContext()));
break;
case "fill":
mViewManager.setFill(view, (ReadableMap) value);
mViewManager.setFill(view, new DynamicFromObject(value));
break;
case "fillOpacity":
mViewManager.setFillOpacity(view, value == null ? 1f : ((Double) value).floatValue());
Expand All @@ -74,7 +73,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
mViewManager.setFillRule(view, value == null ? 1 : ((Double) value).intValue());
break;
case "stroke":
mViewManager.setStroke(view, (ReadableMap) value);
mViewManager.setStroke(view, new DynamicFromObject(value));
break;
case "strokeOpacity":
mViewManager.setStrokeOpacity(view, value == null ? 1f : ((Double) value).floatValue());
Expand Down
5 changes: 2 additions & 3 deletions android/src/paper/java/com/facebook/react/viewmanagers/RNSVGCircleManagerInterface.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
import androidx.annotation.Nullable;
import com.facebook.react.bridge.Dynamic;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;

public interface RNSVGCircleManagerInterface<T extends View> {
void setName(T view, @Nullable String value);
Expand All @@ -29,10 +28,10 @@ public interface RNSVGCircleManagerInterface<T extends View> {
void setDisplay(T view, @Nullable String value);
void setPointerEvents(T view, @Nullable String value);
void setColor(T view, @Nullable Integer value);
void setFill(T view, @Nullable ReadableMap value);
void setFill(T view, Dynamic value);
void setFillOpacity(T view, float value);
void setFillRule(T view, int value);
void setStroke(T view, @Nullable ReadableMap value);
void setStroke(T view, Dynamic value);
void setStrokeOpacity(T view, float value);
void setStrokeWidth(T view, Dynamic value);
void setStrokeLinecap(T view, int value);
Expand Down
5 changes: 2 additions & 3 deletions android/src/paper/java/com/facebook/react/viewmanagers/RNSVGClipPathManagerDelegate.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
import com.facebook.react.bridge.ColorPropConverter;
import com.facebook.react.bridge.DynamicFromObject;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.uimanager.BaseViewManagerDelegate;
import com.facebook.react.uimanager.BaseViewManagerInterface;

Expand Down Expand Up @@ -65,7 +64,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
mViewManager.setColor(view, ColorPropConverter.getColor(value, view.getContext()));
break;
case "fill":
mViewManager.setFill(view, (ReadableMap) value);
mViewManager.setFill(view, new DynamicFromObject(value));
break;
case "fillOpacity":
mViewManager.setFillOpacity(view, value == null ? 1f : ((Double) value).floatValue());
Expand All @@ -74,7 +73,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
mViewManager.setFillRule(view, value == null ? 1 : ((Double) value).intValue());
break;
case "stroke":
mViewManager.setStroke(view, (ReadableMap) value);
mViewManager.setStroke(view, new DynamicFromObject(value));
break;
case "strokeOpacity":
mViewManager.setStrokeOpacity(view, value == null ? 1f : ((Double) value).floatValue());
Expand Down
5 changes: 2 additions & 3 deletions android/src/paper/java/com/facebook/react/viewmanagers/RNSVGClipPathManagerInterface.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
import androidx.annotation.Nullable;
import com.facebook.react.bridge.Dynamic;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;

public interface RNSVGClipPathManagerInterface<T extends View> {
void setName(T view, @Nullable String value);
Expand All @@ -29,10 +28,10 @@ public interface RNSVGClipPathManagerInterface<T extends View> {
void setDisplay(T view, @Nullable String value);
void setPointerEvents(T view, @Nullable String value);
void setColor(T view, @Nullable Integer value);
void setFill(T view, @Nullable ReadableMap value);
void setFill(T view, Dynamic value);
void setFillOpacity(T view, float value);
void setFillRule(T view, int value);
void setStroke(T view, @Nullable ReadableMap value);
void setStroke(T view, Dynamic value);
void setStrokeOpacity(T view, float value);
void setStrokeWidth(T view, Dynamic value);
void setStrokeLinecap(T view, int value);
Expand Down
5 changes: 2 additions & 3 deletions android/src/paper/java/com/facebook/react/viewmanagers/RNSVGEllipseManagerDelegate.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
import com.facebook.react.bridge.ColorPropConverter;
import com.facebook.react.bridge.DynamicFromObject;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.uimanager.BaseViewManagerDelegate;
import com.facebook.react.uimanager.BaseViewManagerInterface;

Expand Down Expand Up @@ -65,7 +64,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
mViewManager.setColor(view, ColorPropConverter.getColor(value, view.getContext()));
break;
case "fill":
mViewManager.setFill(view, (ReadableMap) value);
mViewManager.setFill(view, new DynamicFromObject(value));
break;
case "fillOpacity":
mViewManager.setFillOpacity(view, value == null ? 1f : ((Double) value).floatValue());
Expand All @@ -74,7 +73,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
mViewManager.setFillRule(view, value == null ? 1 : ((Double) value).intValue());
break;
case "stroke":
mViewManager.setStroke(view, (ReadableMap) value);
mViewManager.setStroke(view, new DynamicFromObject(value));
break;
case "strokeOpacity":
mViewManager.setStrokeOpacity(view, value == null ? 1f : ((Double) value).floatValue());
Expand Down
5 changes: 2 additions & 3 deletions android/src/paper/java/com/facebook/react/viewmanagers/RNSVGEllipseManagerInterface.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
import androidx.annotation.Nullable;
import com.facebook.react.bridge.Dynamic;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;

public interface RNSVGEllipseManagerInterface<T extends View> {
void setName(T view, @Nullable String value);
Expand All @@ -29,10 +28,10 @@ public interface RNSVGEllipseManagerInterface<T extends View> {
void setDisplay(T view, @Nullable String value);
void setPointerEvents(T view, @Nullable String value);
void setColor(T view, @Nullable Integer value);
void setFill(T view, @Nullable ReadableMap value);
void setFill(T view, Dynamic value);
void setFillOpacity(T view, float value);
void setFillRule(T view, int value);
void setStroke(T view, @Nullable ReadableMap value);
void setStroke(T view, Dynamic value);
void setStrokeOpacity(T view, float value);
void setStrokeWidth(T view, Dynamic value);
void setStrokeLinecap(T view, int value);
Expand Down
5 changes: 2 additions & 3 deletions ...oid/src/paper/java/com/facebook/react/viewmanagers/RNSVGForeignObjectManagerDelegate.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
import com.facebook.react.bridge.ColorPropConverter;
import com.facebook.react.bridge.DynamicFromObject;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.uimanager.BaseViewManagerDelegate;
import com.facebook.react.uimanager.BaseViewManagerInterface;

Expand Down Expand Up @@ -65,7 +64,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
mViewManager.setColor(view, ColorPropConverter.getColor(value, view.getContext()));
break;
case "fill":
mViewManager.setFill(view, (ReadableMap) value);
mViewManager.setFill(view, new DynamicFromObject(value));
break;
case "fillOpacity":
mViewManager.setFillOpacity(view, value == null ? 1f : ((Double) value).floatValue());
Expand All @@ -74,7 +73,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
mViewManager.setFillRule(view, value == null ? 1 : ((Double) value).intValue());
break;
case "stroke":
mViewManager.setStroke(view, (ReadableMap) value);
mViewManager.setStroke(view, new DynamicFromObject(value));
break;
case "strokeOpacity":
mViewManager.setStrokeOpacity(view, value == null ? 1f : ((Double) value).floatValue());
Expand Down
5 changes: 2 additions & 3 deletions ...id/src/paper/java/com/facebook/react/viewmanagers/RNSVGForeignObjectManagerInterface.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
import androidx.annotation.Nullable;
import com.facebook.react.bridge.Dynamic;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;

public interface RNSVGForeignObjectManagerInterface<T extends View> {
void setName(T view, @Nullable String value);
Expand All @@ -29,10 +28,10 @@ public interface RNSVGForeignObjectManagerInterface<T extends View> {
void setDisplay(T view, @Nullable String value);
void setPointerEvents(T view, @Nullable String value);
void setColor(T view, @Nullable Integer value);
void setFill(T view, @Nullable ReadableMap value);
void setFill(T view, Dynamic value);
void setFillOpacity(T view, float value);
void setFillRule(T view, int value);
void setStroke(T view, @Nullable ReadableMap value);
void setStroke(T view, Dynamic value);
void setStrokeOpacity(T view, float value);
void setStrokeWidth(T view, Dynamic value);
void setStrokeLinecap(T view, int value);
Expand Down
5 changes: 2 additions & 3 deletions android/src/paper/java/com/facebook/react/viewmanagers/RNSVGGroupManagerDelegate.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
import com.facebook.react.bridge.ColorPropConverter;
import com.facebook.react.bridge.DynamicFromObject;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.uimanager.BaseViewManagerDelegate;
import com.facebook.react.uimanager.BaseViewManagerInterface;

Expand Down Expand Up @@ -65,7 +64,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
mViewManager.setColor(view, ColorPropConverter.getColor(value, view.getContext()));
break;
case "fill":
mViewManager.setFill(view, (ReadableMap) value);
mViewManager.setFill(view, new DynamicFromObject(value));
break;
case "fillOpacity":
mViewManager.setFillOpacity(view, value == null ? 1f : ((Double) value).floatValue());
Expand All @@ -74,7 +73,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
mViewManager.setFillRule(view, value == null ? 1 : ((Double) value).intValue());
break;
case "stroke":
mViewManager.setStroke(view, (ReadableMap) value);
mViewManager.setStroke(view, new DynamicFromObject(value));
break;
case "strokeOpacity":
mViewManager.setStrokeOpacity(view, value == null ? 1f : ((Double) value).floatValue());
Expand Down
5 changes: 2 additions & 3 deletions android/src/paper/java/com/facebook/react/viewmanagers/RNSVGGroupManagerInterface.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
import androidx.annotation.Nullable;
import com.facebook.react.bridge.Dynamic;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;

public interface RNSVGGroupManagerInterface<T extends View> {
void setName(T view, @Nullable String value);
Expand All @@ -29,10 +28,10 @@ public interface RNSVGGroupManagerInterface<T extends View> {
void setDisplay(T view, @Nullable String value);
void setPointerEvents(T view, @Nullable String value);
void setColor(T view, @Nullable Integer value);
void setFill(T view, @Nullable ReadableMap value);
void setFill(T view, Dynamic value);
void setFillOpacity(T view, float value);
void setFillRule(T view, int value);
void setStroke(T view, @Nullable ReadableMap value);
void setStroke(T view, Dynamic value);
void setStrokeOpacity(T view, float value);
void setStrokeWidth(T view, Dynamic value);
void setStrokeLinecap(T view, int value);
Expand Down
4 changes: 2 additions & 2 deletions android/src/paper/java/com/facebook/react/viewmanagers/RNSVGImageManagerDelegate.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
mViewManager.setColor(view, ColorPropConverter.getColor(value, view.getContext()));
break;
case "fill":
mViewManager.setFill(view, (ReadableMap) value);
mViewManager.setFill(view, new DynamicFromObject(value));
break;
case "fillOpacity":
mViewManager.setFillOpacity(view, value == null ? 1f : ((Double) value).floatValue());
Expand All @@ -74,7 +74,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
mViewManager.setFillRule(view, value == null ? 1 : ((Double) value).intValue());
break;
case "stroke":
mViewManager.setStroke(view, (ReadableMap) value);
mViewManager.setStroke(view, new DynamicFromObject(value));
break;
case "strokeOpacity":
mViewManager.setStrokeOpacity(view, value == null ? 1f : ((Double) value).floatValue());
Expand Down
4 changes: 2 additions & 2 deletions android/src/paper/java/com/facebook/react/viewmanagers/RNSVGImageManagerInterface.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ public interface RNSVGImageManagerInterface<T extends View> {
void setDisplay(T view, @Nullable String value);
void setPointerEvents(T view, @Nullable String value);
void setColor(T view, @Nullable Integer value);
void setFill(T view, @Nullable ReadableMap value);
void setFill(T view, Dynamic value);
void setFillOpacity(T view, float value);
void setFillRule(T view, int value);
void setStroke(T view, @Nullable ReadableMap value);
void setStroke(T view, Dynamic value);
void setStrokeOpacity(T view, float value);
void setStrokeWidth(T view, Dynamic value);
void setStrokeLinecap(T view, int value);
Expand Down
5 changes: 2 additions & 3 deletions android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLineManagerDelegate.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
import com.facebook.react.bridge.ColorPropConverter;
import com.facebook.react.bridge.DynamicFromObject;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.uimanager.BaseViewManagerDelegate;
import com.facebook.react.uimanager.BaseViewManagerInterface;

Expand Down Expand Up @@ -65,7 +64,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
mViewManager.setColor(view, ColorPropConverter.getColor(value, view.getContext()));
break;
case "fill":
mViewManager.setFill(view, (ReadableMap) value);
mViewManager.setFill(view, new DynamicFromObject(value));
break;
case "fillOpacity":
mViewManager.setFillOpacity(view, value == null ? 1f : ((Double) value).floatValue());
Expand All @@ -74,7 +73,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
mViewManager.setFillRule(view, value == null ? 1 : ((Double) value).intValue());
break;
case "stroke":
mViewManager.setStroke(view, (ReadableMap) value);
mViewManager.setStroke(view, new DynamicFromObject(value));
break;
case "strokeOpacity":
mViewManager.setStrokeOpacity(view, value == null ? 1f : ((Double) value).floatValue());
Expand Down
5 changes: 2 additions & 3 deletions android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLineManagerInterface.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
import androidx.annotation.Nullable;
import com.facebook.react.bridge.Dynamic;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;

public interface RNSVGLineManagerInterface<T extends View> {
void setName(T view, @Nullable String value);
Expand All @@ -29,10 +28,10 @@ public interface RNSVGLineManagerInterface<T extends View> {
void setDisplay(T view, @Nullable String value);
void setPointerEvents(T view, @Nullable String value);
void setColor(T view, @Nullable Integer value);
void setFill(T view, @Nullable ReadableMap value);
void setFill(T view, Dynamic value);
void setFillOpacity(T view, float value);
void setFillRule(T view, int value);
void setStroke(T view, @Nullable ReadableMap value);
void setStroke(T view, Dynamic value);
void setStrokeOpacity(T view, float value);
void setStrokeWidth(T view, Dynamic value);
void setStrokeLinecap(T view, int value);
Expand Down
5 changes: 2 additions & 3 deletions android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMarkerManagerDelegate.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
import com.facebook.react.bridge.ColorPropConverter;
import com.facebook.react.bridge.DynamicFromObject;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.uimanager.BaseViewManagerDelegate;
import com.facebook.react.uimanager.BaseViewManagerInterface;

Expand Down Expand Up @@ -65,7 +64,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
mViewManager.setColor(view, ColorPropConverter.getColor(value, view.getContext()));
break;
case "fill":
mViewManager.setFill(view, (ReadableMap) value);
mViewManager.setFill(view, new DynamicFromObject(value));
break;
case "fillOpacity":
mViewManager.setFillOpacity(view, value == null ? 1f : ((Double) value).floatValue());
Expand All @@ -74,7 +73,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
mViewManager.setFillRule(view, value == null ? 1 : ((Double) value).intValue());
break;
case "stroke":
mViewManager.setStroke(view, (ReadableMap) value);
mViewManager.setStroke(view, new DynamicFromObject(value));
break;
case "strokeOpacity":
mViewManager.setStrokeOpacity(view, value == null ? 1f : ((Double) value).floatValue());
Expand Down
5 changes: 2 additions & 3 deletions android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMarkerManagerInterface.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
import androidx.annotation.Nullable;
import com.facebook.react.bridge.Dynamic;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;

public interface RNSVGMarkerManagerInterface<T extends View> {
void setName(T view, @Nullable String value);
Expand All @@ -29,10 +28,10 @@ public interface RNSVGMarkerManagerInterface<T extends View> {
void setDisplay(T view, @Nullable String value);
void setPointerEvents(T view, @Nullable String value);
void setColor(T view, @Nullable Integer value);
void setFill(T view, @Nullable ReadableMap value);
void setFill(T view, Dynamic value);
void setFillOpacity(T view, float value);
void setFillRule(T view, int value);
void setStroke(T view, @Nullable ReadableMap value);
void setStroke(T view, Dynamic value);
void setStrokeOpacity(T view, float value);
void setStrokeWidth(T view, Dynamic value);
void setStrokeLinecap(T view, int value);
Expand Down
5 changes: 2 additions & 3 deletions android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMaskManagerDelegate.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
import com.facebook.react.bridge.ColorPropConverter;
import com.facebook.react.bridge.DynamicFromObject;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.uimanager.BaseViewManagerDelegate;
import com.facebook.react.uimanager.BaseViewManagerInterface;

Expand Down Expand Up @@ -65,7 +64,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
mViewManager.setColor(view, ColorPropConverter.getColor(value, view.getContext()));
break;
case "fill":
mViewManager.setFill(view, (ReadableMap) value);
mViewManager.setFill(view, new DynamicFromObject(value));
break;
case "fillOpacity":
mViewManager.setFillOpacity(view, value == null ? 1f : ((Double) value).floatValue());
Expand All @@ -74,7 +73,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
mViewManager.setFillRule(view, value == null ? 1 : ((Double) value).intValue());
break;
case "stroke":
mViewManager.setStroke(view, (ReadableMap) value);
mViewManager.setStroke(view, new DynamicFromObject(value));
break;
case "strokeOpacity":
mViewManager.setStrokeOpacity(view, value == null ? 1f : ((Double) value).floatValue());
Expand Down
Loading

0 comments on commit 690cddd

Please sign in to comment.