/react-native-expanding-collection

Primary LanguageJavaScriptMIT LicenseMIT

React Native Expanding Collection

Installation

npm install --save @ramotion/react-native-expanding-collection

Usage

Look it in folder ./example

import React, { Component } from 'react';
import ExpandingCollection from '@ramotion/react-native-expanding-collection';

class Example extends Component {
    items = [
      {
        id: '654831654',
        name: 'New York',
        img: 'https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg',
        blob: 'New York is a beautiful',
        rating: 4,
        reviews: [
          {
            userName: 'Ebbe Ugwu',
            userAvatar: 'https://randomuser.me/api/portraits/men/83.jpg',
            review: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis...',
            date: 'FEB 14th',
          }, {
            userName: 'Jakob Merquier',
            userAvatar: 'https://randomuser.me/api/portraits/men/46.jpg',
            review: ' aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
            date: 'JUL 8th'
          },
        ],
        coordinates: [40.785091, 'North', -73.968285, 'West']
      },
      {
       id: '32164893',
        name: 'London',
        img: 'https://i.ytimg.com/vi/7BymziTFM2E/maxresdefault.jpg',
        blob: 'The buzzing heart of Great Britain',
        rating: 5,
        reviews: [
          {
            userName: 'Monique Shultz',
            userAvatar: 'https://randomuser.me/api/portraits/women/6.jpg',
            review: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis...',
            date: 'APR 15th'
          }
        ],
        coordinates: [51.509865, 'North', -0.118092, 'West']
      }
    ];
    
    render() {
    	return (
        <ExpandingCollection
          data={this.items}
        />
      );
    }
}

Props

Name Description Type Required Default Value
data Information about cards Array +
frontCardColor Color for front card String '#fffeff'
backCardColor Color for back card String '#fffeff'
paginationColor Color for pagination card String '#cbd2db'
cardBorder Card border prop Number 8
cardPadding Card padding prop Number 4
renderFrontCard Render front card Component
renderBackCard Render back card Component
headerCloseIconUrl Close icon Url for header String 'https://www.materialui.co/materialIcons/navigation/close_black_2048x2048.png'
headerDefaultIconUrl Default icon Url for header String 'https://cdn2.iconfinder.com/data/icons/lightly-icons/30/crosshairs-480.png'

Licence

Expanding is released under the MIT license. See LICENSE for details.

Get the Showroom App for iOS to give it a try

Try this UI component and more like this in our mobile app. Contact us if interested.



Follow us for the latest updates