expandablecard

A simple and animated expandable card for React Native.

Example

Installation

npm i expandablecard

Usage

import ExpandableCard from 'expandablecard';

<View style={{flex: 1}}>
            <ExpandableCard
                title='test card one'
                expanded>
                <View style={{ height: 200, width: 200, backgroundColor: 'red' }}>
                </View>
            </ExpandableCard>
            <ExpandableCard
                title='test card two'
                expanded={false}
                contentContainerStyle={{ alignItems: 'center' }}>
                <View>
                    <Image
                        style={{ height: 150, width: 200 }}
                        source={{ uri: 'https://cars.usnews.com/static/images/Auto/custom/14737/2022_Acura_ILX_1.jpg' }} />
                </View>
            </ExpandableCard>
            <ExpandableCard
                title='test card three'
                expanded>
                <View style={{ height: 300, width: 200, backgroundColor: 'orange' }}>
                </View>
            </ExpandableCard>
</View>

Documentation

Props

Name	Description	Default	Type
expanded	Whether to expand the card or not	true	Boolean
animationDuration	Duration of animation in milliseconds	300	Number
iconSize	size on indicator	24	Number
title	header title	''	String
activeOpacity	the opacity of header view when touch	0.8	Number
indicator	indicator component to render	null	component
headerStyle	style for header	null	ViewStyle
contentContainerStyle	style for content wrapper	null	ViewStyle
containerStyle	style for card Wrapper	null	ViewStyle
contentHeight	default height for body	0	Number

Author

Yasser Kassem