Want to use text stroke or text outline in React Native? This library is easy to create
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
npm install @kdn0325/react-native-outlined-text
# or
yarn add @kdn0325/react-native-outlined-text
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,
},
});
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 ) |
<OutlinedText
text={'Hello World'}
fontColor={'#fff'}
fontSize={50}
fontWeight={'500'}
outlineColor={'pink'}
line={2}
/>
Create a react-native.config.js
file in the root directory
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['/assets/fonts'], // or './src/assets/fonts'
};
We welcome contributions to improve this component. Feel free to submit issues and enhancement requests.
Please refer to the project's license for usage rights and limitations.