Skip to content

Commit 7a86571

Browse files
iyegoroffiyegoroff
committed
WIP
1 parent 66a45aa commit 7a86571

18 files changed

Lines changed: 2034 additions & 2446 deletions

File tree

‎android/src/main/java/iyegoroff/RNTextGradient/Linear/RNLinearTextGradientSpan.java‎

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ class TextBounds {
3737
private int mTextEnd;
3838
private String mText;
3939
private float mLineHeight;
40+
private boolean mUseAbsoluteSizes;
4041

4142
public RNLinearTextGradientSpan(
4243
float[] locations,
@@ -49,7 +50,8 @@ public RNLinearTextGradientSpan(
4950
int textStart,
5051
int textEnd,
5152
String text,
52-
float lineHeight
53+
float lineHeight,
54+
boolean useAbsoluteSizes
5355
) {
5456
mLocations = locations;
5557
mColors = colors;
@@ -62,6 +64,7 @@ public RNLinearTextGradientSpan(
6264
mTextEnd = textEnd;
6365
mText = text;
6466
mLineHeight = lineHeight;
67+
mUseAbsoluteSizes = useAbsoluteSizes;
6568
}
6669

6770
@Override
@@ -73,7 +76,12 @@ public void updateDrawState(TextPaint paint) {
7376
mText != null &&
7477
!YogaConstants.isUndefined(mMaxWidth)
7578
) {
76-
float lineHeight = (int) Math.ceil(Float.isNaN(mLineHeight) ? paint.getFontSpacing() : mLineHeight);
79+
80+
FontMetrics metrics = paint.getFontMetrics();
81+
82+
float lineHeight = (int) Math.ceil(
83+
Float.isNaN(mLineHeight) ? (metrics.descent - metrics.ascent) : mLineHeight
84+
);
7785

7886
TextBounds rectBeforeGradient = textBounds(
7987
mText.substring(0, mTextStart),
@@ -93,18 +101,24 @@ public void updateDrawState(TextPaint paint) {
93101

94102
float width = mUseViewFrame ? mMaxWidth : gradientRect.width;
95103
float height = mUseViewFrame ? mMaxHeight : gradientRect.height;
104+
float x0 = mUseAbsoluteSizes ? mStart[0] : (gradientRect.left + mStart[0] * width);
105+
float y0 = mUseAbsoluteSizes ? mStart[1] : (gradientRect.top + mStart[1] * height);
106+
float x1 = mUseAbsoluteSizes ? mEnd[0] : (gradientRect.left + mEnd[0] * width);
107+
float y1 = mUseAbsoluteSizes ? mEnd[1] : (gradientRect.top + mEnd[1] * height);
96108

97109
// Log.d(ReactConstants.TAG, "before: 0 - " + String.valueOf(mTextStart) + " " + textBoundsAsString(rectBeforeGradient));
98110
// Log.d(ReactConstants.TAG, "gradient: " + String.valueOf(mTextStart) + " - " + String.valueOf(mTextEnd) + " " + textBoundsAsString(gradientRect));
99-
// Log.d(ReactConstants.TAG, "width " + String.valueOf(width) + " height " + String.valueOf(height));
100-
// Log.d(ReactConstants.TAG, "lineHeight " + String.valueOf(lineHeight) + " spacing " + String.valueOf(paint.getFontSpacing()));
101-
// Log.d(ReactConstants.TAG, "text " + mText);
111+
// Log.d(ReactConstants.TAG, "width " + String.valueOf(width) + " height " + String.valueOf(height) + " maxWidth " + String.valueOf(mMaxWidth));
112+
// Log.d(ReactConstants.TAG, "lineHeight " + String.valueOf(lineHeight) + " metrics " + String.valueOf(metrics.bottom - metrics.top));
113+
// Log.d(ReactConstants.TAG, "text " + mText.substring(mTextStart, mTextEnd));
114+
// Log.d(ReactConstants.TAG, "metrics " + "top: " + String.valueOf(metrics.top) + " ascent: " + String.valueOf(metrics.ascent) + " descent: " + String.valueOf(metrics.descent) + " bottom: " + String.valueOf(metrics.bottom) + " leading: " + String.valueOf(metrics.leading));
115+
// Log.d(ReactConstants.TAG, "coord " + String.valueOf(mUseAbsoluteSizes) + " x0: " + String.valueOf(x0) + " y0: " + String.valueOf(y0)+ " x1: " + String.valueOf(x1)+ " y1: " + String.valueOf(y1));
102116

103117
LinearGradient gradient = new LinearGradient(
104-
gradientRect.left + mStart[0] * width,
105-
gradientRect.top + mStart[1] * height,
106-
gradientRect.left + mEnd[0] * width,
107-
gradientRect.top + mEnd[1] * height,
118+
x0,
119+
y0,
120+
x1,
121+
y1,
108122
mColors,
109123
mLocations,
110124
Shader.TileMode.CLAMP
@@ -115,9 +129,9 @@ public void updateDrawState(TextPaint paint) {
115129
}
116130
}
117131

118-
// private String textBoundsAsString(TextBounds bounds) {
119-
// return "TextBounds(t: " + bounds.top + " l: " + bounds.left + " b: " + bounds.bottom + " r: " + bounds.right + " h: " + bounds.height + " w: " + bounds.width + " )";
120-
// }
132+
private String textBoundsAsString(TextBounds bounds) {
133+
return "TextBounds(t: " + bounds.top + " l: " + bounds.left + " b: " + bounds.bottom + " r: " + bounds.right + " h: " + bounds.height + " w: " + bounds.width + " )";
134+
}
121135

122136
private TextBounds textBounds(String text, Paint paint, float startX, float startY, float lineHeight) {
123137
TextBounds bounds = new TextBounds();
@@ -133,21 +147,21 @@ private TextBounds textBounds(String text, Paint paint, float startX, float star
133147
float lineOffset = startX;
134148

135149
while (lineEnd <= text.length()) {
136-
float lineWidth = paint.measureText(mText, lineStart, lineEnd) + lineOffset;
150+
float lineWidth = paint.measureText(text, lineStart, lineEnd) + lineOffset;
137151

138152
if (lineWidth > mMaxWidth) {
139153
if (lineEnd == 1) {
140154
bounds.top += lineHeight;
141155
bounds.left = 0;
142156
} else {
143157
bounds.width = Math.max(lineWidth, bounds.width);
158+
bounds.height += lineHeight;
144159
}
145160

146161
lineStart = lineEnd - 1;
147162
lineOffset = 0;
148163
bounds.bottom += lineHeight;
149164
bounds.right = 0;
150-
bounds.height += lineHeight;
151165
bounds.left = 0;
152166
} else {
153167
lineEnd++;

‎android/src/main/java/iyegoroff/RNTextGradient/Linear/RNShadowLinearTextGradient.java‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,8 @@ protected RNSetGradientSpanOperation createSpan(
6363
start,
6464
end,
6565
builder.toString(),
66-
lineHeight
66+
lineHeight,
67+
mUseAbsoluteSizes
6768
);
6869

6970
return new RNSetGradientSpanOperation(start, end, span);

‎android/src/main/java/iyegoroff/RNTextGradient/RNShadowTextGradient.java‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,15 @@
1818
import java.util.ArrayList;
1919
import java.util.List;
2020
import com.facebook.react.uimanager.UIViewOperationQueue;
21+
import android.util.Log;
22+
import com.facebook.react.common.ReactConstants;
2123

2224
public abstract class RNShadowTextGradient extends ReactTextShadowNode {
2325

2426
protected float[] mLocations;
2527
protected int[] mColors;
2628
protected boolean mUseViewFrame;
29+
protected boolean mUseAbsoluteSizes;
2730

2831
@ReactProp(name = "locations")
2932
public void setLocations(ReadableArray locations) {
@@ -68,6 +71,13 @@ public void setUseViewFrame(boolean useViewFrame) {
6871
markUpdated();
6972
}
7073

74+
@ReactProp(name = "useAbsoluteSizes")
75+
public void setUseAbsoluteSizes(boolean useAbsoluteSizes) {
76+
mUseAbsoluteSizes = useAbsoluteSizes;
77+
78+
markUpdated();
79+
}
80+
7181
@Override
7282
public boolean dispatchUpdates(
7383
float absoluteX,
@@ -179,8 +189,9 @@ protected static void buildSpannedGradientFromTextCSSNode(
179189
float lineHeight = textGradientShadowNode.getEffectiveLineHeight();
180190
RNSetGradientSpanOperation spanOp = ((RNShadowTextGradient) textGradientShadowNode)
181191
.createSpan(builder, start, end, maxWidth, maxHeight, lineHeight);
192+
// Log.d(ReactConstants.TAG, "ADD SPAN " + String.valueOf(start) + " - " + String.valueOf(end));
182193

183-
ops.add(spanOp);
194+
ops.add(spanOp);
184195
}
185196
}
186197

‎android/src/main/java/iyegoroff/RNTextGradient/RNTextGradient.java‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,23 @@
66
import java.lang.String;
77
import com.facebook.react.common.ReactConstants;
88
import android.text.SpannableString;
9+
import android.text.Layout;
10+
import android.graphics.Canvas;
911

1012
public class RNTextGradient extends ReactTextView {
1113

1214
public RNTextGradient(Context context) {
1315
super(context);
1416
}
17+
18+
@Override
19+
public void onDraw(Canvas canvas) {
20+
super.onDraw(canvas);
21+
Layout layout = getLayout();
22+
23+
if (layout != null) {
24+
float width = layout.getLineWidth(0);
25+
Log.d(ReactConstants.TAG, "width " + String.valueOf(width));
26+
}
27+
}
1528
}

‎android/src/main/java/iyegoroff/RNTextGradient/RNTextGradientManager.java‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
package iyegoroff.RNTextGradient;
21

2+
package iyegoroff.RNTextGradient;
33
import com.facebook.react.views.text.ReactTextViewManager;
44
import com.facebook.react.views.text.ReactTextView;
55
import com.facebook.react.views.text.ReactTextAnchorViewManager;

‎example/App.js‎

Lines changed: 77 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,96 @@
1-
/**
2-
* Sample React Native App
3-
* https://github.com/facebook/react-native
4-
* @flow
5-
*/
6-
71
import React, { Component } from 'react';
82
import {
9-
Platform,
103
StyleSheet,
114
Text,
12-
View
5+
View,
6+
ScrollView
137
} from 'react-native';
8+
import {LinearTextGradient} from 'react-native-text-gradient';
149

15-
const instructions = Platform.select({
16-
ios: 'Press Cmd+R to reload,\n' +
17-
'Cmd+D or shake for dev menu',
18-
android: 'Double tap R on your keyboard to reload,\n' +
19-
'Shake or press menu button for dev menu',
20-
});
21-
22-
type Props = {};
23-
export default class App extends Component<Props> {
10+
export default class App extends Component {
2411
render() {
12+
const size = 1;
2513
return (
26-
<View style={styles.container}>
27-
<Text style={styles.welcome}>
28-
Welcome to React Native!
29-
</Text>
30-
<Text style={styles.instructions}>
31-
To get started, edit App.js
32-
</Text>
33-
<Text style={styles.instructions}>
34-
{instructions}
35-
</Text>
36-
</View>
14+
<ScrollView style={styles.container}>
15+
{/* <LinearTextGradient
16+
style={styles.gradient}
17+
locations={[0, 0.5, 1]}
18+
colors={['red', 'green', 'blue']}
19+
>
20+
HORIZONTAL GRADIENT███████████████████████████████████████████████████████████████████████
21+
</LinearTextGradient>
22+
<LinearTextGradient
23+
style={styles.gradient}
24+
locations={[0, 0.5, 1]}
25+
colors={['#00FFFF', '#FF00FF', '#FFFF00']}
26+
end={{ x: 0, y: 1 }}
27+
>
28+
VERTICAL GRADIENT█████████████████████████████████████████████████████████████████████████
29+
</LinearTextGradient> */}
30+
<LinearTextGradient
31+
style={styles.gradient}
32+
locations={[0, 0.5, 1]}
33+
colors={['yellow', 'purple', 'lime']}
34+
start={{ x: 1, y: 0 }}
35+
end={{ x: 0, y: 1 }}
36+
>
37+
{/* ██████████████████ */}
38+
{/* ██████████████████████████████████████████████████████████████████████████████████████████ */}
39+
{range(0, size).map(x => (
40+
<LinearTextGradient
41+
key={x}
42+
style={styles.gradient}
43+
useAbsoluteSizes={false}
44+
locations={[0, 0.25, 0.5, 0.75, 1]}
45+
colors={['red', 'white', 'green', 'white', 'purple']}
46+
start={{ x: 0, y: 0 }}
47+
end={{ x: 0, y: 1 }}
48+
>
49+
█████████ qeifmgb fw- wrkbm
50+
</LinearTextGradient>
51+
))}
52+
{/* {range(0, size).map(x => '█████████')} */}
53+
{/* ██████████████████████████████████████████████████████████████████████████████████████████ */}
54+
</LinearTextGradient>
55+
<View style={styles.view}>
56+
{range(0, size).map(x => (
57+
<View key={x} style={styles.subview} />
58+
))}
59+
</View>
60+
</ScrollView>
3761
);
3862
}
3963
}
4064

65+
function range(start, end) {
66+
var array = new Array();
67+
for (var i = start; i < end; i++) {
68+
array.push(i);
69+
}
70+
return array;
71+
}
72+
4173
const styles = StyleSheet.create({
4274
container: {
4375
flex: 1,
44-
justifyContent: 'center',
45-
alignItems: 'center',
46-
backgroundColor: '#F5FCFF',
76+
padding: 5,
77+
backgroundColor: 'lightgray'
4778
},
48-
welcome: {
49-
fontSize: 20,
50-
textAlign: 'center',
51-
margin: 10,
79+
gradient: {
80+
fontSize: 40,
81+
// lineHeight: 47,
82+
marginBottom: 20,
83+
backgroundColor: 'wheat'
5284
},
53-
instructions: {
54-
textAlign: 'center',
55-
color: '#333333',
56-
marginBottom: 5,
85+
view: {
86+
position: 'absolute',
87+
// paddingTop: 5.5
5788
},
89+
subview: {
90+
width: 30,
91+
height: 47,
92+
backgroundColor: 'transparent',
93+
borderColor: 'black',
94+
borderBottomWidth: 1
95+
}
5896
});

‎example/android/app/BUCK‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,12 @@ android_library(
4545

4646
android_build_config(
4747
name = "build_config",
48-
package = "com.example",
48+
package = "iyegoroff.RNTextGradientExample",
4949
)
5050

5151
android_resource(
5252
name = "res",
53-
package = "com.example",
53+
package = "iyegoroff.RNTextGradientExample",
5454
res = "src/main/res",
5555
)
5656

‎example/android/app/build.gradle‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ android {
9898
buildToolsVersion "23.0.1"
9999

100100
defaultConfig {
101-
applicationId "com.example"
101+
applicationId "iyegoroff.RNTextGradientExample"
102102
minSdkVersion 16
103103
targetSdkVersion 22
104104
versionCode 1

‎example/android/app/src/main/AndroidManifest.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
2-
package="com.example">
2+
package="iyegoroff.RNTextGradientExample">
33

44
<uses-permission android:name="android.permission.INTERNET" />
55
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

example/android/app/src/main/java/com/example/MainActivity.java renamed to example/android/app/src/main/java/iyegoroff/RNTextGradientExample/MainActivity.java

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
package com.example;
1+
package iyegoroff.RNTextGradientExample;
22

33
import com.facebook.react.ReactActivity;
44

0 commit comments

Comments
 (0)