react-native-stroke-text Add shadow to the text

Hey,

If possible, can you add a shadow property?

Thanks.

Sep 27 '24 08:09 HarwinderSingh15

Hi buddy,

Amazing Lib you have created :)

taking about my feature request. As no action taken on this request. I created a patch for this. As of now it works fine but I'm using version 1.2.2 and I don't know if It would work with the current version. If you can review my patch and add this feature to the lib

Thanks

`diff --git a/node_modules/@charmy.tech/react-native-stroke-text/android/src/main/java/com/stroketext/StrokeTextView.java b/node_modules/@charmy.tech/react-native-stroke-text/android/src/main/java/com/stroketext/StrokeTextView.java index 043b1aa..693a7cb 100644 --- a/node_modules/@charmy.tech/react-native-stroke-text/android/src/main/java/com/stroketext/StrokeTextView.java +++ b/node_modules/@charmy.tech/react-native-stroke-text/android/src/main/java/com/stroketext/StrokeTextView.java @@ -61,7 +61,7 @@ class StrokeTextView extends View { textLayout = new StaticLayout(ellipsizedText, textPaint, width, alignment, 1.0f, 0.0f, false); if (numberOfLines > 0 && numberOfLines < textLayout.getLineCount()) { int lineEnd = textLayout.getLineEnd(numberOfLines - 1);

           ellipsizedText = ellipsizedText.subSequence(0, lineEnd);

           ellipsizedText = ellipsizedText.subSequence(0, lineEnd).toString().substring(0, lineEnd - 1) + "...";
           textLayout = new StaticLayout(ellipsizedText, textPaint, width, alignment, 1.0f, 0.0f, false);
       }
       strokeLayout = new StaticLayout(ellipsizedText, strokePaint, width, alignment, 1.0f, 0.0f, false);

diff --git a/node_modules/@charmy.tech/react-native-stroke-text/ios/StrokeTextView.swift b/node_modules/@charmy.tech/react-native-stroke-text/ios/StrokeTextView.swift index 176a556..43f9e0e 100644 --- a/node_modules/@charmy.tech/react-native-stroke-text/ios/StrokeTextView.swift +++ b/node_modules/@charmy.tech/react-native-stroke-text/ios/StrokeTextView.swift @@ -83,6 +83,33 @@ class StrokeTextView: RCTView { } }

@objc var shadowOpacity: NSNumber = 1 {
```
   didSet {
```
```
       if shadowOpacity != oldValue {
```

           label.shadowOpacity = shadowOpacity

```
           label.setNeedsDisplay()
```
```
       }
```
```
   }
```
}
@objc var shadowHeight: NSNumber = 1 {
```
   didSet {
```
```
       if shadowHeight != oldValue {
```

           label.shadowHeight = shadowHeight

```
           label.setNeedsDisplay()
```
```
       }
```
```
   }
```
}
@objc var shadowWidth: NSNumber = 1 {
```
   didSet {
```
```
       if shadowWidth != oldValue {
```

           label.shadowWidth = shadowWidth

```
           label.setNeedsDisplay()
```
```
       }
```
```
   }
```
}
@objc var fontFamily: String = "Helvetica" { didSet { if fontFamily != oldValue { diff --git a/node_modules/@charmy.tech/react-native-stroke-text/ios/StrokeTextViewManager.m b/node_modules/@charmy.tech/react-native-stroke-text/ios/StrokeTextViewManager.m index f729591..7613d92 100644 --- a/node_modules/@charmy.tech/react-native-stroke-text/ios/StrokeTextViewManager.m +++ b/node_modules/@charmy.tech/react-native-stroke-text/ios/StrokeTextViewManager.m @@ -12,5 +12,9 @@ RCT_EXPORT_VIEW_PROPERTY(fontFamily, NSString) RCT_EXPORT_VIEW_PROPERTY(align, NSString) RCT_EXPORT_VIEW_PROPERTY(ellipsis, BOOL) RCT_EXPORT_VIEW_PROPERTY(numberOfLines, NSNumber) +RCT_EXPORT_VIEW_PROPERTY(shadowOpacity, NSNumber) +RCT_EXPORT_VIEW_PROPERTY(shadowWidth, NSNumber) +RCT_EXPORT_VIEW_PROPERTY(shadowHeight, NSNumber)

@end diff --git a/node_modules/@charmy.tech/react-native-stroke-text/ios/StrokedTextLabel.swift b/node_modules/@charmy.tech/react-native-stroke-text/ios/StrokedTextLabel.swift index 3301b3a..4812922 100644 --- a/node_modules/@charmy.tech/react-native-stroke-text/ios/StrokedTextLabel.swift +++ b/node_modules/@charmy.tech/react-native-stroke-text/ios/StrokedTextLabel.swift @@ -21,7 +21,9 @@ class StrokedTextLabel: UILabel { var align: NSTextAlignment = .center var customWidth: CGFloat = 0 var ellipsis: Bool = false

var shadowOpacity : NSNumber = 0
var shadowHeight : NSNumber = 0
var shadowWidth : NSNumber = 0

override func drawText(in rect: CGRect) { let shadowOffset = self.shadowOffset @@ -37,7 +39,7 @@ class StrokedTextLabel: UILabel { context?.setTextDrawingMode(.stroke) self.textAlignment = align self.textColor = outlineColor

   dropShadow()
   super.drawText(in: adjustedRect)

   context?.setTextDrawingMode(.fill)

@@ -60,3 +62,15 @@ class StrokedTextLabel: UILabel { return contentSize } } +extension StrokedTextLabel {

func dropShadow(){
```
   self.layer.masksToBounds = false
```
```
   self.layer.shadowRadius = 1.0
```

   self.layer.shadowOpacity = Float(truncating: shadowOpacity)

   layer.shadowColor = UIColor.black.cgColor

   self.layer.shadowOffset = CGSize(width: Double(truncating: shadowWidth), height: Double(truncating: shadowHeight))

```
   self.layer.shouldRasterize = true
```

   self.layer.rasterizationScale = UIScreen.main.scale

} +} diff --git a/node_modules/@charmy.tech/react-native-stroke-text/src/index.tsx b/node_modules/@charmy.tech/react-native-stroke-text/src/index.tsx index 855178f..a5d940e 100644 --- a/node_modules/@charmy.tech/react-native-stroke-text/src/index.tsx +++ b/node_modules/@charmy.tech/react-native-stroke-text/src/index.tsx @@ -16,6 +16,9 @@ export interface StrokeTextProps { align?: TextAlign; numberOfLines?: number; ellipsis?: boolean;
shadowHeight?: number;
shadowWidth?: number;
shadowOpacity?: number; }

const NativeStrokeText = requireNativeComponent<StrokeTextProps>(ComponentName); `

Jul 29 '25 15:07 HarwinderSingh15

I can't review like that please send a pull request. Thanks

Jul 29 '25 22:07 ozgursoy