{"id":40180564,"url":"https://github.com/islandryu/react-native-gif-controller-view","last_synced_at":"2026-01-19T18:34:46.144Z","repository":{"id":189465746,"uuid":"680741812","full_name":"islandryu/react-native-gif-controller-view","owner":"islandryu","description":null,"archived":false,"fork":false,"pushed_at":"2023-09-13T12:39:07.000Z","size":432,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-30T09:49:05.018Z","etag":null,"topics":["gif","react-native"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","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/islandryu.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":"2023-08-20T08:47:54.000Z","updated_at":"2023-12-28T06:28:40.000Z","dependencies_parsed_at":"2024-11-16T13:09:58.372Z","dependency_job_id":"6330a957-a95d-4f5f-bbc1-ef25464adad9","html_url":"https://github.com/islandryu/react-native-gif-controller-view","commit_stats":null,"previous_names":["islandryu/react-native-gif-controller-view"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/islandryu/react-native-gif-controller-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/islandryu%2Freact-native-gif-controller-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/islandryu%2Freact-native-gif-controller-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/islandryu%2Freact-native-gif-controller-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/islandryu%2Freact-native-gif-controller-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/islandryu","download_url":"https://codeload.github.com/islandryu/react-native-gif-controller-view/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/islandryu%2Freact-native-gif-controller-view/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28580363,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T18:29:59.827Z","status":"ssl_error","status_checked_at":"2026-01-19T18:29:40.878Z","response_time":67,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["gif","react-native"],"created_at":"2026-01-19T18:34:45.296Z","updated_at":"2026-01-19T18:34:46.135Z","avatar_url":"https://github.com/islandryu.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-gif-controller-view\n\nhttps://github.com/islandryu/react-native-gif-controller-view/assets/65934663/ca939c3d-8404-442d-b205-bd7b910208f7\n\n## Overview\n\n`GifControllerView` is a component designed for advanced control and manipulation of GIF images in React Native applications. This component offers properties to modify GIF presentation styles, animation controls, and color mappings. Moreover, using the reference methods (`GifControllerViewRef`), developers can fetch detailed color statistics and frame-specific data for any GIF.\n\n## Installation\n\nMake sure you've already set up React Native in your project. Then, install the `GifControllerView` component:\n\n```bash\nnpm install react-native-gif-controller-view\n```\n\n## Usage\n\n### Props\n\n#### `source` (`ImageSourcePropType`)\n\nThe GIF image source.\n\n#### `style` (`StyleProp\u003cImageStyle\u003e`)\n\nStyles the `GifControllerView`. This prop accepts all standard React Native `ImageStyle` properties.\n\n#### `colorMappings` (Array of `{ from: string; to: string }`)\n\nAn array that defines the color transformation mappings. Each mapping transforms a color `from` a specified value `to` another value.\n\nExample:\n\n```jsx\ncolorMappings={[\n  { from: \"#FFFFFF\", to: \"#000000\" },\n  // This mapping transforms all white colors in the GIF to black.\n]}\n```\n\n#### `isAnimating` (`boolean`)\n\nControls the GIF's animation state. If `true`, the GIF animates. If `false`, it pauses.\n\n#### `isReverse` (`boolean`)\n\nIf set to `true`, the GIF animates in reverse. If `false`, it animates normally.\n\n#### `speed` (`number`)\n\nDetermines the GIF's playback speed. A value of `1` is the default speed, `2` would be twice as fast, and so on.\n\n#### `disableLoop` (`boolean`)\n\nControls whether the GIF animation should loop or not. If set to `true`, the GIF will play only once and stop at the last frame. If `false`, the GIF will loop continuously.\n\n### Ref Methods\n\nUsing React's `ref`, you can access the following methods:\n\n#### `getAllColorCount(index: number)`\n\nReturns a promise that resolves to an array containing the count of all colors in a specified frame. Each entry in the array includes the `color` and its `count`.\n\nExample:\n\n```jsx\nconst ref = useRef();\n\n// ... Somewhere in your code:\nconst colorData = await ref.current?.getAllColorCount(0);\n```\n\n#### `seekTo(index: number)`\n\nNavigates to a specified frame index in the GIF.\n\nExample:\n\n```jsx\nconst ref = useRef();\n\n// ... Somewhere in your code:\nref.current?.seekTo(5); // Jumps to the 6th frame (0-indexed).\n```\n\n#### `getFrameData()`\n\nReturns a promise that resolves to an array containing data about each frame. Each entry in the array includes the `delayTime` (time delay before the next frame) and `frameIndex` (index of the frame).\n\nExample:\n\n```jsx\nconst ref = useRef();\n\n// ... Somewhere in your code:\nconst frameData = await ref.current?.getFrameData();\n```\n\n## Example\n\n```jsx\nimport GifControllerView from 'react-native-gif-controller-view';\n\n// In your render:\n\u003cGifControllerView\n  source={require('./path_to_your_gif.gif')}\n  style={{ width: 100, height: 100 }}\n  colorMappings={[{ from: '#FFFFFF', to: '#000000' }]}\n  isAnimating={true}\n  isReverse={false}\n  speed={1}\n  ref={yourRef}\n/\u003e;\n```\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fislandryu%2Freact-native-gif-controller-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fislandryu%2Freact-native-gif-controller-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fislandryu%2Freact-native-gif-controller-view/lists"}