An interactive sticky item inspired by Facebook Stories.

Installation

yarn add @gorhom/sticky-item# ornpm install @gorhom/sticky-item

Usage

...importStickyItemFlatListfrom'@gorhom/sticky-item';// dummy dataconstdata=[...Array(20)].fill(0).map((_,index)=>({id:`item-${index}`}));// configsconstITEM_WIDTH=90;constITEM_HEIGHT=150;constSTICKY_ITEM_WIDTH=24;constSTICKY_ITEM_HEIGHT=24;constSTICKY_ITEM_BACKGROUNDS=['#222','#000'];constSEPARATOR_SIZE=8;constBORDER_RADIUS=10;constStickyItemView=({  x,  threshold,  itemWidth,  itemHeight,  stickyItemWidth,  stickyItemHeight,  separatorSize,  isRTL,})=>{constamazingAnimation={// here you add your custom interactive animation// based on the animated value `x`}return<Animated.Viewstyle={amazingAnimation}/>}constApp=()=>{// methodsconsthandleStickyItemPress=()=>Alert.alert('Sticky Item Pressed');// renderconstrenderItem=({ item, index})=>(<Viewkey={`item-${index}`}style={{backgroundColor:'red',width:ITEM_WIDTH,height:ITEM_HEIGHT,}}/>)return(<StickyItemFlatListitemWidth={ITEM_WIDTH}itemHeight={ITEM_HEIGHT}separatorSize={SEPARATOR_SIZE}borderRadius={BORDER_RADIUS}stickyItemWidth={STICKY_ITEM_WIDTH}stickyItemHeight={STICKY_ITEM_HEIGHT}stickyItemBackgroundColors={STICKY_ITEM_BACKGROUNDS}stickyItemContent={StickyItemView}onStickyItemPress={handleStickyItemPress}data={data}renderItem={renderItem}/>)}exportdefaultApp

Props

To Do

Author

Sponsor & Support

License

Built With ❤️