@studiokico/react-native-stroke-text 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 studiokico
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,79 @@
+# @studiokico/react-native-stroke-text
+
+React Native Stroke Text (New Arch Only)
+
+## Installation
+
+
+```sh
+npm install @studiokico/react-native-stroke-text
+```
+
+
+## Usage
+
+
+```js
+import React from "react";
+import { StrokeText } from "@studiokico/react-native-stroke-text";
+import { View } from "react-native";
+
+export default function Screen() {
+  return (
+    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+      <StrokeText
+        text="Test"
+        fontSize={50}
+        color="#000000"
+        strokeColor="#c334eb"
+        strokeWidth={20}
+        fontFamily="Nunito-Black"
+      />
+    </View>
+  );
+}
+
+```
+
+### Props
+
+The following table outlines the props available for the `StrokeText` component:
+
+| Prop            | Type    | Description                                                     |
+|-----------------|---------|-----------------------------------------------------------------|
+| `text`          | string  | The text content you want to display.                           |
+| `fontSize`      | number  | Size of the text font, defining how large the text will be.     |
+| `color`         | string  | Color of the text, can use any valid color format.              |
+| `strokeColor`   | string  | Color of the stroke (outline) around the text.                  |
+| `strokeWidth`   | number  | Width of the stroke, determining the thickness of the outline.  |
+| `fontFamily`    | string  | Font family for the text, should match available project fonts. |
+| `align`         | string  | Text alignment (default: `center`)                              |
+| `numberOfLines` | number  | Number of lines (default: `0`)                                  |
+| `ellipsis`      | boolean | Ellipsis (...) (default: `false`)                               |
+| `width`         | number  | Text width to enable ellipsis (default: `undefined`)            |
+
+## Ellipsis
+
+```jsx
+<StrokeText
+  text="Lorem ipsum"
+    width={150} // +
+    ellipsis={true} // +
+    numberOfLines={1} // +
+  fontSize={32}
+  color="#FFFFFF"
+  strokeColor="#000000"
+  strokeWidth={2}
+  fontFamily="Nunito-Black"
+  align="center"
+/>
+
+```
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/android/build.gradle

@@ -0,0 +1,77 @@
+buildscript {
+  ext.getExtOrDefault = {name ->
+    return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['StrokeText_' + name]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+apply plugin: "com.facebook.react"
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["StrokeText_" + name]).toInteger()
+}
+
+android {
+  namespace "com.studiokico.stroketext"
+
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+  }
+
+  buildFeatures {
+    buildConfig true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+
+  sourceSets {
+    main {
+      java.srcDirs += [
+        "generated/java",
+        "generated/jni"
+      ]
+    }
+  }
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+def kotlin_version = getExtOrDefault("kotlinVersion")
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+}

package/android/gradle.properties

@@ -0,0 +1,5 @@
+ReactNativeStrokeText_kotlinVersion=2.0.21
+ReactNativeStrokeText_minSdkVersion=24
+ReactNativeStrokeText_targetSdkVersion=34
+ReactNativeStrokeText_compileSdkVersion=35
+ReactNativeStrokeText_ndkVersion=27.1.12297006

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

package/android/src/main/java/com/studiokico/stroketext/FontUtil.kt

