{"id":13469633,"url":"https://github.com/phamfoo/react-native-easing-gradient","last_synced_at":"2025-03-17T15:11:54.580Z","repository":{"id":40788044,"uuid":"363133360","full_name":"phamfoo/react-native-easing-gradient","owner":"phamfoo","description":"Create smooth gradients in React Native","archived":false,"fork":false,"pushed_at":"2024-02-27T09:35:37.000Z","size":732,"stargazers_count":205,"open_issues_count":0,"forks_count":5,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-29T23:55:45.123Z","etag":null,"topics":["easing","expo","gradients","react","react-native","smooth"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/phamfoo.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":"2021-04-30T12:26:22.000Z","updated_at":"2024-10-29T08:49:58.000Z","dependencies_parsed_at":"2024-06-20T00:11:01.931Z","dependency_job_id":"981761ed-50cc-43fc-956b-ed5a1cd94b5a","html_url":"https://github.com/phamfoo/react-native-easing-gradient","commit_stats":{"total_commits":21,"total_committers":2,"mean_commits":10.5,"dds":0.1428571428571429,"last_synced_commit":"154828a3f339a15c54cea394d331a68774a540a8"},"previous_names":["tienphaw/react-native-easing-gradient"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phamfoo%2Freact-native-easing-gradient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phamfoo%2Freact-native-easing-gradient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phamfoo%2Freact-native-easing-gradient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phamfoo%2Freact-native-easing-gradient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phamfoo","download_url":"https://codeload.github.com/phamfoo/react-native-easing-gradient/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244056425,"owners_count":20390719,"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":["easing","expo","gradients","react","react-native","smooth"],"created_at":"2024-07-31T15:01:47.899Z","updated_at":"2025-03-17T15:11:54.550Z","avatar_url":"https://github.com/phamfoo.png","language":"TypeScript","readme":"# React Native Easing Gradient\n\n[![Stable Release](https://img.shields.io/npm/v/react-native-easing-gradient.svg)](https://npm.im/react-native-easing-gradient) [![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)\n\nCreate smooth gradients in React Native\n\n![](demo.png)\n\n## The problem\n\nFrom https://larsenwork.com/easing-gradients/\n\n\u003e Linear gradients often have hard edges where they start and/or end. We can avoid those by controlling the color mix with easing functions.\n\n## Usage\n\n```js\nimport { LinearGradient } from 'expo-linear-gradient'\nimport { easeGradient } from 'react-native-easing-gradient'\n\nconst { colors, locations } = easeGradient({\n  colorStops: {\n    0: {\n      color: 'transparent',\n    },\n    1: {\n      color: '#18181B',\n    },\n  },\n})\n\nfunction App() {\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cLinearGradient\n        colors={colors}\n        locations={locations}\n        style={styles.overlay}\n      /\u003e\n    \u003c/View\u003e\n  )\n}\n```\n\nYou can also change the [easing functions](https://reactnative.dev/docs/easing) between the color stops\n\n```js\nconst { colors, locations } = easeGradient({\n  colorStops: {\n    0: {\n      color: 'transparent',\n      // The transition from `0` to `1` will now use `Easing.linear` instead of `Easing.ease`\n      easing: Easing.linear,\n    },\n    1: {\n      color: '#18181B',\n    },\n  },\n  // The easing function used on all transitions, defaults to `ease-in-out` (Easing.bezier(0.42, 0, 0.58, 1))\n  easing: Easing.ease,\n})\n```\n\nOr the amount of extra color stops added to each transition\n\n```js\nconst { colors, locations } = easeGradient({\n  colorStops: {\n    0: {\n      color: 'transparent',\n    },\n    1: {\n      color: '#18181B',\n    },\n  },\n  // The more color stops added, the smoother the transition is\n  // Defaults to 12\n  extraColorStopsPerTransition: 16\n})\n```\n## Credits\n\n- [Easing Linear Gradients](https://css-tricks.com/easing-linear-gradients/)\n- [figma-easing-gradient](https://github.com/matchai/figma-easing-gradient)\n\n## Example\n\nTo run the example project, follow these steps:\n\n- Clone the repo\n- Run these commands\n\n```sh\nyarn\ncd example\nyarn \u0026\u0026 yarn start\n```\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphamfoo%2Freact-native-easing-gradient","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphamfoo%2Freact-native-easing-gradient","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphamfoo%2Freact-native-easing-gradient/lists"}