@whetware/react-native-stroke-text 0.0.2

package/ios/StrokeTextView.swift

@@ -0,0 +1,326 @@
+import UIKit
+
+final class StrokeTextView: UIView {
+  private let label = StrokedTextLabel()
+
+  var text: String = "" {
+    didSet { updateText() }
+  }
+
+  var color: UIColor = StrokeTextView.defaultTextColor() {
+    didSet { label.textColor = color }
+  }
+
+  var strokeColor: UIColor = .clear {
+    didSet { label.outlineColor = strokeColor }
+  }
+
+  var strokeWidth: CGFloat = 0 {
+    didSet { label.outlineWidth = strokeWidth }
+  }
+
+  var fontSize: CGFloat = 14 {
+    didSet { updateFont() }
+  }
+
+  var fontWeight: String = "400" {
+    didSet { updateFont() }
+  }
+
+  var fontFamily: String? = nil {
+    didSet { updateFont() }
+  }
+
+  var fontStyle: StrokeTextFontStyle = .normal {
+    didSet { updateFont() }
+  }
+
+  var allowFontScaling: Bool = true {
+    didSet { updateFont() }
+  }
+
+  var maxFontSizeMultiplier: CGFloat? = nil {
+    didSet { updateFont() }
+  }
+
+  var lineHeight: CGFloat? = nil {
+    didSet { updateText() }
+  }
+
+  var letterSpacing: CGFloat? = nil {
+    didSet { updateText() }
+  }
+
+  var textAlign: StrokeTextAlign = .auto {
+    didSet { updateText() }
+  }
+
+  var textDecorationLine: StrokeTextDecorationLine = .none {
+    didSet { updateText() }
+  }
+
+  var textTransform: StrokeTextTransform = .none {
+    didSet { updateText() }
+  }
+
+  var numberOfLines: Int = 0 {
+    didSet {
+      label.numberOfLines = numberOfLines
+      updateLineBreakMode()
+    }
+  }
+
+  var ellipsizeMode: StrokeTextEllipsizeMode = .tail {
+    didSet { updateLineBreakMode() }
+  }
+
+  var paddingInsets: UIEdgeInsets = .zero {
+    didSet {
+      label.textInsets = paddingInsets
+      invalidateMeasurements()
+    }
+  }
+
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    isOpaque = false
+    addSubview(label)
+    label.textInsets = paddingInsets
+    updateLineBreakMode()
+  }
+
+  @available(*, unavailable)
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    label.frame = bounds
+    label.preferredMaxLayoutWidth = max(
+      0,
+      bounds.width - paddingInsets.left - paddingInsets.right
+    )
+  }
+
+  override func sizeThatFits(_ size: CGSize) -> CGSize {
+    return label.sizeThatFits(size)
+  }
+
+  override var intrinsicContentSize: CGSize {
+    return label.intrinsicContentSize
+  }
+
+  private func updateFont() {
+    let baseSize = max(1, fontSize)
+    let scaledSize = scaleTypography(baseSize)
+    let weight = fontWeight.toUIFontWeight()
+    let italic = fontStyle == .italic
+
+    label.font = resolveFont(family: fontFamily, size: scaledSize, weight: weight, italic: italic)
+    updateText()
+  }
+
+  private func updateText() {
+    let transformed = textTransform.apply(to: text)
+
+    let paragraphStyle = NSMutableParagraphStyle()
+    paragraphStyle.alignment = textAlign.toNSTextAlignment()
+    if let lh = lineHeight, lh > 0 {
+      let scaledLineHeight = scaleTypography(lh)
+      paragraphStyle.minimumLineHeight = scaledLineHeight
+      paragraphStyle.maximumLineHeight = scaledLineHeight
+    }
+
+    var attributes: [NSAttributedString.Key: Any] = [
+      .paragraphStyle: paragraphStyle,
+      .font: label.font as Any,
+    ]
+
+    if let ls = letterSpacing {
+      attributes[.kern] = scaleTypography(ls)
+    }
+
+    switch textDecorationLine {
+    case .underline:
+      attributes[.underlineStyle] = NSUnderlineStyle.single.rawValue
+    case .lineThrough:
+      attributes[.strikethroughStyle] = NSUnderlineStyle.single.rawValue
+    case .underlineLineThrough:
+      attributes[.underlineStyle] = NSUnderlineStyle.single.rawValue
+      attributes[.strikethroughStyle] = NSUnderlineStyle.single.rawValue
+    case .none:
+      break
+    }
+
+    label.attributedText = NSAttributedString(string: transformed, attributes: attributes)
+    invalidateMeasurements()
+  }
+
+  private func updateLineBreakMode() {
+    if numberOfLines <= 0 {
+      label.lineBreakMode = .byWordWrapping
+      invalidateMeasurements()
+      return
+    }
+
+    switch ellipsizeMode {
+    case .head:
+      label.lineBreakMode = .byTruncatingHead
+    case .middle:
+      label.lineBreakMode = .byTruncatingMiddle
+    case .clip:
+      label.lineBreakMode = .byClipping
+    case .tail:
+      label.lineBreakMode = .byTruncatingTail
+    @unknown default:
+      label.lineBreakMode = .byTruncatingTail
+    }
+
+    invalidateMeasurements()
+  }
+
+  private func scaleTypography(_ value: CGFloat) -> CGFloat {
+    guard value > 0, allowFontScaling else { return value }
+    let scaled = UIFontMetrics.default.scaledValue(for: value)
+    guard let maxMultiplier = maxFontSizeMultiplier, maxMultiplier > 0 else { return scaled }
+    return min(scaled, value * maxMultiplier)
+  }
+
+  private func resolveFont(
+    family: String?,
+    size: CGFloat,
+    weight: UIFont.Weight,
+    italic: Bool
+  ) -> UIFont {
+    let trimmedFamily = family?.trimmingCharacters(in: .whitespacesAndNewlines)
+
+    if let name = trimmedFamily, !name.isEmpty {
+      // 1) Treat as a concrete font name (PostScript name).
+      if let fontByName = UIFont(name: name, size: size) {
+        return italic ? fontByName.withItalicTrait(size: size) : fontByName
+      }
+
+      // 2) Treat as a family name and pick the closest matching variant.
+      let familyName =
+        UIFont.familyNames.first(where: { $0.caseInsensitiveCompare(name) == .orderedSame }) ?? name
+      let candidates = UIFont.fontNames(forFamilyName: familyName).compactMap { UIFont(name: $0, size: size) }
+      if let best = bestFontMatch(in: candidates, size: size, weight: weight, italic: italic) {
+        return best
+      }
+    }
+
+    // 3) Fallback to system font.
+    let system = UIFont.systemFont(ofSize: size, weight: weight)
+    return italic ? system.withItalicTrait(size: size) : system
+  }
+
+  private func bestFontMatch(
+    in fonts: [UIFont],
+    size: CGFloat,
+    weight: UIFont.Weight,
+    italic: Bool
+  ) -> UIFont? {
+    guard !fonts.isEmpty else { return nil }
+
+    let targetWeight = Double(weight.rawValue)
+    var best: UIFont = fonts[0]
+    var bestScore = Double.greatestFiniteMagnitude
+
+    for font in fonts {
+      let traits = font.fontDescriptor.object(forKey: .traits) as? [UIFontDescriptor.TraitKey: Any]
+      let fontWeight = (traits?[.weight] as? CGFloat) ?? 0
+      let isItalic = font.fontDescriptor.symbolicTraits.contains(.traitItalic)
+
+      let italicPenalty = isItalic == italic ? 0.0 : 1000.0
+      let weightPenalty = Swift.abs(Double(fontWeight) - targetWeight)
+      let score = italicPenalty + weightPenalty
+
+      if score < bestScore {
+        bestScore = score
+        best = font
+      }
+    }
+
+    return italic ? best.withItalicTrait(size: size) : best
+  }
+
+  private func invalidateMeasurements() {
+    setNeedsLayout()
+    invalidateIntrinsicContentSize()
+    setNeedsDisplay()
+  }
+
+  static func defaultTextColor() -> UIColor {
+    if #available(iOS 13.0, *) {
+      return .label
+    }
+    return .black
+  }
+}
+
+private extension String {
+  func toUIFontWeight() -> UIFont.Weight {
+    let lower = trimmingCharacters(in: .whitespacesAndNewlines).lowercased()
+    switch lower {
+    case "ultralight", "100": return .ultraLight
+    case "thin", "200": return .thin
+    case "light", "300": return .light
+    case "normal", "regular", "400": return .regular
+    case "medium", "500": return .medium
+    case "semibold", "600": return .semibold
+    case "bold", "700": return .bold
+    case "heavy", "800": return .heavy
+    case "black", "900": return .black
+    default:
+      if let value = Int(lower) {
+        switch value {
+        case ...150: return .ultraLight
+        case 151...250: return .thin
+        case 251...350: return .light
+        case 351...450: return .regular
+        case 451...550: return .medium
+        case 551...650: return .semibold
+        case 651...750: return .bold
+        case 751...850: return .heavy
+        default: return .black
+        }
+      }
+      return .regular
+    }
+  }
+}
+
+private extension UIFont {
+  func withItalicTrait(size: CGFloat) -> UIFont {
+    let descriptor = fontDescriptor
+    let traits = descriptor.symbolicTraits.union(.traitItalic)
+    guard let italicDescriptor = descriptor.withSymbolicTraits(traits) else { return self }
+    return UIFont(descriptor: italicDescriptor, size: size)
+  }
+}
+
+private extension StrokeTextAlign {
+  func toNSTextAlignment() -> NSTextAlignment {
+    switch self {
+    case .left: return .left
+    case .right: return .right
+    case .center: return .center
+    case .justify: return .justified
+    case .auto: return .natural
+    @unknown default: return .natural
+    }
+  }
+}
+
+private extension StrokeTextTransform {
+  func apply(to input: String) -> String {
+    switch self {
+    case .uppercase: return input.uppercased()
+    case .lowercase: return input.lowercased()
+    case .capitalize: return input.capitalized
+    case .none: return input
+    @unknown default: return input
+    }
+  }
+}