@@ -0,0 +1,75 @@
+package com.studiokico.stroketext
+
+import android.content.Context
+import android.content.res.AssetManager
+import android.graphics.Typeface
+import com.facebook.react.views.text.ReactFontManager
+import java.util.Locale
+import java.util.concurrent.ConcurrentHashMap
+
+object FontUtil {
+    private val CACHE = ConcurrentHashMap<String, Typeface>()
+    @Volatile
+    private var ASSET_INDEX: Map<String, String>? = null
+
+    fun getFont(context: Context, family: String?, style: Int = Typeface.NORMAL): Typeface {
+        if (family.isNullOrEmpty()) return Typeface.defaultFromStyle(style)
+
+        val appCtx = context.applicationContext
+        val am = appCtx.assets
+        val key = normalizeKey(family, style)
+
+        CACHE[key]?.let { return it }
+
+        ReactFontManager.getInstance().getTypeface(family, style, am)?.let {
+            CACHE[key] = it
+            return it
+        }
+
+        resolveAssetPath(am, family)?.let { path ->
+            try {
+                var tf = Typeface.createFromAsset(am, path)
+                if (style != Typeface.NORMAL) {
+                    tf = Typeface.create(tf, style)
+                }
+                CACHE[key] = tf
+                return tf
+            } catch (e: Exception) {
+            }
+        }
+
+        val defaultTf = Typeface.defaultFromStyle(style)
+        CACHE[key] = defaultTf
+        return defaultTf
+    }
+
+    private fun resolveAssetPath(am: AssetManager, family: String): String? {
+        if (ASSET_INDEX == null) {
+            synchronized(this) {
+                if (ASSET_INDEX == null) {
+                    ASSET_INDEX = buildAssetIndex(am, "fonts")
+                }
+            }
+        }
+        return ASSET_INDEX?.get(family.lowercase(Locale.US))
+    }
+
+    private fun buildAssetIndex(am: AssetManager, folder: String): Map<String, String> {
+        val map = HashMap<String, String>()
+        try {
+            val files = am.list(folder)
+            files?.forEach { filename ->
+                val lower = filename.lowercase(Locale.US)
+                if (lower.endsWith(".ttf") || lower.endsWith(".otf")) {
+                    val base = lower.replace(Regex("\\.(ttf|otf)$"), "")
+                    map[base] = "$folder/$filename"
+                }
+            }
+        } catch (ignored: Exception) { }
+        return map
+    }
+
+    private fun normalizeKey(family: String, style: Int): String {
+        return "${family.lowercase(Locale.US)}|$style"
+    }
+}

package/android/src/main/java/com/studiokico/stroketext/StrokeTextPackage.kt

@@ -0,0 +1,24 @@
+package com.studiokico.stroketext
+
+import com.facebook.react.TurboReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfo
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import com.facebook.react.uimanager.ViewManager
+
+class StrokeTextPackage : TurboReactPackage() {
+    override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
+        return null
+    }
+
+    override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {
+        return ReactModuleInfoProvider {
+            emptyMap<String, ReactModuleInfo>()
+        }
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return listOf(StrokeTextViewManager())
+    }
+}

package/android/src/main/java/com/studiokico/stroketext/StrokeTextView.kt

