Do you want to use text stroke or text outline in React Native? This library is easy to create
MIT License
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.