@kdn0325/react-native-outlined-text
v1.1.2
Published
Want to use text stroke or text outline in React Native? This library is easy to create
Downloads
157
Readme
React Native Stroke/Outline Text
Want to use text stroke or text outline in React Native? This library is easy to create
Examples
cd example
npm install @kdn0325/react-native-outlined-text
# or
yarn add @kdn0325/react-native-outlined-text
react-native run-ios
react-native run-android
Installation
npm install @kdn0325/react-native-outlined-text
# or
yarn add @kdn0325/react-native-outlined-text
Usage
Here's a quick example to get you started with StrokeText:
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import OutlinedText from '@kdn0325/react-native-outlined-text';
export default function App() {
return (
<View style={styles.container}>
<OutlinedText
text={'Hello World'}
fontColor={'#000'}
fontSize={50}
fontWeight={'500'}
outlineColor={'#fff'}
shadowLine={2}
/>
<OutlinedText
text={'Hello World'}
fontColor={'#fff'}
fontSize={50}
fontWeight={'500'}
outlineColor={'pink'}
shadowLine={2}
/>
<OutlinedText
text={'Hello World'}
fontColor={'green'}
fontSize={50}
fontWeight={'500'}
outlineColor={'blue'}
shadowLine={2}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000',
alignItems: 'center',
justifyContent: 'center',
},
box: {
width: 60,
height: 60,
marginVertical: 20,
},
});
Props
The following table outlines the props available for the StrokeText
component:
| Prop | Type | Description |
| -------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- |
| text
| string | The text content you want to display. |
| shadowLine
| number | The thickness of the stroke (outline) around the text. If this prop isn't provided, the default thickness will be used. (default: 1
) |
| color
| string | Color of the text, can use any valid color format. (default: #fff
) |
| outlineColor
| string | Color of the stroke (outline) around the text. (default: #000
) |
| fontWeight
| string | The thickness of the font. It accepts the following values: 'normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'. If this prop isn't provided, the default value 'normal' will be used. (default: normal
) |
| fontSize
| string | Size of the text font, defining how large the text will be. (default: 14
) |
| fontFamily
| string | Font family for the text, should match available project fonts. (default: system font
) |
| align
| string | Text alignment. It accepts the following values: 'auto', 'left', 'right', 'center', 'justify'. If this prop isn't provided, the default value 'center' will be used. (default: center
) | |
Ellipsis
<OutlinedText
text={'Hello World'}
fontColor={'#fff'}
fontSize={50}
fontWeight={'500'}
outlineColor={'pink'}
line={2}
/>
Custom Font
Create a react-native.config.js
file in the root directory
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['/assets/fonts'], // or './src/assets/fonts'
};
Contributing
We welcome contributions to improve this component. Feel free to submit issues and enhancement requests.
License
Please refer to the project's license for usage rights and limitations.