{"id":25431967,"url":"https://github.com/henriquemarquesdev/react-native-linear-gradient-text","last_synced_at":"2025-10-31T22:30:20.868Z","repository":{"id":57702117,"uuid":"501323111","full_name":"henriquemarquesdev/react-native-linear-gradient-text","owner":"henriquemarquesdev","description":"Component to display text with linear gradient.","archived":false,"fork":false,"pushed_at":"2025-01-19T20:14:16.000Z","size":1880,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-19T20:14:50.689Z","etag":null,"topics":["gradient","gradient-text","react","react-native","react-native-linear-gradient"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-linear-gradient-text","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/henriquemarquesdev.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":"2022-06-08T16:09:45.000Z","updated_at":"2025-01-19T20:14:17.000Z","dependencies_parsed_at":"2024-01-17T06:47:11.307Z","dependency_job_id":"668ee434-4058-40a0-8e0e-f8c7cf2c07be","html_url":"https://github.com/henriquemarquesdev/react-native-linear-gradient-text","commit_stats":null,"previous_names":["hmdarkfir3/react-native-linear-gradient-text"],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henriquemarquesdev%2Freact-native-linear-gradient-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henriquemarquesdev%2Freact-native-linear-gradient-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henriquemarquesdev%2Freact-native-linear-gradient-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henriquemarquesdev%2Freact-native-linear-gradient-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/henriquemarquesdev","download_url":"https://codeload.github.com/henriquemarquesdev/react-native-linear-gradient-text/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239236400,"owners_count":19604901,"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":["gradient","gradient-text","react","react-native","react-native-linear-gradient"],"created_at":"2025-02-17T04:31:17.530Z","updated_at":"2025-10-31T22:30:20.675Z","avatar_url":"https://github.com/henriquemarquesdev.png","language":"Java","readme":"\u003ch1 align=\"center\" \u003e\n  react-native-linear-gradient-text\n\u003c/h1\u003e\n\n\u003cp align=\"center\" \u003e\n  \u003cimg alt=\"NPM package version\" src=\"https://img.shields.io/npm/v/react-native-linear-gradient-text?style=for-the-badge\"\u003e\n\n  \u003cimg alt=\"NPM package downloads\" src=\"https://img.shields.io/npm/dt/react-native-linear-gradient-text?style=for-the-badge\"\u003e\n\n  \u003cimg alt=\"GitHub last commit\" src=\"https://img.shields.io/github/last-commit/hmdarkfir3/react-native-linear-gradient-text?style=for-the-badge\"\u003e\n\n  \u003cimg alt=\"Repository issues size\" src=\"https://img.shields.io/github/issues/hmdarkfir3/react-native-linear-gradient-text?style=for-the-badge\"\u003e\n\n  \u003cimg alt=\"License\" src=\"https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge\" /\u003e\n\u003c/p\u003e\n\n---\n\n## About\n\nComponent to display text with linear gradient\n\n---\n\n## Installation\n\n### Step 1: Install @react-native-masked-view/masked-view library\n\nMake sure that you have installed the `@react-native-masked-view/masked-view` library:\n\n- https://github.com/react-native-masked-view/masked-view#getting-started\n\n### Step 2: Install react-native-linear-gradient library\n\nMake sure that you have installed the `react-native-linear-gradient` library:\n\n- https://github.com/react-native-linear-gradient/react-native-linear-gradient#installation\n\n---\n\n## Getting Started\n\n```sh\nyarn add react-native-linear-gradient-text\n# or\nnpm install react-native-linear-gradient-text\n```\n\n---\n\n## Usage\n\n```js\nimport React from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport { LinearGradientText } from 'react-native-linear-gradient-text';\n\nexport const App = () =\u003e {\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cLinearGradientText\n        colors={['#E76F00', '#EA374E']}\n        text=\"Hello World\"\n        start={{ x: 0.5, y: 0 }}  // Optional\n        end={{ x: 1, y: 1 }}  // Optional\n        textStyle={{ fontSize: 40 }}  // Optional\n        textProps={{ allowFontScaling: true }}  // Optional\n      /\u003e\n    \u003c/View\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n```\n\n---\n\n## Props\n\n| Prop      | Type                                                       | Default          | Description                                                                                                   |\n| --------- | ---------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------- |\n| text      | string                                                     | **Required**     | An string that display text. Example: `text=\"Hello World\"`                                                    |\n| colors    | string[]                                                   | **Required**     | An array of at least two color values that represent gradient colors. Example: `colors={[\"black\", \"white\"]}`. |\n| start     | { x: number, y: number }                                   | { x: 0.5, y: 0 } | An optional prop. He declare the position that the gradient starts. Example `start={{ x: 0.5, y: 0 }}`.       |\n| end       | { x: number, y: number }                                   | { x: 1, y: 1 }   | Same as start, but for the of the gradient.                                                                   |\n| textStyle | [TextStyle](https://reactnative.dev/docs/text-style-props) | Default Value    | A property to change all styles that a text has. \n| textProps | [TextProps](https://reactnative.dev/docs/text-style-props#props) | Default Value    | A property to apply native props to text.   |\n\n---\n\n## Author\n\n\u003cimg style=\"border-radius: 50%;\" src=\"https://github.com/HMDarkFir3.png\" width=\"150px;\" alt=\"\"/\u003e\n \u003ch4\u003eHenrique Luís Oliveira Marques\u003c/h4\u003e\n\n\u003cp align=\"left\"\u003e\n  \u003ca href=\"https://www.linkedin.com/in/hlom\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\"\u003e\u003c/a\u003e\n\u003cp\u003e\n\n---\n\n## Contributors\n\n\n-  [\u003cimg src=\"https://github.com/BLOCKMATERIAL.png\" width=\"30\" height=\"30\"\u003e](https://github.com/BLOCKMATERIAL) [MATERIALBLOCK](https://github.com/BLOCKMATERIAL) \n## License\n\nThis project is under the MIT license. See the [LICENSE](./LICENSE) to learn more.\n\u003cbr\u003e\n[Contact!](https://www.linkedin.com/in/hlom)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenriquemarquesdev%2Freact-native-linear-gradient-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhenriquemarquesdev%2Freact-native-linear-gradient-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenriquemarquesdev%2Freact-native-linear-gradient-text/lists"}