https://github.com/testshallpass/react-native-thumbnail-selector

A thumbnail selector to select items in a horizontal list.
https://github.com/testshallpass/react-native-thumbnail-selector

flatlist selector thumbnail

Last synced: 3 months ago
JSON representation

A thumbnail selector to select items in a horizontal list.

• Host: GitHub
• URL: https://github.com/testshallpass/react-native-thumbnail-selector
• Owner: testshallpass
• License: mit
• Created: 2017-04-14T12:42:37.000Z (about 8 years ago)
• Default Branch: main
• Last Pushed: 2025-01-21T22:33:10.000Z (6 months ago)
• Last Synced: 2025-03-26T16:38:54.353Z (4 months ago)
• Topics: flatlist, selector, thumbnail
• Language: TypeScript
• Homepage:
• Size: 30.2 MB
• Stars: 12
• Watchers: 2
• Forks: 4
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-thumbnail-selector

[![Platform](https://img.shields.io/badge/-react--native-grey?style=for-the-badge&logo=react)](https://github.com/facebook/react-native)

[![npm](https://img.shields.io/npm/v/react-native-thumbnail-selector?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/react-native-thumbnail-selector)

[![npm](https://img.shields.io/npm/dm/react-native-thumbnail-selector?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/react-native-thumbnail-selector)

[![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)

[![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)

## Table of contents

- [Installation](#installation)

- [Support](#support)

- [Demo](#demo)

- [Usage](#usage)

- [Props](/ThumbnailSelector.tsx)

## Installation

|      |                                                      |

| :--: | ---------------------------------------------------- |

| yarn | `yarn add react-native-thumbnail-selector`           |

| npm  | `npm install react-native-thumbnail-selector --save` |

## Support

| react version | react-native version | package version | reason                                         |

| :-----------: | :------------------: | :-------------: | ---------------------------------------------- |

|    v16.8.0    |       v0.61.0        |     >=3.0.0     | React hooks and usage of `useWindowDimensions` |

## Demo

![screenshot](./assets/demo.gif)

## Usage

```javascript

import React from 'react';

import {Animated} from 'react-native';

import ThumbnailSelector from 'react-native-thumbnail-selector';

const thumbnails = [

  {

    caption: 'react-native',

    imageSrc: {uri: 'https://reactnative.dev/img/pwa/manifest-icon-512.png'},

  },

  {

    caption: 'Dolore do magna ullamco nisi quis.',

    imageSrc: {uri: 'https://reactnative.dev/img/pwa/manifest-icon-512.png'},

  },

];

function Example() {

  // use toggle to show and hide ThumbnailSelector

  let toggle = () => new Promise(res => res);

  return (

     (toggle = func)}

    />

  );

}

export default Example;

```