gupta-ji6 / react-native-slack-catch-up

a prototype of upcoming catch up feature on slack, built with reanimated v3 & react-native-gesture-handler with typescript & react-native. 60fps smooth animations running on UI Thread.

react-native-slack-catch-up

Slack's upcoming "Catch Up" tinder-like mobile app feature shared here, built in react-native & typescript with smooth ✨ 60fps ✨ native reanimated & gesture-handler animations.

📱 Demo

full-demo.mp4

Features

• 👆 Swipe right to mark as read, or left to keep unread.
• ✔ Show different overlays on basis of swipe direction with animated opactiy depending on translation.
• 🫰 Snap back card if swipe velocity is less than the configurable threshold.
• ↔ Action buttons for swipe left & swipe right functionalities for accessibility & quick action.
• ↩️ Undo anytime, we all make mistakes.
• 🔢 Show number of threads left to catch up.
• 👀 Show a peek of next card, if existing.
• 🙌 The OG emoji & title of Slack at stack end.
• 🔁 Reset whole stack to start again.
• ✨ 60fps native animtions running on UI thread.
• 💪 TypeScript support.
• ⚛️ Reusbale React functional components with configurable props.
• ♻ Supports Android, iOS & Web platforms.

✨ Micro Interactions & Animations

1. ⬆ Stack Enter Animation

The card stack smoothly slides in down on render. The action buttons below & header animates in same manner to compilment the motion.

2. 👆 Top Card Touch Up & Touch Down Interaction

The top most card smoothly scales up & down on touch to make the user feel it's interactive.

3. 👀 Next Card Peek

It'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.

4. 🫰 Snap Back To Center On Low Swipe Velocity

The card smoothly snaps back to it's position if the swipe velocity is less than a certain configurable threshold.

5. 👉👈 Animated Swipe Overlays

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

6. 🧃 Juicy Buttons

Buttons you wanna keep smashing because it feels like they're asking for it.

7. 🔍 Zoom-In Entrance Of Stack End

When the stack ends, the end view enters with a smooth zoom-in animation & an action button slides in from the bottom.

Components & API Reference

<ThreadStack />

Usage

    <ThreadStack
        data={threads}
        onSwipeLeft={(item) => {
            console.warn('left, ', item);
        }}
        onSwipeRight={(item) => {
            console.warn('right', item);
        }}
        allowSwipe
        showActionButtons
        stackEnd={{
            emoji: '🙌',
            heading: 'All Caught Up.',
            showReset: true,
        }}
        header={{
            visible: true,
            showNumberOfThreadsLeft: true,
            showUndoButton: true,
            showResetIconButton: true,
        }}
    />

Properties

Name	Description	Default	Required
data	The array of data to be rendered in the stack	[]	Required
onSwipeLeft	Callback on swipe left action		Optional
onSwipeRight	Callback on swipe right action		Optional
allowSwipe	Whether to allow swipe gestures or not	true	Optional
showActionButtons	Whether to show the action buttons at the bottom	true	Optional
header	Configuration of header component	{ visible : true , showNumberOfThreadsLeft : true , showUndoButton : true , showResetIconButton : true , }	Optional
stackEnd	Configuration for the stack end view	{ emoji : ' 🙌 ' , heading : ' All Caught Up. ' , showReset : true , }

🛠️ Built With

Note

The initial template was created with npx create-react-native-app my-app -t with-reanimated

1. react-native - v72
2. react-native-reanimated - v3
3. react-native-gesture-handler - v2
4. expo - v49

👨🏻‍💻 Developement

• Run yarn or npm install
• Run yarn start or npm run start to try it out.

📝 References

• react-native-reanimated docs
• react-native-gesture-handler docs
• react-native docs
• Slack Brand Color Pallete
• Expo Vector Icons Directory