@@ -0,0 +1,164 @@
+package com.studiokico.stroketext
+
+import android.content.Context
+import android.graphics.Canvas
+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 android.os.Build
+
+class StrokeTextView(context: Context) : View(context) {
+    var text: String = ""
+        set(value) { if (field != value) { field = value; requestLayout(); invalidate() } }
+
+    var fontSize: Float = 14f
+        set(value) { if (field != value) { field = value; requestLayout(); invalidate() } }
+
+    var textColor: Int = 0xFF000000.toInt()
+        set(value) { if (field != value) { field = value; invalidate() } }
+
+    var strokeColor: Int = 0xFFFFFFFF.toInt()
+        set(value) { if (field != value) { field = value; invalidate() } }
+
+    var strokeWidth: Float = 0f
+        set(value) { if (field != value) { field = value; requestLayout(); invalidate() } }
+
+    var fontFamily: String = ""
+        set(value) {
+            if (field != value) {
+                field = value
+                cachedTypeface = FontUtil.getFont(context, value)
+                requestLayout()
+                invalidate()
+            }
+        }
+
+    var align: String = "left"
+        set(value) { if (field != value) { field = value; requestLayout(); invalidate() } }
+
+    var numberOfLines: Int = 0
+        set(value) { if (field != value) { field = value; requestLayout(); invalidate() } }
+
+    var ellipsis: Boolean = false
+        set(value) { if (field != value) { field = value; requestLayout(); invalidate() } }
+
+    var customWidth: Float = 0f
+        set(value) { if (field != value) { field = value; requestLayout(); invalidate() } }
+
+
+    private val textPaint = TextPaint(Paint.ANTI_ALIAS_FLAG)
+    private var cachedTypeface: Typeface? = null
+    private var textLayout: StaticLayout? = null // 여기가 핵심: 텍스트 레이아웃 엔진
+
+    private fun createLayout(width: Int): StaticLayout? {
+        if (text.isEmpty() || width <= 0) return null
+
+        val scaledFontSize = getScaledSize(fontSize)
+        textPaint.textSize = scaledFontSize
+        textPaint.typeface = cachedTypeface ?: Typeface.DEFAULT
+
+        val alignment = when (align) {
+            "center" -> Layout.Alignment.ALIGN_CENTER
+            "right" -> Layout.Alignment.ALIGN_OPPOSITE
+            else -> Layout.Alignment.ALIGN_NORMAL
+        }
+
+        val builder = StaticLayout.Builder.obtain(text, 0, text.length, textPaint, width)
+            .setAlignment(alignment)
+            .setLineSpacing(0f, 1f)
+            .setIncludePad(true)
+
+        if (numberOfLines > 0) {
+            builder.setMaxLines(numberOfLines)
+            if (ellipsis) {
+                builder.setEllipsize(TextUtils.TruncateAt.END)
+            }
+        }
+
+        return builder.build()
+    }
+
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        val widthMode = MeasureSpec.getMode(widthMeasureSpec)
+        val widthSize = MeasureSpec.getSize(widthMeasureSpec)
+
+        val availableWidth = if (customWidth > 0) {
+             getScaledSize(customWidth).toInt()
+        } else if (widthMode != MeasureSpec.UNSPECIFIED) {
+             widthSize
+        } else {
+             resources.displayMetrics.widthPixels // fallback
+        }
+
+        val scaledStrokeWidth = getScaledSize(strokeWidth)
+        val contentWidth = (availableWidth - paddingLeft - paddingRight - (scaledStrokeWidth * 2)).toInt()
+
+        if (textLayout == null || textLayout?.width != contentWidth) {
+            textLayout = createLayout(contentWidth.coerceAtLeast(0))
+        }
+
+        val layout = textLayout
+
+        var finalWidth = 0
+        var finalHeight = 0
+
+        if (layout != null) {
+            finalHeight = (layout.height + paddingTop + paddingBottom + (scaledStrokeWidth * 2)).toInt()
+
+            if (widthMode == MeasureSpec.EXACTLY) {
+                finalWidth = widthSize
+            } else {
+                var maxLineWidth = 0f
+                for (i in 0 until layout.lineCount) {
+                    maxLineWidth = maxOf(maxLineWidth, layout.getLineWidth(i))
+                }
+                finalWidth = (ceil(maxLineWidth) + paddingLeft + paddingRight + (scaledStrokeWidth * 2)).toInt()
+
+                if (widthMode == MeasureSpec.AT_MOST) {
+                    finalWidth = minOf(finalWidth, widthSize)
+                }
+            }
+        }
+
+        setMeasuredDimension(finalWidth, finalHeight)
+    }
+
+    override fun onDraw(canvas: Canvas) {
+        super.onDraw(canvas)
+        val layout = textLayout ?: return
+        val scaledStrokeWidth = getScaledSize(strokeWidth)
+
+        canvas.save()
+
+        val translateX = paddingLeft + scaledStrokeWidth
+        val translateY = paddingTop + scaledStrokeWidth
+        canvas.translate(translateX, translateY)
+
+        if (strokeWidth > 0) {
+            textPaint.style = Paint.Style.STROKE
+            textPaint.strokeWidth = scaledStrokeWidth
+            textPaint.color = strokeColor
+            layout.draw(canvas)
+        }
+
+        textPaint.style = Paint.Style.FILL
+        textPaint.color = textColor
+        layout.draw(canvas)
+
+        canvas.restore()
+    }
+
+    private fun getScaledSize(size: Float): Float {
+        return TypedValue.applyDimension(
+            TypedValue.COMPLEX_UNIT_SP,
+            size,
+            resources.displayMetrics
+        )
+    }
+}

