Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gorhom/react-native-sticky-item
An interactive sticky item inspired by Facebook Stories.
https://github.com/gorhom/react-native-sticky-item
facebook-stories react-native sticky-element sticky-item
Last synced: 4 days ago
JSON representation
An interactive sticky item inspired by Facebook Stories.
- Host: GitHub
- URL: https://github.com/gorhom/react-native-sticky-item
- Owner: gorhom
- License: mit
- Created: 2020-05-02T13:12:38.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-03-03T18:01:46.000Z (almost 3 years ago)
- Last Synced: 2024-12-29T16:05:58.404Z (11 days ago)
- Topics: facebook-stories, react-native, sticky-element, sticky-item
- Language: TypeScript
- Homepage:
- Size: 1.49 MB
- Stars: 917
- Watchers: 8
- Forks: 49
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Sticky Item
[](https://www.npmjs.com/package/@gorhom/sticky-item) [](https://www.npmjs.com/package/@gorhom/sticky-item) [](https://www.npmjs.com/package/@gorhom/sticky-item)
An interactive sticky item inspired by Facebook Stories.
---
## Installation
```sh
yarn add @gorhom/sticky-item
# or
npm install @gorhom/sticky-item
```
> Also, you need to install [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated), [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) & [react-native-svg](https://github.com/react-native-community/react-native-svg), and follow theirs installation instructions.
## Usage
```tsx
...
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
}
const App = () => {
// methods
const handleStickyItemPress = () => Alert.alert('Sticky Item Pressed');
// render
const renderItem = ({ item, index}) => (
)
return (
)
}
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`](./src/types.ts#L30) | |
| `isRTL` | FlatList' layout direction. | NO | boolean | false |
| `onStickyItemPress` | Callback when sticky item gets pressed. | NO | function | |
| `...FlatList Props` | React Native FlatList props. | NO | [`FlatList`](https://reactnative.dev/docs/flatlist) | |
## To Do
- [ ] Write a detailed step-by-step instruction to create sticky interactive animation.
- [ ] Add more examples.
- [ ] Add vertical support ?.
## Author
- [Mo Gorhom](https://twitter.com/gorhom)
## Sponsor & Support
To keep this library maintained and up-to-date please consider [sponsoring it on GitHub](https://github.com/sponsors/gorhom). Or if you are looking for a private support or help in customizing the experience, then reach out to me on Twitter [@gorhom](https://twitter.com/gorhom).
## License
MIT
Built With ❤️
- [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated)
- [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler)
- [react-native-redash](https://github.com/wcandillon/react-native-redash)
- [react-native-svg](https://github.com/react-native-community/react-native-svg)
- [@react-native-community/bob](https://github.com/react-native-community/bob)
---
