Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kdn0325/react-native-outlined-text
Do you want to use text stroke or text outline in React Native? This library is easy to create
https://github.com/kdn0325/react-native-outlined-text
react-native react-native-outlined-text react-native-stroke-text
Last synced: 3 months ago
JSON representation
Do you want to use text stroke or text outline in React Native? This library is easy to create
- Host: GitHub
- URL: https://github.com/kdn0325/react-native-outlined-text
- Owner: kdn0325
- License: mit
- Created: 2024-05-02T16:44:22.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-08-01T05:34:58.000Z (5 months ago)
- Last Synced: 2024-10-02T05:02:22.897Z (3 months ago)
- Topics: react-native, react-native-outlined-text, react-native-stroke-text
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@kdn0325/react-native-outlined-text
- Size: 1.68 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
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
```bash
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:
```jsx
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import OutlinedText from '@kdn0325/react-native-outlined-text';
export default function App() {
return (
);
}
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
```jsx
```
## Custom Font
Create a `react-native.config.js` file in the root directory
```javascript
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.