package/android/src/main/java/com/studiokico/stroketext/StrokeTextViewManager.kt

@@ -0,0 +1,77 @@
+package com.studiokico.stroketext
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.RNStrokeTextViewManagerDelegate
+import com.facebook.react.viewmanagers.RNStrokeTextViewManagerInterface
+
+@ReactModule(name = StrokeTextViewManager.REACT_CLASS)
+class StrokeTextViewManager : SimpleViewManager<StrokeTextView>(), RNStrokeTextViewManagerInterface<StrokeTextView> {
+
+    companion object {
+        const val REACT_CLASS = "RNStrokeTextView"
+    }
+
+    private val delegate: ViewManagerDelegate<StrokeTextView> = RNStrokeTextViewManagerDelegate(this)
+
+    override fun getDelegate(): ViewManagerDelegate<StrokeTextView> = delegate
+
+    override fun getName(): String = REACT_CLASS
+
+    override fun createViewInstance(context: ThemedReactContext): StrokeTextView {
+        return StrokeTextView(context)
+    }
+
+    @ReactProp(name = "text")
+    override fun setText(view: StrokeTextView, text: String?) {
+        view.text = text ?: ""
+    }
+
+    @ReactProp(name = "fontSize")
+    override fun setFontSize(view: StrokeTextView, fontSize: Float) {
+        view.fontSize = fontSize
+    }
+
+    @ReactProp(name = "color", customType = "Color")
+    override fun setColor(view: StrokeTextView, color: Int?) {
+        view.textColor = color ?: 0xFF000000.toInt()
+    }
+
+    @ReactProp(name = "strokeColor", customType = "Color")
+    override fun setStrokeColor(view: StrokeTextView, color: Int?) {
+        view.strokeColor = color ?: 0xFFFFFFFF.toInt()
+    }
+
+    @ReactProp(name = "strokeWidth")
+    override fun setStrokeWidth(view: StrokeTextView, width: Float) {
+        view.strokeWidth = width
+    }
+
+    @ReactProp(name = "fontFamily")
+    override fun setFontFamily(view: StrokeTextView, fontFamily: String?) {
+        view.fontFamily = fontFamily ?: ""
+    }
+
+    @ReactProp(name = "width")
+    override fun setWidth(view: StrokeTextView, width: Float) {
+        view.customWidth = width
+    }
+
+    @ReactProp(name = "align")
+    override fun setAlign(view: StrokeTextView, align: String?) {
+        view.align = align ?: "left"
+    }
+
+    @ReactProp(name = "numberOfLines", defaultInt = 0)
+    override fun setNumberOfLines(view: StrokeTextView, numberOfLines: Int) {
+        view.numberOfLines = numberOfLines
+    }
+
+    @ReactProp(name = "ellipsis")
+    override fun setEllipsis(view: StrokeTextView, ellipsis: Boolean) {
+        view.ellipsis = ellipsis
+    }
+}

package/ios/RNStrokeTextView.h

@@ -0,0 +1,9 @@
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RNStrokeTextView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/RNStrokeTextView.mm

