├── .gitignore ├── App.tsx ├── LICENSE ├── README.md ├── app.json ├── assets ├── button.gif ├── end.gif ├── full-demo.mp4 ├── next-card.gif ├── overlay.gif ├── snap.gif ├── stack-entrance.gif └── top-card.gif ├── babel.config.js ├── components ├── Button.tsx ├── Header.tsx ├── ReadOverlay.tsx ├── StackEnd.tsx ├── ThreadActions.tsx ├── ThreadCard.tsx ├── ThreadStack.tsx └── UnreadOverlay.tsx ├── constants.ts ├── package-lock.json ├── package.json ├── tsconfig.json └── types.ts /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | dist/ 4 | npm-debug.* 5 | *.jks 6 | *.p8 7 | *.p12 8 | *.key 9 | *.mobileprovision 10 | *.orig.* 11 | web-build/ 12 | 13 | # macOS 14 | .DS_Store 15 | -------------------------------------------------------------------------------- /App.tsx: -------------------------------------------------------------------------------- 1 | import 'react-native-gesture-handler'; 2 | import { StyleSheet } from 'react-native'; 3 | import { GestureHandlerRootView } from 'react-native-gesture-handler'; 4 | import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; 5 | import { threads } from './constants'; 6 | import ThreadStack from './components/ThreadStack'; 7 | 8 | const CatchUp = () => { 9 | return ( 10 | 11 | 12 | 13 | { 16 | // console.warn('left, ', item.id); 17 | }} 18 | onSwipeRight={(item) => { 19 | // console.warn('right', item.id); 20 | }} 21 | allowSwipe 22 | showActionButtons 23 | stackEnd={{ 24 | emoji: '🙌', 25 | heading: 'All Caught Up.', 26 | showReset: true, 27 | }} 28 | header={{ 29 | visible: true, 30 | showNumberOfThreadsLeft: true, 31 | showUndoButton: true, 32 | showResetIconButton: true, 33 | }} 34 | /> 35 | 36 | 37 | 38 | ); 39 | }; 40 | 41 | export default CatchUp; 42 | 43 | const styles = StyleSheet.create({ 44 | root: { 45 | flex: 1, 46 | alignItems: 'center', 47 | justifyContent: 'center', 48 | backgroundColor: '#81438E', 49 | padding: 10, 50 | }, 51 | }); 52 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-slack-catch-up 2 | 3 |

