{"id":21506735,"url":"https://github.com/gupta-ji6/react-native-slack-catch-up","last_synced_at":"2025-07-16T01:33:40.101Z","repository":{"id":216623558,"uuid":"741819928","full_name":"gupta-ji6/react-native-slack-catch-up","owner":"gupta-ji6","description":"a prototype of upcoming catch up feature on slack, built with reanimated v3 \u0026 react-native-gesture-handler with typescript \u0026 react-native. 60fps smooth animations running on UI Thread.","archived":false,"fork":false,"pushed_at":"2024-01-15T04:38:01.000Z","size":77818,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-01-25T22:15:16.536Z","etag":null,"topics":["animations","expo","micro-inter","react-native","react-native-gesture-handler","react-native-reanim","reanim","reanimated3","tinder-swiper"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gupta-ji6.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2024-01-11T07:15:14.000Z","updated_at":"2024-01-18T12:34:44.000Z","dependencies_parsed_at":"2024-01-19T10:13:54.146Z","dependency_job_id":"a97f7a6e-bb5d-4d3a-a8d4-95bfcf88d459","html_url":"https://github.com/gupta-ji6/react-native-slack-catch-up","commit_stats":{"total_commits":15,"total_committers":2,"mean_commits":7.5,"dds":0.06666666666666665,"last_synced_commit":"2649cea3d41f91c328db51c0211bc093b4784c2d"},"previous_names":["gupta-ji6/react-native-slack-catch-up"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gupta-ji6%2Freact-native-slack-catch-up","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gupta-ji6%2Freact-native-slack-catch-up/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gupta-ji6%2Freact-native-slack-catch-up/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gupta-ji6%2Freact-native-slack-catch-up/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gupta-ji6","download_url":"https://codeload.github.com/gupta-ji6/react-native-slack-catch-up/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226090709,"owners_count":17572117,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animations","expo","micro-inter","react-native","react-native-gesture-handler","react-native-reanim","reanim","reanimated3","tinder-swiper"],"created_at":"2024-11-23T19:46:29.649Z","updated_at":"2024-11-23T19:46:30.263Z","avatar_url":"https://github.com/gupta-ji6.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-slack-catch-up\n\n\u003cp\u003e\n\n[![supports iOS](https://img.shields.io/badge/iOS-999999.svg?style=flat-square\u0026logo=APPLE\u0026labelColor=999999\u0026logoColor=fff)](https://github.com/expo/expo)\n[![supports Android](https://img.shields.io/badge/Android-A4C639.svg?style=flat-square\u0026logo=ANDROID\u0026labelColor=A4C639\u0026logoColor=fff)](https://github.com/expo/expo)\n[![supports web](https://img.shields.io/badge/Web-4285F4.svg?style=flat-square\u0026logo=GOOGLE-CHROME\u0026labelColor=4285F4\u0026logoColor=fff)](https://github.com/expo/expo)\n\u003c/p\u003e\n\nSlack's upcoming \"Catch Up\" tinder-like mobile app feature shared [here](https://x.com/metasidd/status/1745244070757216547?s=20), built in `react-native` \u0026 `typescript` with smooth ✨ **60fps** ✨ native reanimated \u0026 gesture-handler animations.\n\n## 📱 Demo\n\nhttps://github.com/gupta-ji6/react-native-slack-catch-up/assets/21218732/10592701-75c6-45e7-90a7-41424d1bd7b5\n\n## Features\n\n- [x] 👆 Swipe right to mark as read, or left to keep unread.\n- [x] ✔ Show different overlays on basis of swipe direction with animated opactiy depending on translation.\n- [x] 🫰 Snap back card if swipe velocity is less than the configurable threshold.\n- [x] ↔ Action buttons for swipe left \u0026 swipe right functionalities for accessibility \u0026 quick action.\n- [x] ↩️ Undo anytime, we all make mistakes.\n- [x] 🔢 Show number of threads left to catch up.\n- [x] 👀 Show a peek of next card, if existing.\n- [x] 🙌 The OG emoji \u0026 title of Slack at stack end.\n- [x] 🔁 Reset whole stack to start again.\n- [x] ✨ 60fps native animtions running on UI thread.\n- [x] 💪 TypeScript support.\n- [x] ⚛️ Reusbale React functional components with configurable props.\n- [x] ♻ Supports Android, iOS \u0026 Web platforms.\n\n## ✨ Micro Interactions \u0026 Animations\n\n### 1. ⬆ Stack Enter Animation\n\nThe card stack smoothly slides in down on render. The action buttons below \u0026 header animates in same manner to compilment the motion.\n\n![Stack Entry Animation](./assets/stack-entrance.gif)\n\n### 2. 👆 Top Card Touch Up \u0026 Touch Down Interaction\n\nThe top most card smoothly scales up \u0026 down on touch to make the user feel it's interactive.\n\n![Top Card Touch Up \u0026 Touch Down Interaction](./assets/top-card.gif)\n\n### 3. 👀 Next Card Peek\n\nIt's a design principle to always show a part of next item in a list, to give a hint to user that there's more to explore.\n\n![Next Card Peek](./assets/next-card.gif)\n\n### 4. 🫰 Snap Back To Center On Low Swipe Velocity\n\nThe card smoothly snaps back to it's position if the swipe velocity is less than a certain configurable threshold.\n\n![Snap Back To Center On Low Swipe Velocity](./assets/snap.gif)\n\n### 5. 👉👈 Animated Swipe Overlays\n\nWhen user swipes in either direction, an overlay of the action is shown with animated opacity. the next card also scales up simultaneously as swipes away top card.\n\n![Animated Swipe Overlays](./assets/overlay.gif)\n\n### 6. 🧃 Juicy Buttons\n\nButtons you wanna keep smashing because it feels like they're asking for it.\n\n![Juicy Buttons](./assets/button.gif)\n\n### 7. 🔍 Zoom-In Entrance Of Stack End\n\nWhen the stack ends, the end view enters with a smooth zoom-in animation \u0026 an action button slides in from the bottom.\n\n![Zoom-In Entrance Of Stack End](./assets/end.gif)\n\n## Components \u0026 API Reference\n\n### `\u003cThreadStack /\u003e`\n\n#### Usage\n\n```tsx\n    \u003cThreadStack\n        data={threads}\n        onSwipeLeft={(item) =\u003e {\n            console.warn('left, ', item);\n        }}\n        onSwipeRight={(item) =\u003e {\n            console.warn('right', item);\n        }}\n        allowSwipe\n        showActionButtons\n        stackEnd={{\n            emoji: '🙌',\n            heading: 'All Caught Up.',\n            showReset: true,\n        }}\n        header={{\n            visible: true,\n            showNumberOfThreadsLeft: true,\n            showUndoButton: true,\n            showResetIconButton: true,\n        }}\n    /\u003e\n```\n\n#### Properties\n\n| Name                | Description                                      | Default                                                                                                                          | Required |\n| ------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- | -------- |\n| `data`              | The array of data to be rendered in the stack    | []                                                                                                                               | Required |\n| `onSwipeLeft`       | Callback on swipe left action                    |                                                                                                                                  | Optional |\n| `onSwipeRight`      | Callback on swipe right action                   |                                                                                                                                  | Optional |\n| `allowSwipe`        | Whether to allow swipe gestures or not           | true                                                                                                                             | Optional |\n| `showActionButtons` | Whether to show the action buttons at the bottom | true                                                                                                                             | Optional |\n| `header`            | Configuration of header component                | ```{    visible :  true ,    showNumberOfThreadsLeft :  true ,    showUndoButton :  true ,    showResetIconButton :  true , }``` | Optional |\n| `stackEnd`          | Configuration for the stack end view             | ```{    emoji :   ' 🙌 ' ,    heading :   ' All Caught Up. ' ,    showReset :  true , }```                                        |\n\n\n## 🛠️ Built With\n\n\u003e [!NOTE]  \n\u003e The initial template was created with `npx create-react-native-app my-app -t with-reanimated`\n\n1. `react-native` - v72\n2. `react-native-reanimated` - v3\n3. `react-native-gesture-handler` - v2\n4. `expo` - v49\n\n## 👨🏻‍💻 Developement\n\n- Run `yarn` or `npm install`\n- Run `yarn start` or `npm run start` to try it out.\n\n## 📝 References\n\n- [`react-native-reanimated` docs](https://docs.swmansion.com/react-native-reanimated/)\n- [`react-native-gesture-handler` docs](https://docs.swmansion.com/react-native-gesture-handler/)\n- [`react-native` docs](https://reactnative.dev/)\n- [Slack Brand Color Pallete](https://brand.slackhq.com/color)\n- [Expo Vector Icons Directory](https://icons.expo.fyi/Index)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgupta-ji6%2Freact-native-slack-catch-up","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgupta-ji6%2Freact-native-slack-catch-up","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgupta-ji6%2Freact-native-slack-catch-up/lists"}