{"id":20740193,"url":"https://github.com/charmy/react-native-stroke-text","last_synced_at":"2025-04-06T07:09:44.301Z","repository":{"id":218445709,"uuid":"746408528","full_name":"charmy/react-native-stroke-text","owner":"charmy","description":"React Native Stroke/Outline Text","archived":false,"fork":false,"pushed_at":"2025-03-27T03:03:41.000Z","size":2157,"stargazers_count":76,"open_issues_count":6,"forks_count":10,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-27T03:29:56.419Z","etag":null,"topics":["outline","outline-text","react-native","react-native-stroke-text","stroke","stroke-text","text"],"latest_commit_sha":null,"homepage":"","language":"Java","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/charmy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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-01-21T23:12:41.000Z","updated_at":"2025-03-27T02:59:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"eaf045b7-cc7b-4f05-8d29-6c2a340df213","html_url":"https://github.com/charmy/react-native-stroke-text","commit_stats":null,"previous_names":["charmy/react-native-stroke-text"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charmy%2Freact-native-stroke-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charmy%2Freact-native-stroke-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charmy%2Freact-native-stroke-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charmy%2Freact-native-stroke-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/charmy","download_url":"https://codeload.github.com/charmy/react-native-stroke-text/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445667,"owners_count":20939958,"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":["outline","outline-text","react-native","react-native-stroke-text","stroke","stroke-text","text"],"created_at":"2024-11-17T06:27:42.011Z","updated_at":"2025-04-06T07:09:44.284Z","avatar_url":"https://github.com/charmy.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Stroke/Outline Text\n\n[![npm version](https://badge.fury.io/js/@charmy.tech%2Freact-native-stroke-text.svg)](https://badge.fury.io/js/@charmy.tech%2Freact-native-stroke-text)\n\nAllows you to add stylish text with stroke effects to your mobile applications. It is perfect for creating visually\nappealing text elements with outline effects.\n\n\u003ch1 align=\"center\"\u003e\n  \u003cimg width=\"550\" src=\"docs/example.jpeg\"/\u003e\n\u003c/h1\u003e\n\n## Installation\n\n```bash\nnpm install @charmy.tech/react-native-stroke-text\n# or\nyarn add @charmy.tech/react-native-stroke-text\n```\n\n## Android\nmin ```compileSdkVersion``` is required to be ```34```\n## iOS\nGo to your ios folder and run:\n\n```\npod install\n```\n\n## Usage\n\nHere's a quick example to get you started with StrokeText:\n\n```jsx\nimport React from \"react\";\nimport { StrokeText } from \"@charmy.tech/react-native-stroke-text\";\nimport { View } from \"react-native\";\n\nexport default function Screen() {\n  return (\n    \u003cView style={{ flex: 1, justifyContent: \"center\", alignItems: \"center\" }}\u003e\n      \u003cStrokeText\n        text=\"Test\"\n        fontSize={50}\n        color=\"#000000\"\n        strokeColor=\"#c334eb\"\n        strokeWidth={20}\n        fontFamily=\"Nunito-Black\"\n      /\u003e\n    \u003c/View\u003e\n  );\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| `fontSize`      | number  | Size of the text font, defining how large the text will be.     |\n| `color`         | string  | Color of the text, can use any valid color format.              |\n| `strokeColor`   | string  | Color of the stroke (outline) around the text.                  |\n| `strokeWidth`   | number  | Width of the stroke, determining the thickness of the outline.  |\n| `fontFamily`    | string  | Font family for the text, should match available project fonts. |\n| `align`         | string  | Text alignment (default: `center`)                              |\n| `numberOfLines` | number  | Number of lines (default: `0`)                                  |\n| `ellipsis`      | boolean | Ellipsis (...) (default: `false`)                               |\n| `width`         | number  | Text width to enable ellipsis (default: `undefined`)            |\n\n## Ellipsis\n\n```jsx\n\u003cStrokeText\n  text=\"Lorem ipsum\"\n    width={150} // +\n    ellipsis={true} // +\n    numberOfLines={1} // +\n  fontSize={32}\n  color=\"#FFFFFF\"\n  strokeColor=\"#000000\"\n  strokeWidth={2}\n  fontFamily=\"Nunito-Black\"\n  align=\"center\"\n/\u003e\n\n```\n\n\u003ch1 align=\"center\"\u003e\n  \u003cimg width=\"450\" src=\"docs/ellipsis.jpeg\"/\u003e\n\u003c/h1\u003e\n\n## Custom Font\n\n### Bare React Native\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### Expo ([expo-font](https://docs.expo.dev/versions/latest/sdk/font/))\n\n```tsx\nimport { useFonts } from \"expo-font\";\nimport { Dosis_400Regular } from \"@expo-google-fonts/dosis\";\n\n\nconst [fontsLoaded, fontError] = useFonts({\n  Danfo: require(\"./src/assets/fonts/Danfo-Regular.ttf\"),\n  \"Dosis-Regular\": Dosis_400Regular,\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%2Fcharmy%2Freact-native-stroke-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcharmy%2Freact-native-stroke-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharmy%2Freact-native-stroke-text/lists"}