package/ios/StrokedTextLabel.swift

@@ -0,0 +1,72 @@
+import UIKit
+
+final class StrokedTextLabel: UILabel {
+  var textInsets: UIEdgeInsets = .zero {
+    didSet { invalidateMeasurements() }
+  }
+
+  var outlineColor: UIColor = .clear {
+    didSet { setNeedsDisplay() }
+  }
+
+  var outlineWidth: CGFloat = 0 {
+    didSet { invalidateMeasurements() }
+  }
+
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    numberOfLines = 0
+    lineBreakMode = .byWordWrapping
+    clipsToBounds = false
+    layer.masksToBounds = false
+  }
+
+  @available(*, unavailable)
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+
+  override func drawText(in rect: CGRect) {
+    let insetRect = rect.inset(by: textInsets)
+
+    guard outlineWidth > 0, let ctx = UIGraphicsGetCurrentContext() else {
+      super.drawText(in: insetRect)
+      return
+    }
+
+    let fillColor = textColor
+
+    ctx.setLineWidth(outlineWidth)
+    ctx.setLineJoin(.round)
+
+    ctx.setTextDrawingMode(.stroke)
+    textColor = outlineColor
+    super.drawText(in: insetRect)
+
+    ctx.setTextDrawingMode(.fill)
+    textColor = fillColor
+    super.drawText(in: insetRect)
+  }
+
+  override func textRect(
+    forBounds bounds: CGRect,
+    limitedToNumberOfLines numberOfLines: Int
+  ) -> CGRect {
+    let insetBounds = bounds.inset(by: textInsets)
+    var rect = super.textRect(forBounds: insetBounds, limitedToNumberOfLines: numberOfLines)
+    // Match React Native <Text> behavior (top-aligned). UILabel may otherwise vertically center
+    // text when the bounds are taller than the rendered text.
+    rect.origin.y = insetBounds.origin.y
+    rect.origin.x -= textInsets.left
+    rect.origin.y -= textInsets.top
+    rect.size.width += textInsets.left + textInsets.right
+    rect.size.height += textInsets.top + textInsets.bottom
+    return rect
+  }
+
+  private func invalidateMeasurements() {
+    setNeedsLayout()
+    invalidateIntrinsicContentSize()
+    setNeedsDisplay()
+  }
+}

