diff --git a/android/src/main/java/com/horcrux/svg/SvgView.java b/android/src/main/java/com/horcrux/svg/SvgView.java index ecf06d4e..d730b558 100644 --- a/android/src/main/java/com/horcrux/svg/SvgView.java +++ b/android/src/main/java/com/horcrux/svg/SvgView.java @@ -14,7 +14,6 @@ import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Point; import android.view.View; -import android.view.ViewGroup; import com.facebook.react.bridge.ReactContext; import com.facebook.react.uimanager.ReactCompoundView; @@ -27,7 +26,7 @@ import javax.annotation.Nullable; * Custom {@link View} implementation that draws an RNSVGSvg React view and its children. */ @SuppressLint("ViewConstructor") -public class SvgView extends ViewGroup implements ReactCompoundView { +public class SvgView extends ReactViewGroup implements ReactCompoundView { @SuppressWarnings("unused") public enum Events { @@ -53,6 +52,7 @@ public class SvgView extends ViewGroup implements ReactCompoundView { super(reactContext); } + @Override public void addView(View child, int index, LayoutParams params) { if (!(child instanceof RenderableView)) { super.addView(child, index, params); diff --git a/android/src/main/java/com/horcrux/svg/SvgViewManager.java b/android/src/main/java/com/horcrux/svg/SvgViewManager.java index 9326d65b..663d9b9c 100644 --- a/android/src/main/java/com/horcrux/svg/SvgViewManager.java +++ b/android/src/main/java/com/horcrux/svg/SvgViewManager.java @@ -12,9 +12,11 @@ package com.horcrux.svg; import android.util.SparseArray; import com.facebook.react.uimanager.ThemedReactContext; -import com.facebook.react.uimanager.ViewGroupManager; +import com.facebook.react.views.view.ReactViewGroup; +import com.facebook.react.views.view.ReactViewManager; import com.facebook.yoga.YogaMeasureFunction; import com.facebook.yoga.YogaMeasureMode; +import com.facebook.yoga.YogaMeasureOutput; import com.facebook.yoga.YogaNode; import javax.annotation.Nullable; @@ -23,7 +25,7 @@ import javax.annotation.Nullable; * ViewManager for RNSVGSvgView React views. Renders as a {@link SvgView} and handles * invalidating the native view on shadow view updates happening in the underlying tree. */ -class SvgViewManager extends ViewGroupManager { +class SvgViewManager extends ReactViewManager { private static final String REACT_CLASS = "RNSVGSvgView"; @@ -35,7 +37,7 @@ class SvgViewManager extends ViewGroupManager { YogaMeasureMode widthMode, float height, YogaMeasureMode heightMode) { - throw new IllegalStateException("SurfaceView should have explicit width and height set"); + return YogaMeasureOutput.make(width, height); } }; @@ -77,17 +79,18 @@ class SvgViewManager extends ViewGroupManager { } @Override - protected SvgView createViewInstance(ThemedReactContext reactContext) { + public SvgView createViewInstance(ThemedReactContext reactContext) { return new SvgView(reactContext); } @Override - public void updateExtraData(SvgView root, Object extraData) { + public void updateExtraData(ReactViewGroup root, Object extraData) { + super.updateExtraData(root, extraData); root.invalidate(); } @Override - public void onDropViewInstance(SvgView view) { + public void onDropViewInstance(ReactViewGroup view) { super.onDropViewInstance(view); int tag = view.getId(); diff --git a/elements/Svg.js b/elements/Svg.js index 5e8c1a26..b7805ecd 100644 --- a/elements/Svg.js +++ b/elements/Svg.js @@ -23,7 +23,8 @@ let id = 0; const styles = StyleSheet.create({ svg: { - backgroundColor: "transparent" + backgroundColor: "transparent", + borderWidth: 0 } }); @@ -73,17 +74,20 @@ class Svg extends Shape { render() { const { opacity, - width, - height, viewBox, preserveAspectRatio, style, - color, children, ...props } = this.props; - let dimensions; + const stylesAndProps = { ...style, ...props }; + const { + color, + width, + height, + } = stylesAndProps; + let dimensions; if (width && height) { dimensions = { width: width[width.length - 1] === "%" ? width : +width, @@ -100,7 +104,7 @@ class Svg extends Shape { {...props} bbWidth={w} bbHeight={h} - tintColor={color || style && style.color} + tintColor={color} {...extractResponder(props, this)} {...extractViewBox({ viewBox, preserveAspectRatio })} ref={ele => {