react-native-expanding-collection-view

About

Our company provides custom UI design and development solutions for mobile applications and websites.

Need a team to create a project?

This project is developed and maintained by openGeeksLab LLC.

react-native-expanding-collection-view

Requirements

• React Native 0.50+
• iOS 9.0+
• Android 4.2+

Installation

Just run:

• npm i react-native-expanding-collection-view

Basic usage

For the work with the library you have to use the next parameters:
data - is the array of objects that contains the information required to display on the card.

renderFrontCard - is the function that renders the front card. It should return the component that is used as a card and can get the parameters of itemData and animation. itemData - is the data for this card. animation - is the animation for the card.

import AnimatedBackground from './backgroundImage';
  ...
renderFrontCard = (itemData, animation) => (
  <AnimatedBackground
    source={ itemData.img }
    imageStyle={styles.backgroundImage}
    style={{
     height: animation.interpolate({
       inputRange: treshholds,
       outputRange: [0, 1, 1],
     }),
     borderRadius: animation.interpolate({
       inputRange: treshholds,
       outputRange: [0, values.borderRadius, values.borderRadius],
     }),
    }}
  />
)

renderBackCard - is the function that renders the back card. It should return the component that is used as a card or as the opened screen and can get the parameters of itemData and animation.

renderDescription - is the function that renders the description at the bottom of the front card and can get the parameters of itemData and animation. It should return a component that is used as a description and can get the parameters of data and animation.

inactiveSlideOpacity - is the transparency of the inactive card (from 0 to 1)
frontCardColor - is the color of the background of the front card.
backCardColor - is the color of the background of the back card.

  import ExpandingCollection from 'react-native-expanding-collection-view';

  ...

  <ExpandingCollection
    data={cities}
    cardBorder={30}
    frontCardColor={'transparent'}
    renderFrontCard={this.renderFrontCard}
    renderBackCard={this.renderBackCard}
    renderDescription={this.renderDescription}
  />

Contact us if interested.

Licence

Expanding is released under the MIT license.