package/lib/StrokeText.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { StrokeTextProps } from './types';
+export declare function StrokeText({ text, children, style, hybridRef, ...rest }: StrokeTextProps): React.JSX.Element;

package/lib/StrokeText.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { callback, getHostComponent } from 'react-native-nitro-modules';
+import StrokeTextViewConfig from '../nitrogen/generated/shared/json/StrokeTextViewConfig.json';
+const NativeStrokeTextView = getHostComponent('StrokeTextView', () => StrokeTextViewConfig);
+function resolveText(text, children) {
+    if (typeof text === 'string')
+        return text;
+    if (typeof children === 'string')
+        return children;
+    return '';
+}
+function toNumber(value) {
+    return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}
+function firstNumber(...values) {
+    for (const value of values) {
+        const n = toNumber(value);
+        if (n != null)
+            return n;
+    }
+    return undefined;
+}
+function toFontWeightString(value) {
+    if (typeof value === 'string')
+        return value;
+    if (typeof value === 'number')
+        return `${value}`;
+    return undefined;
+}
+function toColorString(value) {
+    if (typeof value === 'string')
+        return value;
+    if (typeof value === 'number') {
+        const c = value >>> 0;
+        const a = ((c >>> 24) & 0xff) / 255;
+        const r = (c >>> 16) & 0xff;
+        const g = (c >>> 8) & 0xff;
+        const b = c & 0xff;
+        return `rgba(${r},${g},${b},${a})`;
+    }
+    return undefined;
+}
+function warnOnInvalidChildren(children) {
+    if (!__DEV__)
+        return;
+    if (children == null)
+        return;
+    if (typeof children === 'string')
+        return;
+    // eslint-disable-next-line no-console
+    console.warn('[StrokeText] Children must be a string. Use the `text` prop instead.');
+}
+export function StrokeText({ text, children, style, hybridRef, ...rest }) {
+    warnOnInvalidChildren(children);
+    const resolvedText = resolveText(text, children);
+    const flattened = StyleSheet.flatten(style);
+    const { padding, paddingVertical, paddingHorizontal, paddingTop, paddingRight, paddingBottom, paddingLeft, ...nativeProps } = rest;
+    const { color: styleColor, fontSize: styleFontSize, fontWeight: styleFontWeight, fontFamily: styleFontFamily, fontStyle: styleFontStyle, lineHeight: styleLineHeight, letterSpacing: styleLetterSpacing, textAlign: styleTextAlign, textDecorationLine: styleTextDecorationLine, textTransform: styleTextTransform, opacity: styleOpacity, includeFontPadding: styleIncludeFontPadding, padding: stylePadding, paddingVertical: stylePaddingVertical, paddingHorizontal: stylePaddingHorizontal, paddingTop: stylePaddingTop, paddingRight: stylePaddingRight, paddingBottom: stylePaddingBottom, paddingLeft: stylePaddingLeft, ...containerStyle } = flattened ?? {};
+    const strokeWidth = Math.max(0, nativeProps.strokeWidth ?? 0);
+    const strokeInset = Math.ceil(strokeWidth) / 2;
+    const baseTop = firstNumber(paddingTop, stylePaddingTop, paddingVertical, stylePaddingVertical, padding, stylePadding) ?? 0;
+    const baseRight = firstNumber(paddingRight, stylePaddingRight, paddingHorizontal, stylePaddingHorizontal, padding, stylePadding) ?? 0;
+    const baseBottom = firstNumber(paddingBottom, stylePaddingBottom, paddingVertical, stylePaddingVertical, padding, stylePadding) ?? 0;
+    const baseLeft = firstNumber(paddingLeft, stylePaddingLeft, paddingHorizontal, stylePaddingHorizontal, padding, stylePadding) ?? 0;
+    const effectiveNumberOfLines = nativeProps.numberOfLines != null && nativeProps.numberOfLines > 0
+        ? nativeProps.numberOfLines
+        : undefined;
+    const effectiveEllipsizeMode = effectiveNumberOfLines == null
+        ? undefined
+        : nativeProps.ellipsizeMode ?? 'tail';
+    const effectiveIncludeFontPadding = nativeProps.includeFontPadding ?? styleIncludeFontPadding ?? false;
+    return (React.createElement(View, { style: [styles.container, containerStyle] },
+        React.createElement(Text, { accessible: false, pointerEvents: "none", numberOfLines: effectiveNumberOfLines, ellipsizeMode: effectiveEllipsizeMode, allowFontScaling: nativeProps.allowFontScaling, maxFontSizeMultiplier: nativeProps.maxFontSizeMultiplier, style: [
+                style,
+                {
+                    paddingTop: baseTop,
+                    paddingRight: baseRight,
+                    paddingBottom: baseBottom,
+                    paddingLeft: baseLeft,
+                },
+                effectiveIncludeFontPadding == null
+                    ? null
+                    : { includeFontPadding: effectiveIncludeFontPadding },
+                styles.hiddenText,
+            ] }, resolvedText),
+        React.createElement(NativeStrokeTextView, { ...nativeProps, text: resolvedText, color: nativeProps.color ?? toColorString(styleColor), fontSize: nativeProps.fontSize ?? toNumber(styleFontSize), fontWeight: nativeProps.fontWeight ?? toFontWeightString(styleFontWeight), fontFamily: nativeProps.fontFamily ?? styleFontFamily, fontStyle: nativeProps.fontStyle ?? styleFontStyle, lineHeight: nativeProps.lineHeight ?? toNumber(styleLineHeight), letterSpacing: nativeProps.letterSpacing ?? toNumber(styleLetterSpacing), textAlign: nativeProps.textAlign ?? styleTextAlign, textDecorationLine: nativeProps.textDecorationLine ?? styleTextDecorationLine, textTransform: nativeProps.textTransform ?? styleTextTransform, opacity: nativeProps.opacity ?? toNumber(styleOpacity), includeFontPadding: effectiveIncludeFontPadding, numberOfLines: nativeProps.numberOfLines, ellipsizeMode: effectiveEllipsizeMode, paddingTop: baseTop, paddingRight: baseRight, paddingBottom: baseBottom, paddingLeft: baseLeft, hybridRef: hybridRef ? callback(hybridRef) : undefined, pointerEvents: "none", style: [
+                styles.overlay,
+                strokeInset === 0
+                    ? null
+                    : {
+                        top: -strokeInset,
+                        right: -strokeInset,
+                        bottom: -strokeInset,
+                        left: -strokeInset,
+                    },
+            ] })));
+}
+const styles = StyleSheet.create({
+    container: {
+        alignSelf: 'flex-start',
+    },
+    overlay: {
+        ...StyleSheet.absoluteFillObject,
+    },
+    hiddenText: {
+        opacity: 0,
+    },
+});

