Skip to content

Fix multi line stroke span #149

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
insacc wants to merge 9 commits into
base: 0.81.4-discord
Choose a base branch
from
+45 −13
Draft

Fix multi line stroke span #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f394713
Add logs to see what's going on with the stroke span
insacc Feb 3, 2026
feee9c4
Use a different color filter mode
insacc Feb 4, 2026
1043182
Another attempt
insacc Feb 4, 2026
8f9db2d
Use color directly instead of color filter
insacc Feb 4, 2026
86dd13b
Use color directly instead of color filter
insacc Feb 4, 2026
381f146
Try stroke again
insacc Feb 4, 2026
68d1ae3
Change the stroke order
insacc Feb 4, 2026
5155dec
Another attempt at fixing the stroke
insacc Feb 4, 2026
cfe2f58
Attempt to understand the stroke issue
insacc Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 23 additions & 1 deletion .../react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -371,7 +371,29 @@ protected void onDraw(Canvas canvas) {
CharSequence text = getText();
StrokeStyleSpan strokeSpan =
text instanceof Spanned ? StrokeStyleSpan.getStrokeSpan((Spanned) text) : null;
if (strokeSpan == null || !strokeSpan.draw(getPaint(), () -> super.onDraw(canvas))) {

// Debug logging
Layout layout = getLayout();
if (strokeSpan != null && layout != null) {
android.util.Log.d("ReactTextView", "===== ReactTextView.onDraw =====");
android.util.Log.d("ReactTextView", "Layout lineCount: " + layout.getLineCount());
android.util.Log.d("ReactTextView", "View size: " + getWidth() + "x" + getHeight());
android.util.Log.d("ReactTextView", "Canvas clip bounds: " + canvas.getClipBounds());
android.util.Log.d("ReactTextView", "Overflow mode: " + mOverflow);
for (int i = 0; i < layout.getLineCount(); i++) {
android.util.Log.d("ReactTextView", "Line " + i + " - top: " + layout.getLineTop(i) +
", bottom: " + layout.getLineBottom(i) +
", baseline: " + layout.getLineBaseline(i));
}
android.util.Log.d("ReactTextView", "Text: " + text);
android.util.Log.d("ReactTextView", "About to call strokeSpan.draw()");
}

if (strokeSpan == null || !strokeSpan.draw(getPaint(), () -> {
android.util.Log.d("ReactTextView", ">>> Calling super.onDraw() - canvas clip: " + canvas.getClipBounds());
super.onDraw(canvas);
android.util.Log.d("ReactTextView", "<<< super.onDraw() complete");
})) {
super.onDraw(canvas);
}

Expand Down
34 changes: 22 additions & 12 deletions ...ReactAndroid/src/main/java/com/facebook/react/views/text/internal/span/StrokeStyleSpan.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import android.graphics.PorterDuffColorFilter
import android.text.Spanned
import android.text.TextPaint
import android.text.style.CharacterStyle
import android.util.Log

public class StrokeStyleSpan(
public val width: Float,
Expand All @@ -32,35 +33,44 @@ public class StrokeStyleSpan(
return false
}

Log.d("StrokeStyleSpan", "===== STROKE DRAW START =====")
Log.d("StrokeStyleSpan", "Stroke width: $width, color: ${Integer.toHexString(color)}")

val originalStyle = paint.style
val originalStrokeWidth = paint.strokeWidth
val originalStrokeJoin = paint.strokeJoin
val originalStrokeCap = paint.strokeCap
val originalColor = paint.color
val originalColorFilter = paint.colorFilter

// Stroke pass
Log.d("StrokeStyleSpan", "Original paint - style: $originalStyle, strokeWidth: $originalStrokeWidth, color: ${Integer.toHexString(originalColor)}")

// FILL PASS FIRST - explicitly set FILL style
paint.style = Paint.Style.FILL
paint.strokeWidth = 0f
// Keep original color so text color spans work
Log.d("StrokeStyleSpan", ">>> FILL PASS (FIRST) - style: ${paint.style}, strokeWidth: ${paint.strokeWidth}, color: ${Integer.toHexString(paint.color)}")
drawCallback.run()
Log.d("StrokeStyleSpan", "<<< FILL PASS COMPLETE")

// STROKE PASS SECOND - draw stroke on top of fill
paint.style = Paint.Style.STROKE
paint.strokeWidth = width
paint.strokeJoin = Paint.Join.ROUND
paint.strokeCap = Paint.Cap.ROUND
paint.colorFilter = PorterDuffColorFilter(color, PorterDuff.Mode.SRC_IN)
paint.color = color
Log.d("StrokeStyleSpan", ">>> STROKE PASS (SECOND) - style: ${paint.style}, strokeWidth: ${paint.strokeWidth}, color: ${Integer.toHexString(paint.color)}")
drawCallback.run()
Log.d("StrokeStyleSpan", "<<< STROKE PASS COMPLETE")

// Fill pass
paint.style = Paint.Style.FILL
paint.strokeWidth = 0f
paint.color = originalColor
paint.colorFilter = originalColorFilter
drawCallback.run()

// Restore
// Restore paint
paint.style = originalStyle
paint.strokeWidth = originalStrokeWidth
paint.strokeJoin = originalStrokeJoin
paint.strokeCap = originalStrokeCap
paint.color = originalColor
paint.colorFilter = originalColorFilter

Log.d("StrokeStyleSpan", "Paint restored to original state")
Log.d("StrokeStyleSpan", "===== STROKE DRAW END =====")

return true
}
Expand Down
Loading