react-native-outlined-text

An enhanced, customizable React Native component for creating outlined text with stroke effects and automatic text wrapping.

Installation

npm install @donkasun/react-native-outlined-text react-native-svg
# or
yarn add @donkasun/react-native-outlined-text react-native-svg

iOS Setup (if using CocoaPods)

cd ios && pod install

Quick Start

import React from 'react';
import { View } from 'react-native';
import { OutlinedText } from '@donkasun/react-native-outlined-text';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <OutlinedText 
        text="Hello World"
        width={200}
        strokeColor="black"
        strokeWidth={2}
        fillColor="white"
      />
    </View>
  );
};

Examples

Basic Outlined Text

<OutlinedText
  text="Hello World!"
  width={200}
/>

Colored Outlined Text

<OutlinedText
  text="Colorful Text"
  fontSize={28}
  strokeWidth={2}
  strokeColor="#ff6b6b"
  fillColor="#FFFFFF"
  width={250}
/>

Shadowed Outlined Text

<OutlinedText
  text="Shadowed Text"
  fontSize={48}
  strokeWidth={1}
  strokeColor="#000"
  width={250}
  shadowColor="#8c8c8c"
  shadowOffsetX={4}
  shadowOffsetY={4}
/>

Features

• Customizable Stroke Effects: Adjustable stroke width and color
• Shadow Effects: Enhanced visual appeal with customizable shadows
• Automatic Text Wrapping: Intelligent text wrapping for long content
• Cross-Platform: Works seamlessly on iOS and Android
• TypeScript Support: Full type safety and IntelliSense
• Single Component: OutlinedText for all outlined text needs

API Reference

OutlinedText Props

Prop	Type	Default	Description
text	string	-	The text to display
width	number	-	Width of the text container
height	number	auto	Height of the text container
fontSize	number	26	Font size of the text
strokeColor	string	'#000000'	Color of the text stroke
strokeWidth	number	1	Width of the text stroke
fillColor	string	'#FFFFFF'	Color of the text fill
shadowColor	string	'#000000'	Color of the shadow
shadowOffsetX	number	0	Horizontal shadow offset
shadowOffsetY	number	0	Vertical shadow offset
shadowOpacity	number	1	Shadow opacity
shadowBlur	number	0	Shadow blur radius
x	number	width/2	X position of the text
y	number	height/2	Y position of the text
textAnchor	string	'middle'	Text alignment ('start', 'middle', 'end')
fontFamily	string	'medium'	Font family to use
letterSpacing	number	0	Letter spacing
textTransform	string	'none'	Text transformation ('none', 'uppercase', 'lowercase', 'capitalize')
opacity	number	1	Text opacity

Advanced Usage

import { OutlinedText } from '@donkasun/react-native-outlined-text';

<OutlinedText 
  text="Advanced Outlined Text"
  width={300}
  height={100}
  fontSize={24}
  strokeColor="#FF6B6B"
  strokeWidth={2}
  fillColor="#4ECDC4"
  shadowColor="#8c8c8c"
  shadowOffsetX={3}
  shadowOffsetY={3}
  shadowOpacity={0.8}
  shadowBlur={5}
  x={150}
  y={50}
  textAnchor="middle"
  fontFamily="Arial"
  letterSpacing={1}
  textTransform="uppercase"
  opacity={0.9}
/>

Component Features

OutlinedText

• Automatic positioning and layout handling
• Easy to use with sensible defaults
• Full control over styling and effects
• Built-in text wrapping for long content

Frequently Asked Questions

The text is not displaying correctly

Make sure you have installed react-native-svg as it's a required peer dependency.

How can I center the text?

The text is centered by default. You can use the textAnchor prop to change alignment:

• 'start' - Left align
• 'middle' - Center align (default)
• 'end' - Right align

Can I use custom fonts?

Yes, you can use the fontFamily prop. Make sure your fonts are properly linked in your React Native project.

How do I add shadow effects?

Use the shadow props: shadowColor, shadowOffsetX, shadowOffsetY, shadowOpacity, and shadowBlur.

Contributing

Pull requests, feedback, and suggestions are welcome!

License

MIT © donkasun

Test comment