@@ -0,0 +1,110 @@
+#import "RNStrokeTextView.h"
+
+#import <react/renderer/components/RNStrokeTextSpec/ComponentDescriptors.h>
+#import <react/renderer/components/RNStrokeTextSpec/EventEmitters.h>
+#import <react/renderer/components/RNStrokeTextSpec/Props.h>
+#import <react/renderer/components/RNStrokeTextSpec/RCTComponentViewHelpers.h>
+
+#import <React/RCTFabricComponentsPlugins.h>
+#import <React/RCTConversions.h>
+
+// 2. Swift 클래스 import (프로젝트 설정에 따라 이름이 다를 수 있음)
+// 라이브러리 개발 중이라면 보통 "라이브러리이름-Swift.h" 입니다.
+// 예: react-native-stroke-text -> react_native_stroke_text-Swift.h
+#if __has_include("StrokeText-Swift.h")
+#import "StrokeText-Swift.h"
+#else
+#import <StrokeText/StrokeText-Swift.h>
+#endif
+
+using namespace facebook::react;
+
+@interface RNStrokeTextView () <RCTRNStrokeTextViewViewProtocol>
+@end
+
+@implementation RNStrokeTextView {
+    StrokeTextView *_view;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+    return concreteComponentDescriptorProvider<RNStrokeTextViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+    if (self = [super initWithFrame:frame]) {
+        static const auto defaultProps = std::make_shared<const RNStrokeTextViewProps>();
+        _props = defaultProps;
+
+        _view = [[StrokeTextView alloc] initWithFrame:self.bounds];
+
+        self.contentView = _view;
+    }
+    return self;
+}
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps {
+    const auto &oldViewProps = *std::static_pointer_cast<const RNStrokeTextViewProps>(_props);
+    const auto &newViewProps = *std::static_pointer_cast<const RNStrokeTextViewProps>(props);
+
+    if (oldViewProps.text != newViewProps.text) {
+        _view.text = RCTNSStringFromString(newViewProps.text);
+    }
+
+    if (oldViewProps.fontFamily != newViewProps.fontFamily || oldViewProps.fontSize != newViewProps.fontSize) {
+        NSString *fontName = RCTNSStringFromString(newViewProps.fontFamily);
+        CGFloat fontSize = newViewProps.fontSize; // Float -> CGFloat
+
+        UIFont *font = [UIFont fontWithName:fontName size:fontSize];
+        if (!font) {
+            font = [UIFont systemFontOfSize:fontSize];
+        }
+        _view.font = font;
+    }
+
+    if (oldViewProps.color != newViewProps.color) {
+        _view.textColor = RCTUIColorFromSharedColor(newViewProps.color);
+    }
+    if (oldViewProps.strokeColor != newViewProps.strokeColor) {
+        _view.strokeColor = RCTUIColorFromSharedColor(newViewProps.strokeColor);
+    }
+
+    if (oldViewProps.strokeWidth != newViewProps.strokeWidth) {
+        _view.strokeWidth = newViewProps.strokeWidth;
+    }
+
+    if (oldViewProps.align != newViewProps.align) {
+        switch (newViewProps.align) {
+            case RNStrokeTextViewAlign::Center:
+                _view.textAlignment = NSTextAlignmentCenter;
+                break;
+            case RNStrokeTextViewAlign::Right:
+                _view.textAlignment = NSTextAlignmentRight;
+                break;
+            case RNStrokeTextViewAlign::Left:
+            default:
+                _view.textAlignment = NSTextAlignmentLeft;
+                break;
+        }
+    }
+
+    if (oldViewProps.numberOfLines != newViewProps.numberOfLines) {
+        _view.numberOfLines = newViewProps.numberOfLines;
+    }
+
+    if (oldViewProps.ellipsis != newViewProps.ellipsis) {
+        _view.lineBreakMode = newViewProps.ellipsis ? NSLineBreakByTruncatingTail : NSLineBreakByWordWrapping;
+    }
+
+    if (oldViewProps.width != newViewProps.width) {
+        _view.customWidth = newViewProps.width;
+    }
+
+    [super updateProps:props oldProps:oldProps];
+}
+
+@end
+
+Class<RCTComponentViewProtocol> RNStrokeTextViewCls(void)
+{
+  return RNStrokeTextView.class;
+}

package/ios/StrokeTextView.swift

