react-native-thumbnail-selector

Table of contents

• Installation
• Support
• Demo
• Usage
• Props

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

Usage

import React from 'react';
import { Button } from 'react-native';

// Step 1: Import ThumbnailSelector.
import ThumbnailSelector from 'react-native-thumbnail-selector';

// Step 2: Define one or more thumbnails like below.
const Thumbnails = [
  {
    caption: 'Caption 1',
    imageSrc: { uri: 'https://reactnative.dev/img/pwa/manifest-icon-512.png' },
  },
  {
    caption: 'Caption 2',
    imageSrc: { uri: 'https://prettier.io/icon.png' },
  },
];

export default function App(): React.JSX.Element {
  // Step 3: Define the ref variable to hold toggle action.
  const toggleRef = React.useRef(() => {});

  return (
    <>
      {/* Step 4: Depending on your use case, use toggleRef to open and close the ThumbnailSelector. */}
      <Button title={'Toggle'} onPress={() => toggleRef.current()} />
      {/* Step 5: Add ThumbnailSelector at last position in document tree so it overlaps other components. */}
      {/* Step 6: Define the thumbnails and toggle props like below. */}
      <ThumbnailSelector
        thumbnails={Thumbnails}
        toggle={func => (toggleRef.current = func)}
      />
    </>
  );
}