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 ?.

• react-native-reanimated
• react-native-gesture-handler
• react-native-redash
• react-native-svg
• @react-native-community/bob

Author

• Mo Gorhom

License

MIT

Liked the library? 😇