@matiks/rn-stroke-text 0.0.1

package/android/src/main/java/com/margelo/nitro/rnstroketext/StrokeTextView.kt

@@ -0,0 +1,348 @@
+package com.margelo.nitro.rnstroketext
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.Typeface
+import android.text.Layout
+import android.text.StaticLayout
+import android.text.TextPaint
+import android.text.TextUtils
+import android.util.TypedValue
+import android.view.View
+import kotlin.math.ceil
+import kotlin.math.max
+
+class StrokeTextView(
+    context: Context
+) : View(context) {
+
+    // ─────────────────────────────────────────────
+    // Props
+    // ─────────────────────────────────────────────
+
+    private var text: String = ""
+    private var fontSizePx: Float = sp(14f)
+    private var textColor: Int = Color.BLACK
+    private var strokeColor: Int = Color.WHITE
+    private var strokeWidthPx: Float = dp(1f)
+    private var fontFamily: String = "sans-serif"
+    private var numberOfLines: Int = 0
+    private var ellipsis: Boolean = false
+    private var alignment: Layout.Alignment = Layout.Alignment.ALIGN_CENTER
+    private var customWidthPx: Float = 0f
+
+    // ─────────────────────────────────────────────
+    // Paints
+    // ─────────────────────────────────────────────
+
+    private val textPaint = TextPaint(Paint.ANTI_ALIAS_FLAG).apply {
+        style = Paint.Style.FILL
+    }
+
+    private val strokePaint = TextPaint(Paint.ANTI_ALIAS_FLAG).apply {
+        style = Paint.Style.STROKE
+        strokeJoin = Paint.Join.ROUND
+        strokeCap = Paint.Cap.ROUND
+    }
+
+    // ─────────────────────────────────────────────
+    // Layout
+    // ─────────────────────────────────────────────
+
+    private var textLayout: StaticLayout? = null
+    private var strokeLayout: StaticLayout? = null
+    private var layoutDirty = true
+
+    private val fontCache = HashMap<String, Typeface?>()
+
+    // ─────────────────────────────────────────────
+    // Measurement (RN / Nitro safe)
+    // ─────────────────────────────────────────────
+
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        updatePaints()
+
+        val measuredWidth = resolveMeasuredWidth(widthMeasureSpec)
+        ensureLayout(measuredWidth)
+
+        val desiredHeight = (textLayout?.height ?: 0).coerceAtLeast(1)
+
+        setMeasuredDimension(
+            measuredWidth,
+            resolveSize(desiredHeight, heightMeasureSpec)
+        )
+    }
+
+    private fun resolveMeasuredWidth(spec: Int): Int {
+        val mode = MeasureSpec.getMode(spec)
+        val size = MeasureSpec.getSize(spec)
+
+        // Width explicitly provided from JS prop
+        if (customWidthPx > 0f) {
+            return ceil(customWidthPx).toInt().coerceAtLeast(1)
+        }
+
+        // Exact width from Yoga
+        if (mode == MeasureSpec.EXACTLY && size > 0) {
+            return size
+        }
+
+        // Intrinsic width from text
+        val textWidth = ceil(measureTextWidth()).toInt().coerceAtLeast(1)
+
+        return when (mode) {
+            MeasureSpec.AT_MOST -> minOf(size, textWidth)
+            else -> textWidth
+        }
+    }
+
+    // ─────────────────────────────────────────────
+    // Layout creation
+    // ─────────────────────────────────────────────
+
+    private fun updatePaints() {
+        val typeface = getFont(fontFamily)
+
+        textPaint.apply {
+            this.typeface = typeface
+            textSize = fontSizePx
+            color = textColor
+        }
+
+        strokePaint.apply {
+            this.typeface = typeface
+            textSize = fontSizePx
+            strokeWidth = strokeWidthPx
+            color = strokeColor
+        }
+    }
+
+    private fun ensureLayout(width: Int) {
+        if (!layoutDirty && textLayout != null) return
+
+        val safeWidth = width.coerceAtLeast(1)
+        updatePaints()
+
+        var displayText: CharSequence =
+            if (ellipsis) {
+                TextUtils.ellipsize(
+                    text,
+                    textPaint,
+                    safeWidth.toFloat(),
+                    TextUtils.TruncateAt.END
+                )
+            } else {
+                text
+            }
+
+        var layout = StaticLayout(
+            displayText,
+            textPaint,
+            safeWidth,
+            alignment,
+            1f,
+            0f,
+            false
+        )
+
+        if (numberOfLines > 0 && layout.lineCount > numberOfLines) {
+            val end = layout.getLineEnd(numberOfLines - 1)
+            displayText = displayText.subSequence(0, end)
+
+            layout = StaticLayout(
+                displayText,
+                textPaint,
+                safeWidth,
+                alignment,
+                1f,
+                0f,
+                false
+            )
+        }
+
+        textLayout = layout
+        strokeLayout = StaticLayout(
+            displayText,
+            strokePaint,
+            safeWidth,
+            alignment,
+            1f,
+            0f,
+            false
+        )
+
+        layoutDirty = false
+    }
+
+    fun getTextDimensions(): Pair<Double, Double> {
+        updatePaints()
+        
+        // Ensure we have a valid layout for measurement. 
+        // If width is 0/unspecified, we measure intrinsic width.
+        val measureWidth = if (customWidthPx > 0f) {
+            ceil(customWidthPx).toInt()
+        } else {
+            ceil(measureTextWidth()).toInt()
+        }
+        
+        // We create a temporary layout if needed to get accurate height for the given width
+        // But since ensureLayout caches the layout based on last width, we might want to just ensure layout exists.
+        // For accurate "intrinsic" measurement, we usually want the width to be the text width if not constrained.
+        
+        ensureLayout(measureWidth)
+
+        val w = textLayout?.width?.toDouble() ?: 0.0
+        val h = textLayout?.height?.toDouble() ?: 0.0
+        
+        return Pair(w, h)
+    }
+
+    private fun measureTextWidth(): Float {
+        var maxWidth = 0f
+        for (line in text.split("\n")) {
+            maxWidth = max(maxWidth, textPaint.measureText(line))
+        }
+        return maxWidth + strokeWidthPx * 2
+    }
+
+    // ─────────────────────────────────────────────
+    // Drawing
+    // ─────────────────────────────────────────────
+
+    override fun onDraw(canvas: Canvas) {
+        super.onDraw(canvas)
+        ensureLayout(width)
+        strokeLayout?.draw(canvas)
+        textLayout?.draw(canvas)
+    }
+
+    // ─────────────────────────────────────────────
+    // Props setters (Nitro)
+    // ─────────────────────────────────────────────
+
+    fun setText(value: String) {
+        if (text != value) {
+            text = value
+            invalidateLayout()
+        }
+    }
+
+    fun setFontSize(value: Float) {
+        val px = sp(value)
+        if (fontSizePx != px) {
+            fontSizePx = px
+            invalidateLayout()
+        }
+    }
+
+    fun setTextColor(value: String) {
+        val c = parseColor(value)
+        if (textColor != c) {
+            textColor = c
+            invalidate()
+        }
+    }
+
+    fun setStrokeColor(value: String) {
+        val c = parseColor(value)
+        if (strokeColor != c) {
+            strokeColor = c
+            invalidate()
+        }
+    }
+
+    fun setStrokeWidth(value: Float) {
+        val px = dp(value)
+        if (strokeWidthPx != px) {
+            strokeWidthPx = px
+            invalidateLayout()
+        }
+    }
+
+    fun setFontFamily(value: String) {
+        if (fontFamily != value) {
+            fontFamily = value
+            invalidateLayout()
+        }
+    }
+
+    fun setTextAlignment(value: String) {
+        val newAlignment = when (value) {
+            "left" -> Layout.Alignment.ALIGN_NORMAL
+            "right" -> Layout.Alignment.ALIGN_OPPOSITE
+            "center" -> Layout.Alignment.ALIGN_CENTER
+            else -> alignment
+        }
+        if (alignment != newAlignment) {
+            alignment = newAlignment
+            invalidateLayout()
+        }
+    }
+
+    fun setNumberOfLines(value: Int) {
+        if (numberOfLines != value) {
+            numberOfLines = value
+            invalidateLayout()
+        }
+    }
+
+    fun setEllipsis(value: Boolean) {
+        if (ellipsis != value) {
+            ellipsis = value
+            invalidateLayout()
+        }
+    }
+
+    fun setCustomWidth(value: Float) {
+        val px = dp(value)
+        if (customWidthPx != px) {
+            customWidthPx = px
+            invalidateLayout()
+        }
+    }
+
+    // ─────────────────────────────────────────────
+    // Helpers
+    // ─────────────────────────────────────────────
+
+    private fun invalidateLayout() {
+        layoutDirty = true
+        requestLayout()
+        invalidate()
+    }
+
+    private fun sp(v: Float): Float =
+        TypedValue.applyDimension(
+            TypedValue.COMPLEX_UNIT_SP,
+            v,
+            resources.displayMetrics
+        )
+
+    private fun dp(v: Float): Float =
+        TypedValue.applyDimension(
+            TypedValue.COMPLEX_UNIT_DIP,
+            v,
+            resources.displayMetrics
+        )
+
+    private fun parseColor(color: String): Int =
+        try {
+            Color.parseColor(color)
+        } catch (_: Exception) {
+            Color.BLACK
+        }
+
+    private fun getFont(fontFamily: String): Typeface? {
+        return fontCache[fontFamily] ?: run {
+            val tf = FontUtil.getFont(context, fontFamily)
+            fontCache[fontFamily] = tf
+            tf
+        }
+    }
+
+    init {
+        setWillNotDraw(false)
+    }
+}