package/lib/StrokeText.web.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { StrokeTextProps } from './types';
+export declare function StrokeText({ text, children, style, ...rest }: StrokeTextProps): React.JSX.Element;

package/lib/StrokeText.web.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+function resolveText(text, children) {
+    if (typeof text === 'string')
+        return text;
+    if (typeof children === 'string')
+        return children;
+    return '';
+}
+function toNumber(value) {
+    return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}
+function firstNumber(...values) {
+    for (const value of values) {
+        const n = toNumber(value);
+        if (n != null)
+            return n;
+    }
+    return undefined;
+}
+export function StrokeText({ text, children, style, ...rest }) {
+    const resolvedText = resolveText(text, children);
+    const flattened = StyleSheet.flatten(style);
+    const { color: styleColor, fontSize: styleFontSize, fontWeight: styleFontWeight, fontFamily: styleFontFamily, fontStyle: styleFontStyle, lineHeight: styleLineHeight, letterSpacing: styleLetterSpacing, textAlign: styleTextAlign, textDecorationLine: styleTextDecorationLine, textTransform: styleTextTransform, opacity: styleOpacity, padding: stylePadding, paddingVertical: stylePaddingVertical, paddingHorizontal: stylePaddingHorizontal, paddingTop: stylePaddingTop, paddingRight: stylePaddingRight, paddingBottom: stylePaddingBottom, paddingLeft: stylePaddingLeft, ...containerStyle } = flattened ?? {};
+    const textStyle = {
+        fontSize: rest.fontSize ?? styleFontSize,
+        fontWeight: (rest.fontWeight ?? styleFontWeight),
+        fontFamily: rest.fontFamily ?? styleFontFamily,
+        fontStyle: rest.fontStyle ?? styleFontStyle,
+        lineHeight: rest.lineHeight ?? styleLineHeight,
+        letterSpacing: rest.letterSpacing ?? styleLetterSpacing,
+        textAlign: rest.textAlign ?? styleTextAlign,
+        textDecorationLine: rest.textDecorationLine ?? styleTextDecorationLine,
+        textTransform: rest.textTransform ?? styleTextTransform,
+        opacity: rest.opacity ?? styleOpacity,
+    };
+    const fillColor = rest.color ?? styleColor ?? '#000';
+    const strokeColor = rest.strokeColor ?? 'transparent';
+    const strokeWidth = Math.max(0, rest.strokeWidth ?? 0);
+    const strokeInset = Math.ceil(strokeWidth) / 2;
+    const baseTop = firstNumber(rest.paddingTop, stylePaddingTop, rest.paddingVertical, stylePaddingVertical, rest.padding, stylePadding) ?? 0;
+    const baseRight = firstNumber(rest.paddingRight, stylePaddingRight, rest.paddingHorizontal, stylePaddingHorizontal, rest.padding, stylePadding) ?? 0;
+    const baseBottom = firstNumber(rest.paddingBottom, stylePaddingBottom, rest.paddingVertical, stylePaddingVertical, rest.padding, stylePadding) ?? 0;
+    const baseLeft = firstNumber(rest.paddingLeft, stylePaddingLeft, rest.paddingHorizontal, stylePaddingHorizontal, rest.padding, stylePadding) ?? 0;
+    const effectiveNumberOfLines = rest.numberOfLines != null && rest.numberOfLines > 0
+        ? rest.numberOfLines
+        : undefined;
+    const effectiveEllipsizeMode = effectiveNumberOfLines == null ? undefined : rest.ellipsizeMode ?? 'tail';
+    return (React.createElement(View, { style: [styles.container, containerStyle] },
+        React.createElement(Text, { accessible: false, pointerEvents: "none", numberOfLines: effectiveNumberOfLines, ellipsizeMode: effectiveEllipsizeMode, style: [
+                textStyle,
+                {
+                    paddingTop: baseTop,
+                    paddingRight: baseRight,
+                    paddingBottom: baseBottom,
+                    paddingLeft: baseLeft,
+                },
+                styles.hiddenText,
+            ] }, resolvedText),
+        React.createElement(Text, { pointerEvents: "none", numberOfLines: effectiveNumberOfLines, ellipsizeMode: effectiveEllipsizeMode, style: [
+                textStyle,
+                {
+                    color: fillColor,
+                    paddingTop: baseTop + strokeInset,
+                    paddingRight: baseRight + strokeInset,
+                    paddingBottom: baseBottom + strokeInset,
+                    paddingLeft: baseLeft + strokeInset,
+                },
+                strokeInset === 0 ? null : { maxWidth: 'none' },
+                // react-native-web uses `box-sizing: border-box` globally; with ellipsizing enabled
+                // (`overflow: hidden` + `text-overflow: ellipsis`), the extra stroke padding can reduce
+                // the content box by a couple pixels and cause false-positive ellipses for some fonts.
+                // Use `content-box` so padding doesn't shrink the text's available width.
+                strokeInset === 0 ? null : { boxSizing: 'content-box' },
+                strokeWidth > 0 && strokeColor !== 'transparent'
+                    ? {
+                        WebkitTextStrokeWidth: `${strokeWidth}px`,
+                        WebkitTextStrokeColor: strokeColor,
+                        WebkitTextFillColor: fillColor,
+                        textStroke: `${strokeWidth}px ${strokeColor}`,
+                        textFillColor: fillColor,
+                        paintOrder: 'stroke fill',
+                    }
+                    : null,
+                styles.overlay,
+                strokeInset === 0
+                    ? null
+                    : {
+                        top: -strokeInset,
+                        right: -strokeInset,
+                        bottom: -strokeInset,
+                        left: -strokeInset,
+                    },
+            ] }, resolvedText)));
+}
+const styles = StyleSheet.create({
+    container: {
+        alignSelf: 'flex-start',
+    },
+    overlay: {
+        ...StyleSheet.absoluteFillObject,
+    },
+    hiddenText: {
+        opacity: 0,
+    },
+});

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export { StrokeText } from './StrokeText.js';
+export type { StrokeTextAlign, StrokeTextDecorationLine, StrokeTextFontStyle, StrokeTextMethods, StrokeTextNativeProps, StrokeTextProps, StrokeTextTransform, StrokeTextView, } from './types.js';