@@ -0,0 +1,65 @@
+import UIKit
+
+@objc(StrokeTextView)
+public class StrokeTextView: UILabel {
+    @objc public var strokeColor: UIColor = .white {
+        didSet { setNeedsDisplay() }
+    }
+
+    @objc public var strokeWidth: CGFloat = 0 {
+        didSet {
+            invalidateIntrinsicContentSize()
+            setNeedsDisplay()
+        }
+    }
+
+    @objc public var customWidth: CGFloat = 0 {
+        didSet { invalidateIntrinsicContentSize() }
+    }
+
+    public override init(frame: CGRect) {
+        super.init(frame: frame)
+        self.commonInit()
+    }
+
+    public required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        self.commonInit()
+    }
+
+    private func commonInit() {
+        self.numberOfLines = 0
+        self.clipsToBounds = false
+        self.backgroundColor = .clear
+    }
+
+    public override func drawText(in rect: CGRect) {
+        let shadowOffset = self.shadowOffset
+        let originalTextColor = self.textColor
+
+        let context = UIGraphicsGetCurrentContext()
+        context?.saveGState()
+
+        if strokeWidth > 0 {
+            context?.setLineWidth(strokeWidth)
+            context?.setLineJoin(.round)
+            context?.setTextDrawingMode(.stroke)
+            self.textColor = strokeColor
+            super.drawText(in: rect)
+        }
+
+        context?.setTextDrawingMode(.fill)
+        self.textColor = originalTextColor
+        self.shadowOffset = CGSize.zero
+        super.drawText(in: rect)
+
+        self.shadowOffset = shadowOffset
+        context?.restoreGState()
+    }
+
+    public override var intrinsicContentSize: CGSize {
+        let size = super.intrinsicContentSize
+        let extra = strokeWidth
+        return CGSize(width: size.width + extra, height: size.height + extra)
+    }
+}

package/lib/module/StrokeTextViewNativeComponent.ts

@@ -0,0 +1,27 @@
+import {
+  codegenNativeComponent,
+  type ColorValue,
+  type ViewProps,
+} from 'react-native';
+import type {
+  WithDefault,
+  Float,
+  Int32,
+} from 'react-native/Libraries/Types/CodegenTypesNamespace';
+
+type TextAlign = 'center' | 'left' | 'right';
+
+export interface NativeProps extends ViewProps {
+  width?: Float;
+  text: string;
+  fontSize?: Float;
+  color?: ColorValue;
+  strokeColor?: ColorValue;
+  strokeWidth?: Float;
+  fontFamily?: string;
+  align?: WithDefault<TextAlign, 'left'>;
+  numberOfLines?: Int32;
+  ellipsis?: boolean;
+}
+
+export default codegenNativeComponent<NativeProps>('RNStrokeTextView');

package/lib/module/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { default as StrokeText } from './StrokeTextViewNativeComponent';
+export * from './StrokeTextViewNativeComponent';
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","StrokeText"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,UAAU,QAAQ,iCAAiC;AACvE,cAAc,iCAAiC","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/src/StrokeTextViewNativeComponent.d.ts