package/ios/Bridge.h

@@ -0,0 +1,8 @@
+//
+//  Bridge.h
+//  NitroRnStrokeText
+//
+//  Created by Marc Rousavy on 22.07.24.
+//
+
+#pragma once

package/ios/HybridMatiksStrokeText.swift

@@ -0,0 +1,97 @@
+import Foundation
+import NitroModules
+import UIKit
+
+class HybridMatiksStrokeText: HybridMatiksStrokeTextSpec {
+    var view: UIView {
+        return strokeTextView
+    }
+    
+    private let strokeTextView: StrokeTextView
+
+    public override init() {
+        self.strokeTextView = StrokeTextView(frame: .zero)
+        super.init()
+    }
+
+    // MARK: - Props
+    
+    var width: Double? = 0 {
+        didSet {
+            strokeTextView.width = NSNumber(value: width ?? 0)
+        }
+    }
+    
+    var text: String = "" {
+        didSet {
+            strokeTextView.text = text
+        }
+    }
+    
+    var fontSize: Double? = 0 {
+        didSet {
+            strokeTextView.fontSize = NSNumber(value: fontSize ?? 0)
+        }
+    }
+    
+    var color: String? = "" {
+        didSet {
+            strokeTextView.color = color ?? "#000000"
+        }
+    }
+    
+    var strokeColor: String? = "" {
+        didSet {
+            strokeTextView.strokeColor = strokeColor ?? "#FFFFFF"
+        }
+    }
+    
+    var strokeWidth: Double? = 0 {
+        didSet {
+            strokeTextView.strokeWidth = NSNumber(value: strokeWidth ?? 0)
+        }
+    }
+    
+    var fontFamily: String? = "" {
+        didSet {
+            strokeTextView.fontFamily = fontFamily ?? ""
+        }
+    }
+    
+    var align: TextAlign? = .center {
+        didSet {
+            switch align {
+            case .left: strokeTextView.align = "left"
+            case .right: strokeTextView.align = "right"
+            case .center: strokeTextView.align = "center"
+            case .none: strokeTextView.align = "center"
+            }
+        }
+    }
+    
+    var numberOfLines: Double? = 0 {
+        didSet {
+            strokeTextView.numberOfLines = NSNumber(value: numberOfLines ?? 0)
+        }
+    }
+    
+    var ellipsis: Bool? = false {
+        didSet {
+            strokeTextView.ellipsis = ellipsis ?? false
+        }
+    }
+
+    // MARK: - Methods
+    
+    func measureDimensions() -> Dimensions {
+        // StrokeTextView.measureDimensions returns [String: NSNumber]
+        // We need to return Dimensions struct which is generated by Nitro
+        
+        let dims = strokeTextView.measureDimensions()
+        let w = dims["width"]?.doubleValue ?? 0.0
+        let h = dims["height"]?.doubleValue ?? 0.0
+        
+        // Assuming Dimensions is a generated struct with init(width: Double, height: Double)
+        return Dimensions(width: w, height: h)
+    }
+}