package/lib/index.js

@@ -0,0 +1 @@
+export { StrokeText } from './StrokeText.js';

package/lib/index.web.d.ts

@@ -0,0 +1,2 @@
+export { StrokeText } from './StrokeText.web.js';
+export type { StrokeTextAlign, StrokeTextDecorationLine, StrokeTextFontStyle, StrokeTextMethods, StrokeTextNativeProps, StrokeTextProps, StrokeTextTransform, StrokeTextView, } from './types.js';

package/lib/index.web.js

@@ -0,0 +1 @@
+export { StrokeText } from './StrokeText.web.js';

package/lib/specs/StrokeTextView.nitro.d.ts

@@ -0,0 +1,37 @@
+import type { HybridView, HybridViewMethods, HybridViewProps } from 'react-native-nitro-modules';
+export type StrokeTextAlign = 'auto' | 'left' | 'right' | 'center' | 'justify';
+export type StrokeTextDecorationLine = 'none' | 'underline' | 'line-through' | 'underline line-through';
+export type StrokeTextTransform = 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+export type StrokeTextFontStyle = 'normal' | 'italic';
+export type StrokeTextEllipsizeMode = 'head' | 'middle' | 'tail' | 'clip';
+export interface StrokeTextProps extends HybridViewProps {
+    text: string;
+    color?: string;
+    strokeColor?: string;
+    strokeWidth?: number;
+    fontSize?: number;
+    fontWeight?: string;
+    fontFamily?: string;
+    fontStyle?: StrokeTextFontStyle;
+    lineHeight?: number;
+    letterSpacing?: number;
+    textAlign?: StrokeTextAlign;
+    textDecorationLine?: StrokeTextDecorationLine;
+    textTransform?: StrokeTextTransform;
+    opacity?: number;
+    allowFontScaling?: boolean;
+    maxFontSizeMultiplier?: number;
+    includeFontPadding?: boolean;
+    numberOfLines?: number;
+    ellipsizeMode?: StrokeTextEllipsizeMode;
+    padding?: number;
+    paddingVertical?: number;
+    paddingHorizontal?: number;
+    paddingTop?: number;
+    paddingRight?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+}
+export interface StrokeTextMethods extends HybridViewMethods {
+}
+export type StrokeTextView = HybridView<StrokeTextProps, StrokeTextMethods>;

package/lib/specs/StrokeTextView.nitro.js

@@ -0,0 +1 @@
+export {};