https://github.com/capdilla/react-native-galery-carousel

Galery carousel for react native
https://github.com/capdilla/react-native-galery-carousel

carousel carousel-plugin image image-viewer react-native react-native-carousel

Last synced: about 2 months ago
JSON representation

Galery carousel for react native

• Host: GitHub
• URL: https://github.com/capdilla/react-native-galery-carousel
• Owner: capdilla
• Created: 2017-04-05T21:38:30.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-05-28T23:10:09.000Z (over 7 years ago)
• Last Synced: 2024-10-08T09:08:12.432Z (3 months ago)
• Topics: carousel, carousel-plugin, image, image-viewer, react-native, react-native-carousel
• Language: JavaScript
• Size: 3.91 KB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-native-galery-carousel

Galery carousel for react native

## Demo

![react-native-galery-carousel](https://media.giphy.com/media/3oKIPuWr6Mp7bOtYVG/giphy.gif)

![react-native-galery-carousel](https://media.giphy.com/media/3oKIPj1guAZsLVqQfK/giphy.gif)

## Usage

```

$ npm install --save react-native-galery-carousel

```

```javascript

const imagesDemo = [

    {

        path: '/UYiroysl.jpg'

    },

    {  

        path: '/UPrs1EWl.jpg'

    },

    {    

        path: '/MABUbpDl.jpg'

    },

    {    

        path: '/KZsmUi2l.jpg'

    },

    {    

        path: '/2nCt3Sbl.jpg'

    },

    {    

        path: '/lceHsT6l.jpg'

    }

];

import GaleryCarousel from 'react-native-galery-carousel';

    render () {

      

        {console.log(key,element)}}

          mainImageComponents={

            

              Hello

            

          }

        />

      

    }

```

## Props

Prop | Description | Type | Default

------ | ------ | ------ | ------

**dataImage** | the array of the image to show in the carousel | array | `[]`

**getImageFrom** | the key of the array where you wanna get the image | string | `"path"`

**joinFirst** | if you wanna join a link before **example** https://my-host-name.com/ `path` | string | `""`

**joinLast** | if you wanna join string after **example** `path`/key="1255665" | string | `""`

**defaultImageIndex** | index of the first image to show | Number | `1`

**mainImageComponents** | if you wanna render a component in the Main image | Component | ``

**mainHeight** | size of the galery carousel | Number | `280`

**onLongPress** | each item of the carousel | function | `function`

## TODO

- [x] Implement 'onLongPress' in the scrollView images