{"id":16455155,"url":"https://github.com/kdn0325/react-native-outlined-text","last_synced_at":"2025-10-29T04:42:56.086Z","repository":{"id":237719700,"uuid":"795133497","full_name":"kdn0325/react-native-outlined-text","owner":"kdn0325","description":"Do you want to use text stroke or text outline in React Native? This library is easy to create","archived":false,"fork":false,"pushed_at":"2024-08-01T05:34:58.000Z","size":1760,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T09:39:30.212Z","etag":null,"topics":["react-native","react-native-outlined-text","react-native-stroke-text"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@kdn0325/react-native-outlined-text","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kdn0325.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-02T16:44:22.000Z","updated_at":"2025-01-07T09:01:08.000Z","dependencies_parsed_at":"2024-11-11T05:33:26.861Z","dependency_job_id":"484548c1-5c30-437f-a2e2-a21d714dcfd5","html_url":"https://github.com/kdn0325/react-native-outlined-text","commit_stats":{"total_commits":23,"total_committers":2,"mean_commits":11.5,"dds":0.04347826086956519,"last_synced_commit":"fe5d0c225a545b541703621338e68ca240048349"},"previous_names":["kdn0325/react-native-outlined-text"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdn0325%2Freact-native-outlined-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdn0325%2Freact-native-outlined-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdn0325%2Freact-native-outlined-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdn0325%2Freact-native-outlined-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kdn0325","download_url":"https://codeload.github.com/kdn0325/react-native-outlined-text/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238455340,"owners_count":19475434,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-native","react-native-outlined-text","react-native-stroke-text"],"created_at":"2024-10-11T10:21:19.517Z","updated_at":"2025-10-27T07:31:04.100Z","avatar_url":"https://github.com/kdn0325.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Stroke/Outline Text\n\nWant to use text stroke or text outline in React Native? This library is easy to create\n\n## Examples\n\n```\ncd example\n\nnpm install @kdn0325/react-native-outlined-text\n# or\nyarn add @kdn0325/react-native-outlined-text\n\n\nreact-native run-ios\n\nreact-native run-android\n```\n\n![Example](https://github.com/kdn0325/react-native-outlined-text/assets/91298955/e87d52f3-9178-4a38-8c05-1fff55dbe056)\n\n## Installation\n\n```bash\nnpm install @kdn0325/react-native-outlined-text\n# or\nyarn add @kdn0325/react-native-outlined-text\n```\n\n## Usage\n\nHere's a quick example to get you started with StrokeText:\n\n```jsx\nimport * as React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport OutlinedText from '@kdn0325/react-native-outlined-text';\n\nexport default function App() {\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cOutlinedText\n        text={'Hello World'}\n        fontColor={'#000'}\n        fontSize={50}\n        fontWeight={'500'}\n        outlineColor={'#fff'}\n        shadowLine={2}\n      /\u003e\n      \u003cOutlinedText\n        text={'Hello World'}\n        fontColor={'#fff'}\n        fontSize={50}\n        fontWeight={'500'}\n        outlineColor={'pink'}\n        shadowLine={2}\n      /\u003e\n      \u003cOutlinedText\n        text={'Hello World'}\n        fontColor={'green'}\n        fontSize={50}\n        fontWeight={'500'}\n        outlineColor={'blue'}\n        shadowLine={2}\n      /\u003e\n    \u003c/View\u003e\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#000',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  box: {\n    width: 60,\n    height: 60,\n    marginVertical: 20,\n  },\n});\n```\n\n### Props\n\nThe following table outlines the props available for the `StrokeText` component:\n\n| Prop           | Type   | Description                                                                                                                                                                                                                            |\n| -------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `text`         | string | The text content you want to display.                                                                                                                                                                                                  |\n| `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`)                                                                                                 |\n| `color`        | string | Color of the text, can use any valid color format. (default: `#fff`)                                                                                                                                                                   |\n| `outlineColor` | string | Color of the stroke (outline) around the text. (default: `#000`)                                                                                                                                                                       |\n| `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`) |\n| `fontSize`     | string | Size of the text font, defining how large the text will be. (default: `14`)                                                                                                                                                            |\n| `fontFamily`   | string | Font family for the text, should match available project fonts. (default: `system font`)                                                                                                                                               |\n| `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`)                                               |\n\n## Ellipsis\n\n```jsx\n\u003cOutlinedText\n  text={'Hello World'}\n  fontColor={'#fff'}\n  fontSize={50}\n  fontWeight={'500'}\n  outlineColor={'pink'}\n  line={2}\n/\u003e\n```\n\n## Custom Font\n\nCreate a `react-native.config.js` file in the root directory\n\n```javascript\nmodule.exports = {\n  project: {\n    ios: {},\n    android: {},\n  },\n  assets: ['/assets/fonts'], // or './src/assets/fonts'\n};\n```\n\n## Contributing\n\nWe welcome contributions to improve this component. Feel free to submit issues and enhancement requests.\n\n## License\n\nPlease refer to the project's license for usage rights and limitations.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkdn0325%2Freact-native-outlined-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkdn0325%2Freact-native-outlined-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkdn0325%2Freact-native-outlined-text/lists"}