@studiokico/react-native-stroke-text 0.1.0 → 0.1.1

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

@@ -57,7 +57,9 @@ class StrokeTextView(context: Context) : View(context) {
     private var textLayout: StaticLayout? = null // 여기가 핵심: 텍스트 레이아웃 엔진
 
     private fun createLayout(width: Int): StaticLayout? {
-        if (text.isEmpty() || width <= 0) return null
+        if (text.isEmpty()) return null
+
+        val validWidth = if (width > 0) width else resources.displayMetrics.widthPixels
 
         val scaledFontSize = getScaledSize(fontSize)
         textPaint.textSize = scaledFontSize
@@ -69,7 +71,7 @@ class StrokeTextView(context: Context) : View(context) {
             else -> Layout.Alignment.ALIGN_NORMAL
         }
 
-        val builder = StaticLayout.Builder.obtain(text, 0, text.length, textPaint, width)
+        val builder = StaticLayout.Builder.obtain(text, 0, text.length, textPaint, validWidth)
             .setAlignment(alignment)
             .setLineSpacing(0f, 1f)
             .setIncludePad(true)
@@ -87,13 +89,12 @@ class StrokeTextView(context: Context) : View(context) {
     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) {
+        } else if (widthSize > 0) {
              widthSize
         } else {
-             resources.displayMetrics.widthPixels // fallback
+             resources.displayMetrics.widthPixels
         }
 
         val scaledStrokeWidth = getScaledSize(strokeWidth)
@@ -120,7 +121,7 @@ class StrokeTextView(context: Context) : View(context) {
                 }
                 finalWidth = (ceil(maxLineWidth) + paddingLeft + paddingRight + (scaledStrokeWidth * 2)).toInt()
 
-                if (widthMode == MeasureSpec.AT_MOST) {
+                if (widthMode == MeasureSpec.AT_MOST && widthSize > 0) {
                     finalWidth = minOf(finalWidth, widthSize)
                 }
             }

package/ios/RNStrokeTextView.mm

@@ -8,9 +8,6 @@
 #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

package/ios/StrokeTextView.swift

@@ -31,6 +31,21 @@ public class StrokeTextView: UILabel {
         self.numberOfLines = 0
         self.clipsToBounds = false
         self.backgroundColor = .clear
+
+        self.setContentCompressionResistancePriority(.required, for: .horizontal)
+        self.setContentCompressionResistancePriority(.required, for: .vertical)
+    }
+
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+
+        if customWidth > 0 {
+            self.preferredMaxLayoutWidth = customWidth
+        } else {
+            if self.bounds.width > 0 {
+                self.preferredMaxLayoutWidth = self.bounds.width
+            }
+        }
     }
 
     public override func drawText(in rect: CGRect) {
@@ -40,18 +55,23 @@ public class StrokeTextView: UILabel {
         let context = UIGraphicsGetCurrentContext()
         context?.saveGState()
 
+        let height = self.textRect(forBounds: rect, limitedToNumberOfLines: self.numberOfLines).height
+        let topAlignedRect = CGRect(x: rect.origin.x, y: rect.origin.y, width: rect.width, height: height)
+
         if strokeWidth > 0 {
             context?.setLineWidth(strokeWidth)
             context?.setLineJoin(.round)
             context?.setTextDrawingMode(.stroke)
             self.textColor = strokeColor
-            super.drawText(in: rect)
+
+            super.drawText(in: topAlignedRect)
         }
 
         context?.setTextDrawingMode(.fill)
         self.textColor = originalTextColor
         self.shadowOffset = CGSize.zero
-        super.drawText(in: rect)
+
+        super.drawText(in: topAlignedRect)
 
         self.shadowOffset = shadowOffset
         context?.restoreGState()
@@ -59,7 +79,11 @@ public class StrokeTextView: UILabel {
 
     public override var intrinsicContentSize: CGSize {
         let size = super.intrinsicContentSize
-        let extra = strokeWidth
-        return CGSize(width: size.width + extra, height: size.height + extra)
+        let extra = strokeWidth * 2
+
+        let newWidth = size.width + extra
+        let newHeight = size.height + extra
+
+        return CGSize(width: newWidth, height: newHeight)
     }
 }

package/lib/module/index.js

@@ -1,5 +1,72 @@
 "use strict";
 
-export { default as StrokeText } from './StrokeTextViewNativeComponent';
-export * from './StrokeTextViewNativeComponent';
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import StrokeTextViewNativeComponent from './StrokeTextViewNativeComponent';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const StrokeText = props => {
+  const {
+    style,
+    text,
+    fontSize = 14,
+    color,
+    strokeColor,
+    strokeWidth = 0,
+    fontFamily,
+    align = 'left',
+    numberOfLines,
+    ellipsis,
+    width,
+    ...rest
+  } = props;
+  const ghostTextStyle = {
+    fontSize: fontSize,
+    fontFamily: fontFamily,
+    textAlign: align || undefined,
+    width: width ? Number(width) : undefined,
+    margin: strokeWidth
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: [ghostTextStyle, styles.ghostText],
+      numberOfLines: numberOfLines,
+      ellipsizeMode: ellipsis ? 'tail' : undefined,
+      children: text
+    }), /*#__PURE__*/_jsx(StrokeTextViewNativeComponent, {
+      style: styles.fill,
+      text: text,
+      fontSize: fontSize,
+      color: color,
+      strokeColor: strokeColor,
+      strokeWidth: strokeWidth,
+      fontFamily: fontFamily,
+      align: align,
+      numberOfLines: numberOfLines,
+      ellipsis: ellipsis,
+      width: width,
+      ...rest
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  ghostText: {
+    opacity: 0,
+    zIndex: -1,
+    includeFontPadding: false,
+    textAlignVertical: 'center'
+  },
+  fill: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0
+  }
+});
+export default StrokeText;
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","StrokeText"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,UAAU,QAAQ,iCAAiC;AACvE,cAAc,iCAAiC","ignoreList":[]}
+{"version":3,"names":["React","StyleSheet","Text","View","StrokeTextViewNativeComponent","jsx","_jsx","jsxs","_jsxs","StrokeText","props","style","text","fontSize","color","strokeColor","strokeWidth","fontFamily","align","numberOfLines","ellipsis","width","rest","ghostTextStyle","textAlign","undefined","Number","margin","styles","container","children","ghostText","ellipsizeMode","fill","create","alignItems","justifyContent","opacity","zIndex","includeFontPadding","textAlignVertical","position","left","right","top","bottom"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,UAAU,EACVC,IAAI,EACJC,IAAI,QAGC,cAAc;AACrB,OAAOC,6BAA6B,MAE7B,iCAAiC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEzC,OAAO,MAAMC,UAAU,GAAIC,KAAkB,IAAwB;EACnE,MAAM;IACJC,KAAK;IACLC,IAAI;IACJC,QAAQ,GAAG,EAAE;IACbC,KAAK;IACLC,WAAW;IACXC,WAAW,GAAG,CAAC;IACfC,UAAU;IACVC,KAAK,GAAG,MAAM;IACdC,aAAa;IACbC,QAAQ;IACRC,KAAK;IACL,GAAGC;EACL,CAAC,GAAGZ,KAAK;EAET,MAAMa,cAAoC,GAAG;IAC3CV,QAAQ,EAAEA,QAAQ;IAClBI,UAAU,EAAEA,UAAU;IACtBO,SAAS,EAAEN,KAAK,IAAIO,SAAS;IAC7BJ,KAAK,EAAEA,KAAK,GAAGK,MAAM,CAACL,KAAK,CAAC,GAAGI,SAAS;IACxCE,MAAM,EAAEX;EACV,CAAC;EAED,oBACER,KAAA,CAACL,IAAI;IAACQ,KAAK,EAAE,CAACiB,MAAM,CAACC,SAAS,EAAElB,KAAK,CAAE;IAAAmB,QAAA,gBACrCxB,IAAA,CAACJ,IAAI;MACHS,KAAK,EAAE,CAACY,cAAc,EAAEK,MAAM,CAACG,SAAS,CAAE;MAC1CZ,aAAa,EAAEA,aAAc;MAC7Ba,aAAa,EAAEZ,QAAQ,GAAG,MAAM,GAAGK,SAAU;MAAAK,QAAA,EAE5ClB;IAAI,CACD,CAAC,eAEPN,IAAA,CAACF,6BAA6B;MAC5BO,KAAK,EAAEiB,MAAM,CAACK,IAAK;MACnBrB,IAAI,EAAEA,IAAK;MACXC,QAAQ,EAAEA,QAAS;MACnBC,KAAK,EAAEA,KAAM;MACbC,WAAW,EAAEA,WAAY;MACzBC,WAAW,EAAEA,WAAY;MACzBC,UAAU,EAAEA,UAAW;MACvBC,KAAK,EAAEA,KAAM;MACbC,aAAa,EAAEA,aAAc;MAC7BC,QAAQ,EAAEA,QAAS;MACnBC,KAAK,EAAEA,KAAM;MAAA,GACTC;IAAI,CACT,CAAC;EAAA,CACE,CAAC;AAEX,CAAC;AAED,MAAMM,MAAM,GAAG3B,UAAU,CAACiC,MAAM,CAAC;EAC/BL,SAAS,EAAE;IACTM,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDL,SAAS,EAAE;IACTM,OAAO,EAAE,CAAC;IACVC,MAAM,EAAE,CAAC,CAAC;IACVC,kBAAkB,EAAE,KAAK;IACzBC,iBAAiB,EAAE;EACrB,CAAC;EACDP,IAAI,EAAE;IACJQ,QAAQ,EAAE,UAAU;IACpBC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,GAAG,EAAE,CAAC;IACNC,MAAM,EAAE;EACV;AACF,CAAC,CAAC;AAGF,eAAepC,UAAU","ignoreList":[]}

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

@@ -1,3 +1,6 @@
-export { default as StrokeText } from './StrokeTextViewNativeComponent';
-export * from './StrokeTextViewNativeComponent';
+import React from 'react';
+import { type NativeProps } from './StrokeTextViewNativeComponent';
+export declare const StrokeText: (props: NativeProps) => React.JSX.Element;
+export type { NativeProps };
+export default StrokeText;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAsC,EACpC,KAAK,WAAW,EACjB,MAAM,iCAAiC,CAAC;AAEzC,eAAO,MAAM,UAAU,GAAI,OAAO,WAAW,KAAG,KAAK,CAAC,GAAG,CAAC,OAkDzD,CAAC;AAsBF,YAAY,EAAE,WAAW,EAAE,CAAC;AAC5B,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiokico/react-native-stroke-text",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React Native Stroke Text (New Arch Only)",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/index.tsx

@@ -1,2 +1,86 @@
-export { default as StrokeText } from './StrokeTextViewNativeComponent';
-export * from './StrokeTextViewNativeComponent';
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  type TextStyle,
+  type StyleProp,
+} from 'react-native';
+import StrokeTextViewNativeComponent, {
+  type NativeProps,
+} from './StrokeTextViewNativeComponent';
+
+export const StrokeText = (props: NativeProps): React.JSX.Element => {
+  const {
+    style,
+    text,
+    fontSize = 14,
+    color,
+    strokeColor,
+    strokeWidth = 0,
+    fontFamily,
+    align = 'left',
+    numberOfLines,
+    ellipsis,
+    width,
+    ...rest
+  } = props;
+
+  const ghostTextStyle: StyleProp<TextStyle> = {
+    fontSize: fontSize,
+    fontFamily: fontFamily,
+    textAlign: align || undefined,
+    width: width ? Number(width) : undefined,
+    margin: strokeWidth,
+  };
+
+  return (
+    <View style={[styles.container, style]}>
+      <Text
+        style={[ghostTextStyle, styles.ghostText]}
+        numberOfLines={numberOfLines}
+        ellipsizeMode={ellipsis ? 'tail' : undefined}
+      >
+        {text}
+      </Text>
+
+      <StrokeTextViewNativeComponent
+        style={styles.fill}
+        text={text}
+        fontSize={fontSize}
+        color={color}
+        strokeColor={strokeColor}
+        strokeWidth={strokeWidth}
+        fontFamily={fontFamily}
+        align={align}
+        numberOfLines={numberOfLines}
+        ellipsis={ellipsis}
+        width={width}
+        {...rest}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  ghostText: {
+    opacity: 0,
+    zIndex: -1,
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+  },
+  fill: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
+});
+
+export type { NativeProps };
+export default StrokeText;