package/ios/StrokeTextView.swift

@@ -0,0 +1,174 @@
+import UIKit
+import NitroModules
+
+class StrokeTextView: UIView {
+
+    private let label = StrokedTextLabel()
+    private var fontCache: [String: UIFont] = [:]
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+
+        label.translatesAutoresizingMaskIntoConstraints = false
+        addSubview(label)
+
+        NSLayoutConstraint.activate([
+            label.centerXAnchor.constraint(equalTo: centerXAnchor),
+            label.centerYAnchor.constraint(equalTo: centerYAnchor)
+        ])
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    // MARK: - Layout (THIS replaces UIManager.setSize)
+
+    override var intrinsicContentSize: CGSize {
+        return label.intrinsicContentSize
+    }
+
+    // MARK: - Props (Nitro-style)
+
+    @objc var text: String = "" {
+        didSet {
+            label.text = text
+            invalidateIntrinsicContentSize()
+        }
+    }
+
+    @objc var fontSize: NSNumber = 14 {
+        didSet {
+            label.font = label.font.withSize(CGFloat(truncating: fontSize))
+            invalidateIntrinsicContentSize()
+        }
+    }
+
+    @objc var fontFamily: String = "Helvetica" {
+        didSet {
+            let key = "\(fontFamily)-\(fontSize)"
+            if let cached = fontCache[key] {
+                label.font = cached
+            } else {
+                let size = CGFloat(truncating: fontSize)
+                let font =
+                    UIFont(name: fontFamily, size: size)
+                    ?? UIFont.systemFont(ofSize: size)
+
+                fontCache[key] = font
+                label.font = font
+            }
+            invalidateIntrinsicContentSize()
+        }
+    }
+
+    @objc var color: String = "#000000" {
+        didSet {
+            label.textColor = colorStringToUIColor(color)
+        }
+    }
+
+    @objc var strokeColor: String = "#FFFFFF" {
+        didSet {
+            label.outlineColor = colorStringToUIColor(strokeColor)
+        }
+    }
+
+    @objc var strokeWidth: NSNumber = 0 {
+        didSet {
+            label.outlineWidth = CGFloat(truncating: strokeWidth)
+        }
+    }
+
+    @objc var align: String = "center" {
+        didSet {
+            label.align =
+                align == "left" ? .left :
+                align == "right" ? .right : .center
+        }
+    }
+
+    @objc var ellipsis: Bool = false {
+        didSet {
+            label.ellipsis = ellipsis
+            invalidateIntrinsicContentSize()
+        }
+    }
+
+    @objc var numberOfLines: NSNumber = 0 {
+        didSet {
+            label.numberOfLines = Int(truncating: numberOfLines)
+            invalidateIntrinsicContentSize()
+        }
+    }
+
+    @objc var width: NSNumber = 0 {
+        didSet {
+            label.customWidth = CGFloat(truncating: width)
+            invalidateIntrinsicContentSize()
+        }
+    }
+
+    // MARK: - Hybrid Methods (optional but powerful)
+
+    @objc func measureDimensions() -> [String: NSNumber] {
+        let size = intrinsicContentSize
+        return [
+            "width": NSNumber(value: Double(size.width)),
+            "height": NSNumber(value: Double(size.height))
+        ]
+    }
+
+    // MARK: - Helpers
+
+    private func colorStringToUIColor(_ colorString: String) -> UIColor {
+        let cString = colorString.trimmingCharacters(in: .whitespacesAndNewlines).lowercased()
+
+        // Handle named colors
+        switch cString {
+        case "black": return .black
+        case "darkgray", "darkgrey": return .darkGray
+        case "lightgray", "lightgrey": return .lightGray
+        case "white": return .white
+        case "gray", "grey": return .gray
+        case "red": return .red
+        case "green": return .green
+        case "blue": return .blue
+        case "cyan": return .cyan
+        case "yellow": return .yellow
+        case "magenta": return .magenta
+        case "orange": return .orange
+        case "purple": return .purple
+        case "brown": return .brown
+        case "clear": return .clear
+        default: break
+        }
+
+        // Handle Hex
+        var hex = cString.uppercased()
+        if hex.hasPrefix("#") {
+            hex.remove(at: hex.startIndex)
+        }
+
+        var rgbValue: UInt64 = 0
+        Scanner(string: hex).scanHexInt64(&rgbValue)
+
+        if hex.count == 6 {
+            return UIColor(
+                red: CGFloat((rgbValue & 0xFF0000) >> 16) / 255.0,
+                green: CGFloat((rgbValue & 0x00FF00) >> 8) / 255.0,
+                blue: CGFloat(rgbValue & 0x0000FF) / 255.0,
+                alpha: 1.0
+            )
+        } else if hex.count == 8 {
+            return UIColor(
+                red: CGFloat((rgbValue & 0xFF000000) >> 24) / 255.0,
+                green: CGFloat((rgbValue & 0x00FF0000) >> 16) / 255.0,
+                blue: CGFloat((rgbValue & 0x0000FF00) >> 8) / 255.0,
+                alpha: CGFloat(rgbValue & 0x000000FF) / 255.0
+            )
+        }
+
+        return .black
+    }
+}

