{"id":17091173,"url":"https://github.com/testshallpass/react-native-thumbnail-selector","last_synced_at":"2026-01-29T02:03:48.427Z","repository":{"id":21879546,"uuid":"88266768","full_name":"testshallpass/react-native-thumbnail-selector","owner":"testshallpass","description":"A thumbnail selector to select items in a horizontal list.","archived":false,"fork":false,"pushed_at":"2025-01-21T22:33:10.000Z","size":31675,"stargazers_count":12,"open_issues_count":6,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-26T16:38:54.353Z","etag":null,"topics":["flatlist","selector","thumbnail"],"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/testshallpass.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":"2017-04-14T12:42:37.000Z","updated_at":"2024-12-08T02:00:08.000Z","dependencies_parsed_at":"2024-06-19T22:46:36.108Z","dependency_job_id":"b4df548d-cfbb-4505-8e2f-cd307ad3819d","html_url":"https://github.com/testshallpass/react-native-thumbnail-selector","commit_stats":{"total_commits":95,"total_committers":3,"mean_commits":"31.666666666666668","dds":0.5263157894736843,"last_synced_commit":"a4ec6e5560ec8ea8e7d976217d367c3174fa30be"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testshallpass%2Freact-native-thumbnail-selector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testshallpass%2Freact-native-thumbnail-selector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testshallpass%2Freact-native-thumbnail-selector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testshallpass%2Freact-native-thumbnail-selector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/testshallpass","download_url":"https://codeload.github.com/testshallpass/react-native-thumbnail-selector/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248596963,"owners_count":21130794,"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":["flatlist","selector","thumbnail"],"created_at":"2024-10-14T13:57:53.658Z","updated_at":"2026-01-29T02:03:48.422Z","avatar_url":"https://github.com/testshallpass.png","language":"TypeScript","readme":"# react-native-thumbnail-selector\n\n[![Platform](https://img.shields.io/badge/-react--native-grey?style=for-the-badge\u0026logo=react)](https://github.com/facebook/react-native)\n[![npm](https://img.shields.io/npm/v/react-native-thumbnail-selector?style=for-the-badge\u0026logo=npm)](https://www.npmjs.com/package/react-native-thumbnail-selector)\n[![npm](https://img.shields.io/npm/dm/react-native-thumbnail-selector?style=for-the-badge\u0026logo=npm)](https://www.npmjs.com/package/react-native-thumbnail-selector)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge)](https://raw.github.com/testshallpass/react-native-thumbnail-selector/master/LICENSE)\n[![CI](https://github.com/testshallpass/react-native-thumbnail-selector/actions/workflows/ci.yml/badge.svg)](https://github.com/testshallpass/react-native-thumbnail-selector/actions/workflows/ci.yml)\n\n## Table of contents\n\n- [Installation](#installation)\n- [Support](#support)\n- [Demo](#demo)\n- [Usage](#usage)\n- [Props](/ThumbnailSelector.tsx)\n\n## Installation\n\n|      |                                                      |\n| :--: | ---------------------------------------------------- |\n| yarn | `yarn add react-native-thumbnail-selector`           |\n| npm  | `npm install react-native-thumbnail-selector --save` |\n\n## Support\n\n| react version | react-native version | package version | reason                                         |\n| :-----------: | :------------------: | :-------------: | ---------------------------------------------- |\n|    v16.8.0    |       v0.61.0        |     \u003e=3.0.0     | React hooks and usage of `useWindowDimensions` |\n\n## Demo\n\n![screenshot](./assets/demo.gif)\n\n## Usage\n\n```tsx\nimport React from 'react';\nimport { Button } from 'react-native';\n\n// Step 1: Import ThumbnailSelector.\nimport ThumbnailSelector from 'react-native-thumbnail-selector';\n\n// Step 2: Define one or more thumbnails like below.\nconst Thumbnails = [\n  {\n    caption: 'Caption 1',\n    imageSrc: { uri: 'https://reactnative.dev/img/pwa/manifest-icon-512.png' },\n  },\n  {\n    caption: 'Caption 2',\n    imageSrc: { uri: 'https://prettier.io/icon.png' },\n  },\n];\n\nexport default function App(): React.JSX.Element {\n  // Step 3: Define the ref variable to hold toggle action.\n  const toggleRef = React.useRef(() =\u003e {});\n\n  return (\n    \u003c\u003e\n      {/* Step 4: Depending on your use case, use toggleRef to open and close the ThumbnailSelector. */}\n      \u003cButton title={'Toggle'} onPress={() =\u003e toggleRef.current()} /\u003e\n      {/* Step 5: Add ThumbnailSelector at last position in document tree so it overlaps other components. */}\n      {/* Step 6: Define the thumbnails and toggle props like below. */}\n      \u003cThumbnailSelector\n        thumbnails={Thumbnails}\n        toggle={func =\u003e (toggleRef.current = func)}\n      /\u003e\n    \u003c/\u003e\n  );\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftestshallpass%2Freact-native-thumbnail-selector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftestshallpass%2Freact-native-thumbnail-selector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftestshallpass%2Freact-native-thumbnail-selector/lists"}