4 | 5 | [![supports iOS](https://img.shields.io/badge/iOS-999999.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff)](https://github.com/expo/expo) 6 | [![supports Android](https://img.shields.io/badge/Android-A4C639.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff)](https://github.com/expo/expo) 7 | [![supports web](https://img.shields.io/badge/Web-4285F4.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff)](https://github.com/expo/expo) 8 |

9 | 10 | Slack's upcoming "Catch Up" tinder-like mobile app feature shared [here](https://x.com/metasidd/status/1745244070757216547?s=20), built in `react-native` & `typescript` with smooth ✨ **60fps** ✨ native reanimated & gesture-handler animations. 11 | 12 | ## 📱 Demo 13 | 14 | https://github.com/gupta-ji6/react-native-slack-catch-up/assets/21218732/10592701-75c6-45e7-90a7-41424d1bd7b5 15 | 16 | ## Features 17 | 18 | - [x] 👆 Swipe right to mark as read, or left to keep unread. 19 | - [x] ✔ Show different overlays on basis of swipe direction with animated opactiy depending on translation. 20 | - [x] 🫰 Snap back card if swipe velocity is less than the configurable threshold. 21 | - [x] ↔ Action buttons for swipe left & swipe right functionalities for accessibility & quick action. 22 | - [x] ↩️ Undo anytime, we all make mistakes. 23 | - [x] 🔢 Show number of threads left to catch up. 24 | - [x] 👀 Show a peek of next card, if existing. 25 | - [x] 🙌 The OG emoji & title of Slack at stack end. 26 | - [x] 🔁 Reset whole stack to start again. 27 | - [x] ✨ 60fps native animtions running on UI thread. 28 | - [x] 💪 TypeScript support. 29 | - [x] ⚛️ Reusbale React functional components with configurable props. 30 | - [x] ♻ Supports Android, iOS & Web platforms. 31 | 32 | ## ✨ Micro Interactions & Animations 33 | 34 | ### 1. ⬆ Stack Enter Animation 35 | 36 | The card stack smoothly slides in down on render. The action buttons below & header animates in same manner to compilment the motion. 37 | 38 | ![Stack Entry Animation](./assets/stack-entrance.gif) 39 | 40 | ### 2. 👆 Top Card Touch Up & Touch Down Interaction 41 | 42 | The top most card smoothly scales up & down on touch to make the user feel it's interactive. 43 | 44 | ![Top Card Touch Up & Touch Down Interaction](./assets/top-card.gif) 45 | 46 | ### 3. 👀 Next Card Peek 47 | 48 | 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. 49 | 50 | ![Next Card Peek](./assets/next-card.gif) 51 | 52 | ### 4. 🫰 Snap Back To Center On Low Swipe Velocity 53 | 54 | The card smoothly snaps back to it's position if the swipe velocity is less than a certain configurable threshold. 55 | 56 | ![Snap Back To Center On Low Swipe Velocity](./assets/snap.gif) 57 | 58 | ### 5. 👉👈 Animated Swipe Overlays 59 | 60 | 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. 61 | 62 | ![Animated Swipe Overlays](./assets/overlay.gif) 63 | 64 | ### 6. 🧃 Juicy Buttons 65 | 66 | Buttons you wanna keep smashing because it feels like they're asking for it. 67 | 68 | ![Juicy Buttons](./assets/button.gif) 69 | 70 | ### 7. 🔍 Zoom-In Entrance Of Stack End 71 | 72 | When the stack ends, the end view enters with a smooth zoom-in animation & an action button slides in from the bottom. 73 | 74 | ![Zoom-In Entrance Of Stack End](./assets/end.gif) 75 | 76 | ## Components & API Reference 77 | 78 | ### `` 79 | 80 | #### Usage 81 | 82 | ```tsx 83 | { 86 | console.warn('left, ', item); 87 | }} 88 | onSwipeRight={(item) => { 89 | console.warn('right', item); 90 | }} 91 | allowSwipe 92 | showActionButtons 93 | stackEnd={{ 94 | emoji: '🙌', 95 | heading: 'All Caught Up.', 96 | showReset: true, 97 | }} 98 | header={{ 99 | visible: true, 100 | showNumberOfThreadsLeft: true, 101 | showUndoButton: true, 102 | showResetIconButton: true, 103 | }} 104 | /> 105 | ``` 106 | 107 | #### Properties 108 | 109 | | Name | Description | Default | Required | 110 | | ------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- | -------- | 111 | | `data` | The array of data to be rendered in the stack | [] | Required | 112 | | `onSwipeLeft` | Callback on swipe left action | | Optional | 113 | | `onSwipeRight` | Callback on swipe right action | | Optional | 114 | | `allowSwipe` | Whether to allow swipe gestures or not | true | Optional | 115 | | `showActionButtons` | Whether to show the action buttons at the bottom | true | Optional | 116 | | `header` | Configuration of header component | ```{ visible : true , showNumberOfThreadsLeft : true , showUndoButton : true , showResetIconButton : true , }``` | Optional | 117 | | `stackEnd` | Configuration for the stack end view | ```{ emoji : ' 🙌 ' , heading : ' All Caught Up. ' , showReset : true , }``` | 118 | 119 | 120 | ## 🛠️ Built With 121 | 122 | > [!NOTE] 123 | > The initial template was created with `npx create-react-native-app my-app -t with-reanimated` 124 | 125 | 1. `react-native` - v72 126 | 2. `react-native-reanimated` - v3 127 | 3. `react-native-gesture-handler` - v2 128 | 4. `expo` - v49 129 | 130 | ## 👨🏻‍💻 Developement 131 | 132 | - Run `yarn` or `npm install` 133 | - Run `yarn start` or `npm run start` to try it out. 134 | 135 | ## 📝 References 136 | 137 | - [`react-native-reanimated` docs](https://docs.swmansion.com/react-native-reanimated/) 138 | - [`react-native-gesture-handler` docs](https://docs.swmansion.com/react-native-gesture-handler/) 139 | - [`react-native` docs](https://reactnative.dev/) 140 | - [Slack Brand Color Pallete](https://brand.slackhq.com/color) 141 | - [Expo Vector Icons Directory](https://icons.expo.fyi/Index) 142 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "react-native-slack-catch-up", 4 | "slug": "react-native-slack-catch-up" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /assets/button.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gupta-ji6/react-native-slack-catch-up/2649cea3d41f91c328db51c0211bc093b4784c2d/assets/button.gif -------------------------------------------------------------------------------- /assets/end.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gupta-ji6/react-native-slack-catch-up/2649cea3d41f91c328db51c0211bc093b4784c2d/assets/end.gif -------------------------------------------------------------------------------- /assets/full-demo.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gupta-ji6/react-native-slack-catch-up/2649cea3d41f91c328db51c0211bc093b4784c2d/assets/full-demo.mp4 -------------------------------------------------------------------------------- /assets/next-card.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gupta-ji6/react-native-slack-catch-up/2649cea3d41f91c328db51c0211bc093b4784c2d/assets/next-card.gif -------------------------------------------------------------------------------- /assets/overlay.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gupta-ji6/react-native-slack-catch-up/2649cea3d41f91c328db51c0211bc093b4784c2d/assets/overlay.gif -------------------------------------------------------------------------------- /assets/snap.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gupta-ji6/react-native-slack-catch-up/2649cea3d41f91c328db51c0211bc093b4784c2d/assets/snap.gif -------------------------------------------------------------------------------- /assets/stack-entrance.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gupta-ji6/react-native-slack-catch-up/2649cea3d41f91c328db51c0211bc093b4784c2d/assets/stack-entrance.gif -------------------------------------------------------------------------------- /assets/top-card.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gupta-ji6/react-native-slack-catch-up/2649cea3d41f91c328db51c0211bc093b4784c2d/assets/top-card.gif -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | plugins: ['react-native-reanimated/plugin'] 6 | }; 7 | }; 8 | -------------------------------------------------------------------------------- /components/Button.tsx: -------------------------------------------------------------------------------- 1 | import { Pressable, StyleSheet, Text } from 'react-native'; 2 | import Animated, { 3 | useAnimatedStyle, 4 | useSharedValue, 5 | withSpring, 6 | } from 'react-native-reanimated'; 7 | import { ButtonProps } from '../types'; 8 | 9 | const AnimatedPressable = Animated.createAnimatedComponent(Pressable); 10 | 11 | const Button: React.FC = ({ 12 | title, 13 | variant = 'primary', 14 | onPress, 15 | }) => { 16 | const buttonScale = useSharedValue(1); 17 | 18 | const buttonStyles = useAnimatedStyle(() => { 19 | return { 20 | transform: [{ scale: buttonScale.value }], 21 | }; 22 | }); 23 | 24 | return ( 25 | (buttonScale.value = withSpring(0.94))} 32 | onPressOut={() => (buttonScale.value = withSpring(1))} 33 | onPress={onPress} 34 | > 35 | 43 | {title} 44 | 45 | 46 | ); 47 | }; 48 | 49 | export default Button; 50 | 51 | const styles = StyleSheet.create({ 52 | button: { 53 | paddingHorizontal: 10, 54 | paddingVertical: 14, 55 | borderCurve: 'continuous', 56 | borderTopLeftRadius: 14, 57 | borderTopRightRadius: 14, 58 | borderBottomLeftRadius: 14, 59 | borderBottomRightRadius: 14, 60 | flex: 1 / 2, 61 | justifyContent: 'center', 62 | alignItems: 'center', 63 | elevation: 1, 64 | shadowColor: 'rgba(0, 0, 0, 1)', 65 | shadowOffset: { 66 | width: 0, 67 | height: 1, 68 | }, 69 | shadowOpacity: 0.7, 70 | shadowRadius: 1, 71 | }, 72 | title: { 73 | fontWeight: 'bold', 74 | fontSize: 16, 75 | }, 76 | }); 77 | -------------------------------------------------------------------------------- /components/Header.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Text, StyleSheet } from 'react-native'; 3 | import { BorderlessButton } from 'react-native-gesture-handler'; 4 | import Animated, { SlideInDown } from 'react-native-reanimated'; 5 | import { MaterialCommunityIcons } from '@expo/vector-icons'; 6 | import { HeaderProps } from '../types'; 7 | 8 | const disbaledColor = 'rgba(255, 255, 255, 0.5)'; 9 | 10 | const Header: React.FC = ({ 11 | showNumberOfThreadsLeft = true, 12 | showResetIconButton = true, 13 | showUndoButton = true, 14 | numberOfThreadsLeft = 0, 15 | currentThreadIndex = 0, 16 | onReset, 17 | onUndo, 18 | }) => { 19 | const isDisabled = currentThreadIndex === 0; 20 | 21 | return ( 22 | 23 | {numberOfThreadsLeft !== 0 ? ( 24 | 28 | {showResetIconButton ? ( 29 | 30 | 35 | 36 | ) : null} 37 | 38 | {showNumberOfThreadsLeft ? ( 39 | {numberOfThreadsLeft} Left 40 | ) : null} 41 | 42 | {showUndoButton ? ( 43 | 44 | 53 | Undo 54 | 55 | 56 | ) : null} 57 | 58 | ) : null} 59 | 60 | ); 61 | }; 62 | 63 | export default Header; 64 | 65 | const styles = StyleSheet.create({ 66 | container: { 67 | paddingBottom: 30, 68 | flexDirection: 'row', 69 | justifyContent: 'space-between', 70 | alignItems: 'center', 71 | }, 72 | reset: { 73 | flex: 1 / 3, 74 | }, 75 | undo: { 76 | flex: 1 / 3, 77 | }, 78 | text: { 79 | fontWeight: 'bold', 80 | fontSize: 16, 81 | textAlign: 'center', 82 | color: '#fff', 83 | }, 84 | }); 85 | -------------------------------------------------------------------------------- /components/ReadOverlay.tsx: -------------------------------------------------------------------------------- 1 | import { Text, StyleSheet } from 'react-native'; 2 | import Animated from 'react-native-reanimated'; 3 | import { Ionicons } from '@expo/vector-icons'; 4 | import { OverlayProps } from '../types'; 5 | 6 | const ReadOverlay: React.FC = ({ animatedStyle }) => { 7 | return ( 8 | 9 | 10 | Mark as {'\n'}Read 11 | 12 | ); 13 | }; 14 | 15 | export default ReadOverlay; 16 | 17 | const styles = StyleSheet.create({ 18 | overlayContainer: { 19 | ...StyleSheet.absoluteFillObject, 20 | justifyContent: 'center', 21 | alignItems: 'baseline', 22 | zIndex: 1, 23 | backgroundColor: 'rgba(69, 142, 119, 1)', 24 | backfaceVisibility: 'visible', 25 | borderTopLeftRadius: 18, 26 | borderTopRightRadius: 18, 27 | borderBottomLeftRadius: 18, 28 | borderBottomRightRadius: 18, 29 | padding: 20, 30 | }, 31 | overlayText: { 32 | fontSize: 24, 33 | color: '#fff', 34 | fontWeight: 'bold', 35 | paddingTop: 10, 36 | textAlign: 'left', 37 | }, 38 | }); 39 | -------------------------------------------------------------------------------- /components/StackEnd.tsx: -------------------------------------------------------------------------------- 1 | import { Text, View, StyleSheet } from 'react-native'; 2 | import React from 'react'; 3 | import Animated, { 4 | SlideInDown, 5 | SlideOutDown, 6 | ZoomIn, 7 | } from 'react-native-reanimated'; 8 | import Button from './Button'; 9 | import { StackEndProps } from '../types'; 10 | 11 | const StackEnd: React.FC = ({ 12 | onReset, 13 | emoji = '🙌', 14 | heading = 'All Caught Up.', 15 | }) => { 16 | return ( 17 | 18 | 19 | {emoji} 20 | {heading} 21 | 22 | 23 | 28 |