{"id":21658760,"url":"https://github.com/deanhet/react-native-text-ticker","last_synced_at":"2025-07-17T21:31:35.081Z","repository":{"id":30248659,"uuid":"124213792","full_name":"deanhet/react-native-text-ticker","owner":"deanhet","description":"React Native Text Ticker/Marquee Component","archived":false,"fork":false,"pushed_at":"2022-12-07T20:04:25.000Z","size":4336,"stargazers_count":453,"open_issues_count":16,"forks_count":75,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-07T01:45:56.462Z","etag":null,"topics":["android","ios","marquee","react-native","scroll","scroller","text","ticker"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/deanhet.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-03-07T09:43:38.000Z","updated_at":"2024-10-24T22:14:33.000Z","dependencies_parsed_at":"2023-01-14T16:45:32.616Z","dependency_job_id":null,"html_url":"https://github.com/deanhet/react-native-text-ticker","commit_stats":null,"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deanhet%2Freact-native-text-ticker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deanhet%2Freact-native-text-ticker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deanhet%2Freact-native-text-ticker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deanhet%2Freact-native-text-ticker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deanhet","download_url":"https://codeload.github.com/deanhet/react-native-text-ticker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226304998,"owners_count":17603724,"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":["android","ios","marquee","react-native","scroll","scroller","text","ticker"],"created_at":"2024-11-25T09:29:48.173Z","updated_at":"2024-11-25T09:30:05.904Z","avatar_url":"https://github.com/deanhet.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-native-text-ticker\n\n\n## Screenshot\n![examples](https://raw.githubusercontent.com/deanhet/react-native-text-ticker/master/example/media/example.gif)\n\n![examples](./example/media/example2.gif)\n\n## Description\nInspired from the great [react-native-marquee](https://github.com/kyo504/react-native-marquee), this module acts similarly but with a few extra features and props:\n\n- Don't scroll the text if it fits in the container\n- Infinitely scroll text in a ticker fashion\n- Bounce text from side to side if it's only slightly wider than its container\n- Grab the text and scroll it manually\n\nTo see it in action check out the example!\n\nThis package aims to only support the latest version of React-Native.\n\n## Installation\n```\nnpm install --save react-native-text-ticker\nor\nyarn add react-native-text-ticker\n```\n\n## Usage\nThis module can be used as a drop in replacement for the react-native `Text` component (extra props optional).\n\n```\nimport React, { PureComponent } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport TextTicker from 'react-native-text-ticker'\n\nexport default class Example extends PureComponent {\n  render(){\n    return(\n      \u003cView style={styles.container}\u003e\n        \u003cTextTicker\n          style={{ fontSize: 24 }}\n          duration={3000}\n          loop\n          bounce\n          repeatSpacer={50}\n          marqueeDelay={1000}\n        \u003e\n          Super long piece of text is long. The quick brown fox jumps over the lazy dog.\n        \u003c/TextTicker\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  },\n});\n\n```\n\nreact-native-text-ticker supports a single child text string, any other use may give unexpected behaviour.\n\n\n## Properties\n| Prop            | Type      | Optional | Default  | Description\n|-----------------|-----------|----------|----------|-------------\n| style           | StyleObj  | true     | -        | Text Style\n| duration        | number    | true     | `150ms` * length of string | Number of milliseconds until animation finishes\n| bounceSpeed     | number    | true     |  50      | Describes how fast the bounce animation moves. Effective when duration is not set.\n| scrollSpeed     | number    | true     |  150     | Describes how fast the scroll animation moves. Effective when duration is not set.\n| animationType   | string    | true     | 'auto'   | one of the values from 'auto', 'scroll', 'bounce'\n| loop            | boolean   | true     |  true    | Infinitely scroll the text, effective when animationType is 'auto'\n| bounce          | boolean   | true     |  true    | If text is only slightly longer than its container then bounce back/forwards instead of full scroll, effective when animationType is 'auto'\n| scroll          | boolean   | true     |  true    | Gives the ability to grab the text and scroll for the user to read themselves. Will start scrolling again after `marqueeDelay` or `3000ms`\n| marqueeOnMount  | boolean   | true     |  true    | Will start scroll as soon as component has mounted. Disable if using methods instead.\n| marqueeDelay    | number    | true     |  0       | Number of milliseconds to wait before starting marquee\n| onMarqueeComplete | function | true    |  -       | This function will run after the text has completely passed across the screen. Will run repeatedly if `loop` is enabled.\n| onScrollStart   | function  | true     |  -       | This function will run if the text is long enough to trigger the scroll.\n| isInteraction   | boolean   | true     | true     | Whether or not animations create an interaction handle on the `InteractionManager`. Disable if you are having issues with VirtualizedLists not rendering properly.\n| useNativeDriver | boolean   | true     | true     | Use native animation driver, should remain true for large majority of use-cases\n| repeatSpacer    | number    | true     | 50       | The space between the end of your text string ticker and the beginning of it starting again.  \n| bouncePadding    | `{ left: number, right: number }`    | true     | -       | The padding on start/end positions of bounce.  \n| bounceDelay    | number  | true     | 0    | How long the animation should wait after each bounce before starting again.   \n| easing          | function  | true     | Easing.ease | How the text scrolling animates. Additional options available from the [Easing module](https://facebook.github.io/react-native/docs/easing.html)\n| shouldAnimateTreshold | number | true  | 0        | If you have a view drawn over the text at the right (a fade-out gradient for instance) this should be set to the width of the overlaying view: ![examples](./example/media/example2.gif)\n| disabled        | boolean   | true     | false    | Disables text animation\n| isRTL        | boolean   | true     | false    | If text is right to left (By default, it uses `I18nManager.isRTL` to check)\n\n## Methods\nThese methods are optional and can be accessed by accessing the ref:\n\n| Prop           | Params    | Description\n|----------------|-----------|------------\n| startAnimation | delay     | Start animation\n| stopAnimation  | -         | Stop animation\n\n\n## License\n[MIT License](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeanhet%2Freact-native-text-ticker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeanhet%2Freact-native-text-ticker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeanhet%2Freact-native-text-ticker/lists"}