{"id":14969994,"url":"https://github.com/homielab/react-native-auto-scroll","last_synced_at":"2025-04-04T22:08:28.272Z","repository":{"id":45185970,"uuid":"150646974","full_name":"homielab/react-native-auto-scroll","owner":"homielab","description":"A performance auto horizontal scrolling component for react-native ","archived":false,"fork":false,"pushed_at":"2023-09-13T13:28:51.000Z","size":2495,"stargazers_count":221,"open_issues_count":9,"forks_count":24,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-28T21:07:26.803Z","etag":null,"topics":["auto-scroll","auto-scrolling","marquee","react","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@homielab/react-native-auto-scroll","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/homielab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"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},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":"homielab","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2018-09-27T20:57:44.000Z","updated_at":"2025-03-18T17:33:52.000Z","dependencies_parsed_at":"2024-06-18T20:04:45.580Z","dependency_job_id":"f5c44ca2-b98b-4ae3-820e-043af0c9fcc2","html_url":"https://github.com/homielab/react-native-auto-scroll","commit_stats":{"total_commits":13,"total_committers":5,"mean_commits":2.6,"dds":0.6923076923076923,"last_synced_commit":"806a02eb87b1e43a5189141c9de64e00ee1cb188"},"previous_names":["minhtc/react-native-auto-scrolling"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/homielab%2Freact-native-auto-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/homielab%2Freact-native-auto-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/homielab%2Freact-native-auto-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/homielab%2Freact-native-auto-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/homielab","download_url":"https://codeload.github.com/homielab/react-native-auto-scroll/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256115,"owners_count":20909240,"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":["auto-scroll","auto-scrolling","marquee","react","react-native"],"created_at":"2024-09-24T13:42:49.410Z","updated_at":"2025-04-04T22:08:28.253Z","avatar_url":"https://github.com/homielab.png","language":"TypeScript","funding_links":["https://ko-fi.com/homielab"],"categories":[],"sub_categories":[],"readme":"# @homielab/react-native-auto-scroll\n\n[![npm version](https://badge.fury.io/js/@homielab%2Freact-native-auto-scroll.svg)](https://badge.fury.io/js/@homielab%2Freact-native-auto-scroll) [![CircleCI](https://circleci.com/gh/homielab/react-native-auto-scroll/tree/main.svg?style=svg)](https://circleci.com/gh/homielab/react-native-auto-scroll/tree/main) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/homielab/react-native-auto-scroll/graphs/contributors)\n\nAuto horizontal scroll. You only need to wrap the component between `\u003cAutoScroll\u003e`, it is the same as the `\u003cmarquee\u003e` tag in HTML.\n\nThere are many solutions, but I prefer this one for the best performance. The animations are using `useNativeDriver`, so they will be sent to native and performed on the UI thread instead of the JS thread.\n\n## Installation\n\n    npm install --save @homielab/react-native-auto-scroll\n\n_or_\n\n    yarn add @homielab/react-native-auto-scroll\n\n## Properties\n\n| Prop                  | Description                                         | Default |\n| --------------------- | --------------------------------------------------- | ------- |\n| **`style`**           | `View` style                                        | \\_      |\n| **`endPaddingWidth`** | The padding width to next round                     | 100     |\n| **`duration`**        | Time to finish a round (ms).                        | \\_      |\n| **`delay`**           | Delay time before start auto scroll animation (ms). | 1000    |\n| **`isLTR`**           | Is Left to Right?                                   | false   |\n\n## Example:\n\n![Auto Scroll Example](https://github.com/homielab/react-native-auto-scroll/raw/main/screenshots/auto-scrolling.gif \"Auto Scroll Example\")\n\nExpo: https://snack.expo.io/@minhtc/react-native-auto-scrolling-demo\n\nExample: https://github.com/homielab/react-native-auto-scroll/tree/main/Example\n\nSource:\n\n```js\nimport * as React from \"react\";\nimport { Text, View, Image, StyleSheet } from \"react-native\";\nimport AutoScroll from \"@homielab/react-native-auto-scroll\";\n\nexport default class App extends React.Component {\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cAutoScroll style={styles.scrolling1}\u003e\n          \u003cImage\n            style={styles.image}\n            delay={0}\n            duration={6000}\n            source={require(\"./assets/merry-christmas-png.png\")}\n          /\u003e\n        \u003c/AutoScroll\u003e\n        \u003cAutoScroll style={styles.scrolling2} endPadding={50}\u003e\n          \u003cText style={styles.welcome}\u003eMERRY CHRISTMAS AND HAPPY NEW YEAR\u003c/Text\u003e\n        \u003c/AutoScroll\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    backgroundColor: \"#F5FCFF\",\n  },\n  image: {\n    width: 200,\n    height: 200,\n  },\n  scrolling1: {\n    width: 400,\n    padding: 10,\n    marginBottom: 10,\n  },\n  scrolling2: {\n    backgroundColor: \"red\",\n    width: 400,\n    padding: 10,\n    marginBottom: 10,\n  },\n  welcome: {\n    color: \"white\",\n    fontSize: 20,\n    fontWeight: \"bold\",\n    textAlign: \"center\",\n    margin: 10,\n  },\n});\n```\n\n## Question?\n\nYou are welcome to create new issue 👍🏻\n\nhttps://github.com/homielab/react-native-auto-scroll/issues\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhomielab%2Freact-native-auto-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhomielab%2Freact-native-auto-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhomielab%2Freact-native-auto-scroll/lists"}