A React Native component that renders text with stroke (outline) effect natively on both Android and iOS
npm install react-native-stroked-textA React Native component that renders text with stroke (outline) effect natively on both Android and iOS. Supports both old and new React Native architectures.
- ✅ 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
``bash`
npm install react-native-stroke-textor
bun add react-native-stroke-text
For iOS, you need to install the pod:
`bash`
cd ios && pod install
`tsx
import { StrokeText } from 'react-native-stroke-text';
fontSize={24}
color="#000000"
strokeColor="#FFFFFF"
strokeWidth={2}
fontFamily="Arial"
align="center"
numberOfLines={1}
ellipsis={true}
width={200}
/>
`
| 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) |
`tsx`
fontSize={24}
color="#000000"
strokeColor="#FFFFFF"
strokeWidth={2}
/>
`tsx`
fontSize={28}
color="#00FF00"
strokeColor="#000000"
strokeWidth={2.5}
fontFamily="Helvetica-Bold"
align="center"
/>
`tsx`
fontSize={18}
color="#0000FF"
strokeColor="#FFFFFF"
strokeWidth={1.5}
numberOfLines={3}
ellipsis={true}
/>
`tsx`
fontSize={16}
color="#FFA500"
strokeColor="#000000"
strokeWidth={2}
width={150}
align="center"
/>
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
- React Native 0.79.2+
- Node.js 18+
- Xcode 15+ (for iOS)
- Android Studio (for Android)
1. Clone the repository
2. Install dependencies: bun installcd ios && pod install
3. Install pods: bun example ios
4. Run the example: or bun example android
`bashBuild the library
bun prepare
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`)MIT © hamdij0maa