Git Product home page Git Product logo

react-native-expanding-collection's Introduction

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

react-native-expanding-collection's People

Contributors

alexmik89 avatar juriv avatar opengeekslab avatar ramotiondev avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.