react-native-expanding-collection-view
v1.0.0
Published
React Native component for creating animated, expanding collection
Downloads
3
Maintainers
Readme
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.