Skip to content

An interactive sticky item inspired by Facebook Stories.

License

Notifications You must be signed in to change notification settings

gorhom/react-native-sticky-item

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Sticky Item

npm npm npm

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

Author

Sponsor & Support

To keep this library maintained and up-to-date please consider sponsoring it on GitHub. Or if you are looking for a private support or help in customizing the experience, then reach out to me on Twitter @gorhom.

License

MIT

Built With ❤️


Mo Gorhom