React Native Stroked Text

A React Native component that renders text with stroke (outline) effect natively on both Android and iOS. Supports both old and new React Native architectures.

Features

• ✅ Native implementation for both Android and iOS
• ✅ Support for both old and new React Native architectures
• ✅ Customizable stroke width and colors
• ✅ Font family support
• ✅ Text alignment options
• ✅ Multi-line text support
• ✅ Ellipsis support
• ✅ Fixed width support
• ✅ TypeScript support

Installation

npm install react-native-stroke-text
# or
bun add react-native-stroke-text

iOS

For iOS, you need to install the pod:

cd ios && pod install

Usage

import { StrokeText } from 'react-native-stroke-text';

<StrokeText
  text="Hello World"
  fontSize={24}
  color="#000000"
  strokeColor="#FFFFFF"
  strokeWidth={2}
  fontFamily="Arial"
  align="center"
  numberOfLines={1}
  ellipsis={true}
  width={200}
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | text | string | "" | The text to display | | fontSize | number | 16 | Font size in points | | color | string | "#000000" | Text color (hex format) | | strokeColor | string | "#FFFFFF" | Stroke color (hex format) | | strokeWidth | number | 2 | Stroke width in points | | fontFamily | string | undefined | Font family name | | align | 'left' \| 'center' \| 'right' | 'left' | Text alignment | | numberOfLines | number | 1 | Maximum number of lines | | ellipsis | boolean | true | Whether to show ellipsis for truncated text | | width | number | 0 | Fixed width (0 = auto) |

Examples

Basic Usage

<StrokeText
  text="Hello World"
  fontSize={24}
  color="#000000"
  strokeColor="#FFFFFF"
  strokeWidth={2}
/>

Custom Font

<StrokeText
  text="Custom Font"
  fontSize={28}
  color="#00FF00"
  strokeColor="#000000"
  strokeWidth={2.5}
  fontFamily="Helvetica-Bold"
  align="center"
/>

Multi-line Text

<StrokeText
  text="This is a longer text that demonstrates how the component handles multiple lines and text wrapping."
  fontSize={18}
  color="#0000FF"
  strokeColor="#FFFFFF"
  strokeWidth={1.5}
  numberOfLines={3}
  ellipsis={true}
/>

Fixed Width

<StrokeText
  text="Fixed Width Text"
  fontSize={16}
  color="#FFA500"
  strokeColor="#000000"
  strokeWidth={2}
  width={150}
  align="center"
/>

Architecture Support

This component supports both old and new React Native architectures:

• Old Architecture: Uses SimpleViewManager on Android and RCTViewComponentView on iOS
• New Architecture: Uses Fabric components with codegen

Development

Prerequisites

• React Native 0.79.2+
• Node.js 18+
• Xcode 15+ (for iOS)
• Android Studio (for Android)

Setup

1. Clone the repository
2. Install dependencies: bun install
3. Install pods: cd ios && pod install
4. Run the example: bun example ios or bun example android

Building

# Build the library
bun prepare

# Run tests
bun test

# Type checking
bun typecheck

# Linting
bun lint

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © hamdij0maa