package/ios/StrokedTextLabel.swift

@@ -0,0 +1,62 @@
+import UIKit
+
+class StrokedTextLabel: UILabel {
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        self.numberOfLines = 0
+    }
+
+    private var textInsets: UIEdgeInsets = .zero
+
+    public func updateTextInsets() {
+        textInsets = UIEdgeInsets(top: outlineWidth, left: outlineWidth, bottom: outlineWidth, right: outlineWidth)
+    }
+
+    var outlineWidth: CGFloat = 0
+    var outlineColor: UIColor = .clear
+    var align: NSTextAlignment = .center
+    var customWidth: CGFloat = 0
+    var ellipsis: Bool = false
+
+
+    override func drawText(in rect: CGRect) {
+        let shadowOffset = self.shadowOffset
+        let textColor = self.textColor
+
+        self.lineBreakMode = ellipsis ? .byTruncatingTail : .byWordWrapping
+
+        let adjustedRect = rect.inset(by: textInsets)
+
+        let context = UIGraphicsGetCurrentContext()
+        context?.setLineWidth(outlineWidth)
+        context?.setLineJoin(.round)
+        context?.setTextDrawingMode(.stroke)
+        self.textAlignment = align
+        self.textColor = outlineColor
+
+        super.drawText(in: adjustedRect)
+
+        context?.setTextDrawingMode(.fill)
+        self.textColor = textColor
+        self.shadowOffset = CGSize(width: 0, height: 0)
+        super.drawText(in: adjustedRect)
+
+        self.shadowOffset = shadowOffset
+    }
+
+    override var intrinsicContentSize: CGSize {
+        var contentSize = super.intrinsicContentSize
+        if customWidth > 0 {
+            contentSize.width = customWidth
+        } else {
+            contentSize.width += outlineWidth
+        }
+
+        contentSize.height += outlineWidth
+        return contentSize
+    }
+}

package/lib/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { type MatiksStrokeTextProps } from "./specs/Stroke.nitro";
+interface StrokeTextViewProps extends MatiksStrokeTextProps {
+    styles?: {
+        width?: number;
+        height?: number;
+    };
+}
+declare const _default: React.MemoExoticComponent<({ styles, ...props }: StrokeTextViewProps) => React.JSX.Element>;
+export default _default;