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

``bash
npm install react-native-stroke-text


or


bun add react-native-stroke-text
`

$3

For iOS, you need to install the pod:

`bash
cd ios && pod install
`

Usage

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

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

$3

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

$3

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

$3

`tsx
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}
/>
`

$3

`tsx
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

$3

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

$3

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

$3

`bash


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