Skip to content

Commit be06e84

Browse files
jakex7jakex7
authored
feat: support opacity percentage values (#2720)
# Summary Make `(fill/stroke)Opacity` a Dynamic to allow passing percentage values. ## Test Plan Test `ReanimatedOpacity`
1 parent 7eb52b6 commit be06e84

File tree

70 files changed

+363
-182
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+363
-182
lines changed

‎android/src/RenderableViewManager73/java/com/horcrux/svg/RenderableViewManager.java‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -469,7 +469,13 @@ public void setClipRule(V node, int clipRule) {
469469
node.setClipRule(clipRule);
470470
}
471471

472-
@ReactProp(name = "opacity", defaultFloat = 1f)
472+
@ReactProp(name = "opacity")
473+
public void setOpacity(@Nonnull V node, @Nullable Dynamic opacity) {
474+
node.setOpacity(opacity);
475+
}
476+
public void setOpacity(@Nonnull V node, String opacity) {
477+
node.setOpacity(opacity);
478+
}
473479
public void setOpacity(@Nonnull V node, float opacity) {
474480
node.setOpacity(opacity);
475481
}
@@ -1803,10 +1809,16 @@ public void setFill(T view, @Nullable ReadableMap value) {
18031809
view.setFill(value);
18041810
}
18051811

1806-
@ReactProp(name = "fillOpacity", defaultFloat = 1f)
1807-
public void setFillOpacity(T node, float fillOpacity) {
1812+
@ReactProp(name = "fillOpacity")
1813+
public void setFillOpacity(T node, @Nullable Dynamic fillOpacity) {
18081814
node.setFillOpacity(fillOpacity);
18091815
}
1816+
public void setFillOpacity(T node, String opacity) {
1817+
node.setOpacity(opacity);
1818+
}
1819+
public void setFillOpacity(T node, float opacity) {
1820+
node.setOpacity(opacity);
1821+
}
18101822

18111823
@ReactProp(name = "fillRule", defaultInt = FILL_RULE_NONZERO)
18121824
public void setFillRule(T node, int fillRule) {
@@ -1822,10 +1834,16 @@ public void setStroke(T view, @Nullable ReadableMap value) {
18221834
view.setStroke(value);
18231835
}
18241836

1825-
@ReactProp(name = "strokeOpacity", defaultFloat = 1f)
1826-
public void setStrokeOpacity(T node, float strokeOpacity) {
1837+
@ReactProp(name = "strokeOpacity")
1838+
public void setStrokeOpacity(T node, @Nullable Dynamic strokeOpacity) {
18271839
node.setStrokeOpacity(strokeOpacity);
18281840
}
1841+
public void setStrokeOpacity(T node, String opacity) {
1842+
node.setStrokeOpacity(opacity);
1843+
}
1844+
public void setStrokeOpacity(T node, float opacity) {
1845+
node.setStrokeOpacity(opacity);
1846+
}
18291847

18301848
@ReactProp(name = "strokeDasharray")
18311849
public void setStrokeDasharray(T node, Dynamic strokeDasharray) {

‎android/src/RenderableViewManager75/java/com/horcrux/svg/RenderableViewManager.java‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -358,7 +358,13 @@ public void setClipRule(V node, int clipRule) {
358358
node.setClipRule(clipRule);
359359
}
360360

361-
@ReactProp(name = "opacity", defaultFloat = 1f)
361+
@ReactProp(name = "opacity")
362+
public void setOpacity(@Nonnull V node, @Nullable Dynamic opacity) {
363+
node.setOpacity(opacity);
364+
}
365+
public void setOpacity(@Nonnull V node, String opacity) {
366+
node.setOpacity(opacity);
367+
}
362368
public void setOpacity(@Nonnull V node, float opacity) {
363369
node.setOpacity(opacity);
364370
}
@@ -1688,10 +1694,16 @@ public void setFill(T view, @Nullable ReadableMap value) {
16881694
view.setFill(value);
16891695
}
16901696

1691-
@ReactProp(name = "fillOpacity", defaultFloat = 1f)
1692-
public void setFillOpacity(T node, float fillOpacity) {
1697+
@ReactProp(name = "fillOpacity")
1698+
public void setFillOpacity(T node, @Nullable Dynamic fillOpacity) {
16931699
node.setFillOpacity(fillOpacity);
16941700
}
1701+
public void setFillOpacity(T node, String opacity) {
1702+
node.setOpacity(opacity);
1703+
}
1704+
public void setFillOpacity(T node, float opacity) {
1705+
node.setOpacity(opacity);
1706+
}
16951707

16961708
@ReactProp(name = "fillRule", defaultInt = FILL_RULE_NONZERO)
16971709
public void setFillRule(T node, int fillRule) {
@@ -1707,10 +1719,16 @@ public void setStroke(T view, @Nullable ReadableMap value) {
17071719
view.setStroke(value);
17081720
}
17091721

1710-
@ReactProp(name = "strokeOpacity", defaultFloat = 1f)
1711-
public void setStrokeOpacity(T node, float strokeOpacity) {
1722+
@ReactProp(name = "strokeOpacity")
1723+
public void setStrokeOpacity(T node, @Nullable Dynamic strokeOpacity) {
17121724
node.setStrokeOpacity(strokeOpacity);
17131725
}
1726+
public void setStrokeOpacity(T node, String opacity) {
1727+
node.setStrokeOpacity(opacity);
1728+
}
1729+
public void setStrokeOpacity(T node, float opacity) {
1730+
node.setStrokeOpacity(opacity);
1731+
}
17141732

17151733
@ReactProp(name = "strokeDasharray")
17161734
public void setStrokeDasharray(T node, Dynamic strokeDasharray) {

‎android/src/main/java/com/horcrux/svg/RenderableView.java‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -202,11 +202,31 @@ public void setFill(ReadableMap fill) {
202202
invalidate();
203203
}
204204

205-
public void setFillOpacity(float fillOpacity) {
206-
this.fillOpacity = fillOpacity;
205+
public void setFillOpacity(@Nullable Dynamic fillOpacity) {
206+
if (fillOpacity == null || fillOpacity.isNull()) {
207+
this.fillOpacity = 1f;
208+
invalidate();
209+
return;
210+
}
211+
ReadableType opacityType = fillOpacity.getType();
212+
if (opacityType == ReadableType.Number) {
213+
this.fillOpacity = (float) fillOpacity.asDouble();
214+
} else if (opacityType == ReadableType.String) {
215+
this.fillOpacity = Float.parseFloat(fillOpacity.asString().replace("%", "")) / 100f;
216+
}
207217
invalidate();
208218
}
209219

220+
public void setFillOpacity(float fillOpacity) {
221+
this.fillOpacity = fillOpacity;
222+
invalidate();
223+
}
224+
225+
public void setFillOpacity(String fillOpacity) {
226+
this.fillOpacity = Float.parseFloat(fillOpacity.replace("%", "")) / 100f;
227+
invalidate();
228+
}
229+
210230
public void setFillRule(int fillRule) {
211231
switch (fillRule) {
212232
case FILL_RULE_EVENODD:
@@ -277,10 +297,28 @@ public void setStroke(@Nullable ReadableMap stroke) {
277297
invalidate();
278298
}
279299

300+
public void setStrokeOpacity(@Nullable Dynamic strokeOpacity) {
301+
if (strokeOpacity == null || strokeOpacity.isNull()) {
302+
this.strokeOpacity = 1f;
303+
invalidate();
304+
return;
305+
}
306+
ReadableType opacityType = strokeOpacity.getType();
307+
if (opacityType == ReadableType.Number) {
308+
this.strokeOpacity = (float) strokeOpacity.asDouble();
309+
} else if (opacityType == ReadableType.String) {
310+
this.strokeOpacity = Float.parseFloat(strokeOpacity.asString().replace("%", "")) / 100f;
311+
}
312+
invalidate();
313+
}
280314
public void setStrokeOpacity(float strokeOpacity) {
281315
this.strokeOpacity = strokeOpacity;
282316
invalidate();
283317
}
318+
public void setStrokeOpacity(String strokeOpacity) {
319+
this.strokeOpacity = Float.parseFloat(strokeOpacity.replace("%", "")) / 100f;
320+
invalidate();
321+
}
284322

285323
public void setStrokeDasharray(Dynamic dynamicStrokeDasharray) {
286324
ArrayList<SVGLength> arrayList = SVGLength.arrayFrom(dynamicStrokeDasharray);

‎android/src/main/java/com/horcrux/svg/VirtualView.java‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -305,8 +305,28 @@ public void setClipRule(int clipRule) {
305305
invalidate();
306306
}
307307

308+
public void setOpacity(@Nullable Dynamic opacity) {
309+
if (opacity == null || opacity.isNull()) {
310+
this.mOpacity = 1f;
311+
invalidate();
312+
return;
313+
}
314+
ReadableType opacityType = opacity.getType();
315+
if (opacityType == ReadableType.Number) {
316+
this.mOpacity = (float) opacity.asDouble();
317+
} else if (opacityType == ReadableType.String) {
318+
this.mOpacity = Float.parseFloat(opacity.asString().replace("%", "")) / 100f;
319+
}
320+
invalidate();
321+
}
322+
308323
public void setOpacity(float opacity) {
309-
mOpacity = opacity;
324+
this.mOpacity = opacity;
325+
invalidate();
326+
}
327+
328+
public void setOpacity(String opacity) {
329+
this.mOpacity = Float.parseFloat(opacity.replace("%", "")) / 100f;
310330
invalidate();
311331
}
312332

‎android/src/paper/java/com/facebook/react/viewmanagers/RNSVGCircleManagerDelegate.java‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
2929
mViewManager.setName(view, value == null ? null : (String) value);
3030
break;
3131
case "opacity":
32-
mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue());
32+
mViewManager.setOpacity(view, new DynamicFromObject(value));
3333
break;
3434
case "matrix":
3535
mViewManager.setMatrix(view, (ReadableArray) value);
@@ -68,7 +68,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
6868
mViewManager.setFill(view, new DynamicFromObject(value));
6969
break;
7070
case "fillOpacity":
71-
mViewManager.setFillOpacity(view, value == null ? 1f : ((Double) value).floatValue());
71+
mViewManager.setFillOpacity(view, new DynamicFromObject(value));
7272
break;
7373
case "fillRule":
7474
mViewManager.setFillRule(view, value == null ? 1 : ((Double) value).intValue());
@@ -77,7 +77,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
7777
mViewManager.setStroke(view, new DynamicFromObject(value));
7878
break;
7979
case "strokeOpacity":
80-
mViewManager.setStrokeOpacity(view, value == null ? 1f : ((Double) value).floatValue());
80+
mViewManager.setStrokeOpacity(view, new DynamicFromObject(value));
8181
break;
8282
case "strokeWidth":
8383
mViewManager.setStrokeWidth(view, new DynamicFromObject(value));

‎android/src/paper/java/com/facebook/react/viewmanagers/RNSVGCircleManagerInterface.java‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
public interface RNSVGCircleManagerInterface<T extends View> {
1818
void setName(T view, @Nullable String value);
19-
void setOpacity(T view, float value);
19+
void setOpacity(T view, Dynamic value);
2020
void setMatrix(T view, @Nullable ReadableArray value);
2121
void setMask(T view, @Nullable String value);
2222
void setMarkerStart(T view, @Nullable String value);
@@ -29,10 +29,10 @@ public interface RNSVGCircleManagerInterface<T extends View> {
2929
void setPointerEvents(T view, @Nullable String value);
3030
void setColor(T view, @Nullable Integer value);
3131
void setFill(T view, Dynamic value);
32-
void setFillOpacity(T view, float value);
32+
void setFillOpacity(T view, Dynamic value);
3333
void setFillRule(T view, int value);
3434
void setStroke(T view, Dynamic value);
35-
void setStrokeOpacity(T view, float value);
35+
void setStrokeOpacity(T view, Dynamic value);
3636
void setStrokeWidth(T view, Dynamic value);
3737
void setStrokeLinecap(T view, int value);
3838
void setStrokeLinejoin(T view, int value);

‎android/src/paper/java/com/facebook/react/viewmanagers/RNSVGClipPathManagerDelegate.java‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
2929
mViewManager.setName(view, value == null ? null : (String) value);
3030
break;
3131
case "opacity":
32-
mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue());
32+
mViewManager.setOpacity(view, new DynamicFromObject(value));
3333
break;
3434
case "matrix":
3535
mViewManager.setMatrix(view, (ReadableArray) value);
@@ -68,7 +68,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
6868
mViewManager.setFill(view, new DynamicFromObject(value));
6969
break;
7070
case "fillOpacity":
71-
mViewManager.setFillOpacity(view, value == null ? 1f : ((Double) value).floatValue());
71+
mViewManager.setFillOpacity(view, new DynamicFromObject(value));
7272
break;
7373
case "fillRule":
7474
mViewManager.setFillRule(view, value == null ? 1 : ((Double) value).intValue());
@@ -77,7 +77,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
7777
mViewManager.setStroke(view, new DynamicFromObject(value));
7878
break;
7979
case "strokeOpacity":
80-
mViewManager.setStrokeOpacity(view, value == null ? 1f : ((Double) value).floatValue());
80+
mViewManager.setStrokeOpacity(view, new DynamicFromObject(value));
8181
break;
8282
case "strokeWidth":
8383
mViewManager.setStrokeWidth(view, new DynamicFromObject(value));

‎android/src/paper/java/com/facebook/react/viewmanagers/RNSVGClipPathManagerInterface.java‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
public interface RNSVGClipPathManagerInterface<T extends View> {
1818
void setName(T view, @Nullable String value);
19-
void setOpacity(T view, float value);
19+
void setOpacity(T view, Dynamic value);
2020
void setMatrix(T view, @Nullable ReadableArray value);
2121
void setMask(T view, @Nullable String value);
2222
void setMarkerStart(T view, @Nullable String value);
@@ -29,10 +29,10 @@ public interface RNSVGClipPathManagerInterface<T extends View> {
2929
void setPointerEvents(T view, @Nullable String value);
3030
void setColor(T view, @Nullable Integer value);
3131
void setFill(T view, Dynamic value);
32-
void setFillOpacity(T view, float value);
32+
void setFillOpacity(T view, Dynamic value);
3333
void setFillRule(T view, int value);
3434
void setStroke(T view, Dynamic value);
35-
void setStrokeOpacity(T view, float value);
35+
void setStrokeOpacity(T view, Dynamic value);
3636
void setStrokeWidth(T view, Dynamic value);
3737
void setStrokeLinecap(T view, int value);
3838
void setStrokeLinejoin(T view, int value);

‎android/src/paper/java/com/facebook/react/viewmanagers/RNSVGDefsManagerDelegate.java‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111

1212
import android.view.View;
1313
import androidx.annotation.Nullable;
14+
import com.facebook.react.bridge.DynamicFromObject;
1415
import com.facebook.react.bridge.ReadableArray;
1516
import com.facebook.react.uimanager.BaseViewManager;
1617
import com.facebook.react.uimanager.BaseViewManagerDelegate;
@@ -27,7 +28,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
2728
mViewManager.setName(view, value == null ? null : (String) value);
2829
break;
2930
case "opacity":
30-
mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue());
31+
mViewManager.setOpacity(view, new DynamicFromObject(value));
3132
break;
3233
case "matrix":
3334
mViewManager.setMatrix(view, (ReadableArray) value);

‎android/src/paper/java/com/facebook/react/viewmanagers/RNSVGDefsManagerInterface.java‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,12 @@
1111

1212
import android.view.View;
1313
import androidx.annotation.Nullable;
14+
import com.facebook.react.bridge.Dynamic;
1415
import com.facebook.react.bridge.ReadableArray;
1516

1617
public interface RNSVGDefsManagerInterface<T extends View> {
1718
void setName(T view, @Nullable String value);
18-
void setOpacity(T view, float value);
19+
void setOpacity(T view, Dynamic value);
1920
void setMatrix(T view, @Nullable ReadableArray value);
2021
void setMask(T view, @Nullable String value);
2122
void setMarkerStart(T view, @Nullable String value);

0 commit comments

Comments
 (0)