status-im
/
react-native-linear-gradient
mirror of https://github.com/status-im/react-native-linear-gradient.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix per corner border radius on android.

This commit is contained in:
Andrei Alecu 2016-04-20 17:44:20 +03:00
parent 895cb02d31
commit 5cbf3ab137
3 changed files with 30 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
android/src/main/java/com/BV/LinearGradient/LinearGradientManager.java
View File

@ -15,7 +15,7 @@ public class LinearGradientManager extends SimpleViewManager<LinearGradientView>
public static final String PROP_LOCATIONS = "locations"; public static final String PROP_LOCATIONS = "locations";
public static final String PROP_START_POS = "start"; public static final String PROP_START_POS = "start";
public static final String PROP_END_POS = "end"; public static final String PROP_END_POS = "end";
public static final String PROP_BORDER_RADIUS = "borderRadius"; public static final String PROP_BORDER_RADII = "borderRadii";
@Override @Override
public String getName() { public String getName() {
@ -49,8 +49,8 @@ public class LinearGradientManager extends SimpleViewManager<LinearGradientView>
// temporary solution until following issue is resolved: // temporary solution until following issue is resolved:
// https://github.com/facebook/react-native/issues/3198 // https://github.com/facebook/react-native/issues/3198
@ReactProp(name=PROP_BORDER_RADIUS, defaultFloat = 0f) @ReactProp(name=PROP_BORDER_RADII)
public void setBorderRadius(LinearGradientView gradientView, float borderRadius) { public void setBorderRadii(LinearGradientView gradientView, ReadableArray borderRadii) {
gradientView.setBorderRadius(PixelUtil.toPixelFromDIP(borderRadius)); gradientView.setBorderRadii(borderRadii);
} }
} }

15
android/src/main/java/com/BV/LinearGradient/LinearGradientView.java
View File

@ -1,6 +1,7 @@
package com.BV.LinearGradient; package com.BV.LinearGradient;
import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.uimanager.PixelUtil;
import android.content.Context; import android.content.Context;
import android.graphics.Canvas; import android.graphics.Canvas;
@ -23,7 +24,7 @@ public class LinearGradientView extends View {
private float[] mEndPos = {0, 1}; private float[] mEndPos = {0, 1};
private int[] mColors; private int[] mColors;
private int[] mSize = {0, 0}; private int[] mSize = {0, 0};
private float mBorderRadius = 0f; private float[] mBorderRadii = {0, 0, 0, 0, 0, 0, 0, 0};
public LinearGradientView(Context context) { public LinearGradientView(Context context) {
@ -60,8 +61,13 @@ public class LinearGradientView extends View {
drawGradient(); drawGradient();
} }
public void setBorderRadius(float borderRadius) { public void setBorderRadii(ReadableArray borderRadii) {
mBorderRadius = borderRadius; float[] _radii = new float[borderRadii.size()];
for (int i=0; i < _radii.length; i++)
{
_radii[i] = PixelUtil.toPixelFromDIP((float) borderRadii.getDouble(i));
}
mBorderRadii = _radii;
updatePath(); updatePath();
drawGradient(); drawGradient();
} }
@ -98,8 +104,7 @@ public class LinearGradientView extends View {
mTempRectForBorderRadius.set(0f, 0f, (float) mSize[0], (float) mSize[1]); mTempRectForBorderRadius.set(0f, 0f, (float) mSize[0], (float) mSize[1]);
mPathForBorderRadius.addRoundRect( mPathForBorderRadius.addRoundRect(
mTempRectForBorderRadius, mTempRectForBorderRadius,
mBorderRadius, mBorderRadii,
mBorderRadius,
Path.Direction.CW); Path.Direction.CW);
} }

18
index.android.js
View File

@ -16,7 +16,21 @@ var LinearGradient = React.createClass({
// inherit container borderRadius until this issue is resolved: // inherit container borderRadius until this issue is resolved:
// https://github.com/facebook/react-native/issues/3198 // https://github.com/facebook/react-native/issues/3198
var borderRadius = style && flattenStyle(style).borderRadius || 0; var flatStyle = style && flattenStyle(style);
var borderRadius = flatStyle.borderRadius || 0;
// this is the format taken by:
// http://developer.android.com/reference/android/graphics/Path.html#addRoundRect(android.graphics.RectF, float[], android.graphics.Path.Direction)
var borderRadiiPerCorner = [
flatStyle.borderTopLeftRadius || borderRadius,
flatStyle.borderTopLeftRadius || borderRadius,
flatStyle.borderTopRightRadius || borderRadius,
flatStyle.borderTopRightRadius || borderRadius,
flatStyle.borderBottomRightRadius || borderRadius,
flatStyle.borderBottomRightRadius || borderRadius,
flatStyle.borderBottomLeftRadius || borderRadius,
flatStyle.borderBottomLeftRadius || borderRadius
];
return ( return (
<View {...otherProps} style={style}> <View {...otherProps} style={style}>
@ -26,7 +40,7 @@ var LinearGradient = React.createClass({
start={start} start={start}
end={end} end={end}
locations={locations} locations={locations}
borderRadius={borderRadius} borderRadii={borderRadiiPerCorner}
/> />
{ children } { children }
</View> </View>