An interactive sticky item inspired by Facebook Stories

Sticky Item

An interactive sticky item inspired by Facebook Stories.

Installation

yarn add @gorhom/sticky-item
# or
npm install @gorhom/sticky-item

Also, you need to install react-native-reanimated, react-native-gesture-handler & react-native-svg, and follow theirs installation instructions.

Usage

...
import StickyItemFlatList from '@gorhom/sticky-item';

// dummy data
const data = [...Array(20)]
  .fill(0)
  .map((_, index) => ({ id: `item-${index}` }));

// configs
const ITEM_WIDTH = 90;
const ITEM_HEIGHT = 150;
const STICKY_ITEM_WIDTH = 24;
const STICKY_ITEM_HEIGHT = 24;
const STICKY_ITEM_BACKGROUNDS = ['#222', '#000'];
const SEPARATOR_SIZE = 8;
const BORDER_RADIUS = 10;

const StickyItemView = ({
  x,
  threshold,
  itemWidth,
  itemHeight,
  stickyItemWidth,
  stickyItemHeight,
  separatorSize,
  isRTL,
}) => {

  const amazingAnimation = {
    // here you add your custom interactive animation
    // based on the animated value `x`
  }

  return <Animated.View style={amazingAnimation} />
}

const App = () => {
  // methods
  const handleStickyItemPress = () => Alert.alert('Sticky Item Pressed');

  // render
  const renderItem = ({ item, index}) => (
    <View
      key={`item-${index}`}
      style={{
        backgroundColor: 'red',
        width: ITEM_WIDTH,
        height: ITEM_HEIGHT,
      }}
    />
  )
  return (
    <StickyItemFlatList
      itemWidth={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}
    />
  )
}

export default App

Props

name description required type default
itemWidth Item's width. YES number
itemHeight Item's height. YES number
separatorSize FlatList's separator width, * if you provide ItemSeparatorComponent, you will need to set separatorSize. NO* number 10
borderRadius Item & sticky border radius. NO number 15
stickyItemActiveOpacity Sticky item's active opacity. YES number 0.25
stickyItemWidth Sticky item's width. YES number
stickyItemHeight Sticky item's height. YES number
stickyItemBackgroundColors Sticky item's two background colors, one when sticky item is extended another when it's minimize. YES string[]
stickyItemContent Sticky item's content component. YES ReactNode
isRTL FlatList' layout direction. NO boolean false
onStickyItemPress Callback when sticky item gets pressed. NO function
...FlatList Props React Native FlatList props. NO FlatList

To Do

  • [ ] Write a detailed step-by-step instruction to create sticky interactive animation.
  • [ ] Add more examples.
  • [ ] Add vertical support ?.

GitHub