@@ -0,0 +1,18 @@
+import { type ColorValue, type ViewProps } from 'react-native';
+import type { WithDefault, Float, Int32 } from 'react-native/Libraries/Types/CodegenTypesNamespace';
+type TextAlign = 'center' | 'left' | 'right';
+export interface NativeProps extends ViewProps {
+    width?: Float;
+    text: string;
+    fontSize?: Float;
+    color?: ColorValue;
+    strokeColor?: ColorValue;
+    strokeWidth?: Float;
+    fontFamily?: string;
+    align?: WithDefault<TextAlign, 'left'>;
+    numberOfLines?: Int32;
+    ellipsis?: boolean;
+}
+declare const _default: import("react-native/types_generated/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
+export default _default;
+//# sourceMappingURL=StrokeTextViewNativeComponent.d.ts.map

package/lib/typescript/src/StrokeTextViewNativeComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StrokeTextViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/StrokeTextViewNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EACV,WAAW,EACX,KAAK,EACL,KAAK,EACN,MAAM,oDAAoD,CAAC;AAE5D,KAAK,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE7C,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACvC,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;;AAED,wBAAuE"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,3 @@
+export { default as StrokeText } from './StrokeTextViewNativeComponent';
+export * from './StrokeTextViewNativeComponent';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACxE,cAAc,iCAAiC,CAAC"}

package/package.json

@@ -0,0 +1,172 @@
+{
+  "name": "@studiokico/react-native-stroke-text",
+  "version": "0.1.0",
+  "description": "React Native Stroke Text (New Arch Only)",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace @studiokico/react-native-stroke-text-example",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "stroke",
+    "text"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/studiokico/react-native-stroke-text.git"
+  },
+  "author": "studiokico <dohyun@studiokico.co.kr> (https://github.com/studiokico)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/studiokico/react-native-stroke-text/issues"
+  },
+  "homepage": "https://github.com/studiokico/react-native-stroke-text#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.82.1",
+    "@react-native/eslint-config": "0.82.1",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.1",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "prettier": "^2.8.8",
+    "react": "19.1.1",
+    "react-native": "0.82.1",
+    "react-native-builder-bob": "^0.40.17",
+    "release-it": "^19.0.4",
+    "turbo": "^2.5.6",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "RNStrokeTextSpec",
+    "type": "all",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.studiokico.stroketext"
+    },
+    "ios": {
+      "componentProvider": {
+        "RNStrokeTextView": "RNStrokeTextView"
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "fabric-view",
+    "languages": "kotlin-objc",
+    "tools": [
+      "eslint",
+      "jest",
+      "release-it"
+    ],
+    "version": "0.56.0"
+  }
+}

package/react-native-stroke-text.podspec

@@ -0,0 +1,36 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-stroke-text"
+  s.module_name = "StrokeText"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/studiokico/react-native-stroke-text.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
+  s.private_header_files = "ios/**/*.h"
+
+  install_modules_dependencies(s)
+
+  s.dependency "React-Core"
+  s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+  s.pod_target_xcconfig    = {
+      'HEADER_SEARCH_PATHS' => '"$(PODS_ROOT)/boost" "$(PODS_ROOT)/boost-for-react-native" "$(PODS_ROOT)/RCT-Folly" "$(PODS_ROOT)/Headers/Private/Yoga"',
+      "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -DFOLLY_CFG_NO_COROUTINES=1",
+      "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+  }
+  s.dependency "React-RCTFabric"
+  s.dependency "React-Codegen"
+  s.dependency "RCT-Folly"
+  s.dependency "RCTRequired"
+  s.dependency "RCTTypeSafety"
+  s.dependency "ReactCommon/turbomodule/core"
+end

package/src/StrokeTextViewNativeComponent.ts

@@ -0,0 +1,27 @@
+import {
+  codegenNativeComponent,
+  type ColorValue,
+  type ViewProps,
+} from 'react-native';
+import type {
+  WithDefault,
+  Float,
+  Int32,
+} from 'react-native/Libraries/Types/CodegenTypesNamespace';
+
+type TextAlign = 'center' | 'left' | 'right';
+
+export interface NativeProps extends ViewProps {
+  width?: Float;
+  text: string;
+  fontSize?: Float;
+  color?: ColorValue;
+  strokeColor?: ColorValue;
+  strokeWidth?: Float;
+  fontFamily?: string;
+  align?: WithDefault<TextAlign, 'left'>;
+  numberOfLines?: Int32;
+  ellipsis?: boolean;
+}
+
+export default codegenNativeComponent<NativeProps>('RNStrokeTextView');

package/src/index.tsx

@@ -0,0 +1,2 @@
+export { default as StrokeText } from './StrokeTextViewNativeComponent';
+export * from './StrokeTextViewNativeComponent';