Support setting dimensions of Svg using stylesheet.

[android] Support borders on Svg root
This commit is contained in:
Mikael Sand
2018-10-05 03:54:56 +03:00
parent 2d9d73804c
commit 4f5c226ef8
3 changed files with 21 additions and 14 deletions
@@ -14,7 +14,6 @@ import android.graphics.Bitmap;
import android.graphics.Canvas; import android.graphics.Canvas;
import android.graphics.Point; import android.graphics.Point;
import android.view.View; import android.view.View;
import android.view.ViewGroup;
import com.facebook.react.bridge.ReactContext; import com.facebook.react.bridge.ReactContext;
import com.facebook.react.uimanager.ReactCompoundView; 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. * Custom {@link View} implementation that draws an RNSVGSvg React view and its children.
*/ */
@SuppressLint("ViewConstructor") @SuppressLint("ViewConstructor")
public class SvgView extends ViewGroup implements ReactCompoundView { public class SvgView extends ReactViewGroup implements ReactCompoundView {
@SuppressWarnings("unused") @SuppressWarnings("unused")
public enum Events { public enum Events {
@@ -53,6 +52,7 @@ public class SvgView extends ViewGroup implements ReactCompoundView {
super(reactContext); super(reactContext);
} }
@Override
public void addView(View child, int index, LayoutParams params) { public void addView(View child, int index, LayoutParams params) {
if (!(child instanceof RenderableView)) { if (!(child instanceof RenderableView)) {
super.addView(child, index, params); super.addView(child, index, params);
@@ -12,9 +12,11 @@ package com.horcrux.svg;
import android.util.SparseArray; import android.util.SparseArray;
import com.facebook.react.uimanager.ThemedReactContext; 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.YogaMeasureFunction;
import com.facebook.yoga.YogaMeasureMode; import com.facebook.yoga.YogaMeasureMode;
import com.facebook.yoga.YogaMeasureOutput;
import com.facebook.yoga.YogaNode; import com.facebook.yoga.YogaNode;
import javax.annotation.Nullable; import javax.annotation.Nullable;
@@ -23,7 +25,7 @@ import javax.annotation.Nullable;
* ViewManager for RNSVGSvgView React views. Renders as a {@link SvgView} and handles * 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. * invalidating the native view on shadow view updates happening in the underlying tree.
*/ */
class SvgViewManager extends ViewGroupManager<SvgView> { class SvgViewManager extends ReactViewManager {
private static final String REACT_CLASS = "RNSVGSvgView"; private static final String REACT_CLASS = "RNSVGSvgView";
@@ -35,7 +37,7 @@ class SvgViewManager extends ViewGroupManager<SvgView> {
YogaMeasureMode widthMode, YogaMeasureMode widthMode,
float height, float height,
YogaMeasureMode heightMode) { 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<SvgView> {
} }
@Override @Override
protected SvgView createViewInstance(ThemedReactContext reactContext) { public SvgView createViewInstance(ThemedReactContext reactContext) {
return new SvgView(reactContext); return new SvgView(reactContext);
} }
@Override @Override
public void updateExtraData(SvgView root, Object extraData) { public void updateExtraData(ReactViewGroup root, Object extraData) {
super.updateExtraData(root, extraData);
root.invalidate(); root.invalidate();
} }
@Override @Override
public void onDropViewInstance(SvgView view) { public void onDropViewInstance(ReactViewGroup view) {
super.onDropViewInstance(view); super.onDropViewInstance(view);
int tag = view.getId(); int tag = view.getId();
+10 -6
View File
@@ -23,7 +23,8 @@ let id = 0;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
svg: { svg: {
backgroundColor: "transparent" backgroundColor: "transparent",
borderWidth: 0
} }
}); });
@@ -73,17 +74,20 @@ class Svg extends Shape {
render() { render() {
const { const {
opacity, opacity,
width,
height,
viewBox, viewBox,
preserveAspectRatio, preserveAspectRatio,
style, style,
color,
children, children,
...props ...props
} = this.props; } = this.props;
let dimensions; const stylesAndProps = { ...style, ...props };
const {
color,
width,
height,
} = stylesAndProps;
let dimensions;
if (width && height) { if (width && height) {
dimensions = { dimensions = {
width: width[width.length - 1] === "%" ? width : +width, width: width[width.length - 1] === "%" ? width : +width,
@@ -100,7 +104,7 @@ class Svg extends Shape {
{...props} {...props}
bbWidth={w} bbWidth={w}
bbHeight={h} bbHeight={h}
tintColor={color || style && style.color} tintColor={color}
{...extractResponder(props, this)} {...extractResponder(props, this)}
{...extractViewBox({ viewBox, preserveAspectRatio })} {...extractViewBox({ viewBox, preserveAspectRatio })}
ref={ele => { ref={ele => {