{"id":25344754,"url":"https://github.com/iyegoroff/react-native-text-gradient","last_synced_at":"2025-04-07T11:06:29.176Z","repository":{"id":29921079,"uuid":"121912476","full_name":"iyegoroff/react-native-text-gradient","owner":"iyegoroff","description":"Text gradient for React-Native (ON HIATUS)","archived":false,"fork":false,"pushed_at":"2023-01-03T20:19:57.000Z","size":2364,"stargazers_count":98,"open_issues_count":25,"forks_count":32,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-31T08:09:14.624Z","etag":null,"topics":["react-native","text-gradients"],"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/iyegoroff.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}},"created_at":"2018-02-18T02:59:33.000Z","updated_at":"2024-12-09T08:50:51.000Z","dependencies_parsed_at":"2023-01-14T15:55:14.107Z","dependency_job_id":null,"html_url":"https://github.com/iyegoroff/react-native-text-gradient","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iyegoroff%2Freact-native-text-gradient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iyegoroff%2Freact-native-text-gradient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iyegoroff%2Freact-native-text-gradient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iyegoroff%2Freact-native-text-gradient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iyegoroff","download_url":"https://codeload.github.com/iyegoroff/react-native-text-gradient/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247640462,"owners_count":20971557,"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","text-gradients"],"created_at":"2025-02-14T11:51:02.571Z","updated_at":"2025-04-07T11:06:29.139Z","avatar_url":"https://github.com/iyegoroff.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-text-gradient\n\n[![npm version](https://badge.fury.io/js/react-native-text-gradient.svg?t=1495378566925)](https://badge.fury.io/js/react-native-text-gradient)\n[![Dependency Status](https://david-dm.org/iyegoroff/react-native-text-gradient.svg?t=1495378566925)](https://david-dm.org/iyegoroff/react-native-text-gradient)\n[![typings included](https://img.shields.io/badge/typings-included-brightgreen.svg?t=1495378566925)](src/index.d.ts)\n[![npm](https://img.shields.io/npm/l/express.svg?t=1495378566925)](https://www.npmjs.com/package/react-native-text-gradient)\n\nReact-Native text gradient component for iOS \u0026 Android.\n\n## Status\n\n🚧🚧🚧\n\nCurrently rntg is on hiatus, but I'll update it someday. Last supported react-native version is \"\u003cstrong\u003e0.59.10\u003c/strong\u003e\".\n\n🚧🚧🚧\n- Component works as drop-in replacement for standard `Text` component and it is possible to have nested gradients.\n- React-Native:\n  - with rn \u003e= 0.59.0 use latest version and [patch](#usage-with-rn--0560);\n  - with rn \u003e= 0.56.0 use 0.0.17 and [patch](#usage-with-rn--0560);\n  - with rn \u003e= 0.55.0 use 0.0.9;\n  - with rn \u003e= 0.54.0 use 0.0.7;\n  - with rn \u003e= 0.53.1 use 0.0.4;\n  - rn 0.53.0 is not supported;\n  - with rn \u003e= 0.50.0 use 0.0.3.\n\n## Getting started\n\n`$ npm install react-native-text-gradient --save`\n\n### Mostly automatic installation\n\n`$ react-native link react-native-text-gradient`\n\n### Manual installation\n\n[link](manual_installation.md)\n\n\u003e If you are using Cocoapods you need to follow the manual installation guide.\n\n## Example\n\n```javascript\nimport { LinearTextGradient } from \"react-native-text-gradient\";\n\n\u003cLinearTextGradient\n  style={{ fontWeight: \"bold\", fontSize: 72 }}\n  locations={[0, 1]}\n  colors={[\"red\", \"blue\"]}\n  start={{ x: 0, y: 0 }}\n  end={{ x: 1, y: 0 }}\n\u003e\n  THIS IS TEXT GRADIENT\n\u003c/LinearTextGradient\u003e;\n```\n\n|                        iOS                        |                        Android                         |\n| :-----------------------------------------------: | :----------------------------------------------------: |\n| \u003cimg src=\"img/ios.png\" align=\"left\" height=\"275\"\u003e | \u003cimg src=\"img/android.jpg\" align=\"right\" height=\"275\"\u003e |\n\n## Usage\n\n### LinearTextGradient\n\nInterface is similar to `Text` \u0026 [LinearGradient](https://github.com/react-native-community/react-native-linear-gradient)\n\n#### colors\n\nAn array of at least two color values that represent gradient colors. Example: `['red', 'blue']` sets gradient from red to blue.\n\n#### start\n\nAn optional object of the following type: `{ x: number, y: number }`. Coordinates declare the position that the gradient starts at, as a fraction of the overall size of the gradient, starting from the top left corner. Example: `{ x: 0.1, y: 0.1 }` means that the gradient will start 10% from the top and 10% from the left.\n\n#### end\n\nSame as start, but for the end of the gradient.\n\n#### locations\n\nAn optional array of numbers defining the location of each gradient color stop, mapping to the color with the same index in `colors` prop. Example: `[0.1, 0.75, 1]` means that first color will take 0% - 10%, second color will take 10% - 75% and finally third color will occupy 75% - 100%.\n\n#### useViewFrame\n\nOptional. If true gradient will be calculated for text view background frame rather than text frame.\n\n```javascript\n\u003cLinearTextGradient\n  numberOfLines={1}\n  useViewFrame={true}\n  locations={[0.5, 0.95]}\n  // note colors like '#FF000000' are used for seamless transition to transparent\n  colors={[\"#FF0000\", \"#FF000000\"]}\n  start={{ x: 0, y: 0 }}\n  end={{ x: 1, y: 0 }}\n\u003e\n  %%%%%%%%%%%%%%%%%%%%%%\n\u003c/LinearTextGradient\u003e\n```\n\n\u003cimg src=\"img/useViewFrame.png\" width=\"300\"\u003e\n\n## Usage with rn \u003e= 0.56.0\n\nWait until https://github.com/facebook/react/pull/13211 will be merged or patch react-native to remove failing invariant checks\n\n`$ node node_modules/react-native-text-gradient/patch-rn.js`\n\n## Caveats\n\nWhen mixing several text gradients and `Text`s top component always should be text gradient.\n\n```javascript\n\u003cLinearTextGradient {...someGradientProps}\u003e\n  \u003cText\u003e123\u003c/Text\u003e\n  qwerty\n  \u003cLinearTextGradient {...anotherGradientProps}\u003e321\u003c/LinearTextGradient\u003e\n\u003c/LinearTextGradient\u003e\n```\n\nThis is necessary because only top text component is 'mapped' to actual native node and its children are 'virtual' from the native perspective.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiyegoroff%2Freact-native-text-gradient","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiyegoroff%2Freact-native-text-gradient","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiyegoroff%2Freact-native-text-gradient/lists"}