[🐴] Pill for additional unreads when coming from background

src/components/dms/NewMessagesPill.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import {View} from 'react-native'
+import Animated from 'react-native-reanimated'
+import {Trans} from '@lingui/macro'
+
+import {
+  ScaleAndFadeIn,
+  ScaleAndFadeOut,
+} from 'lib/custom-animations/ScaleAndFade'
+import {atoms as a, useTheme} from '#/alf'
+import {Text} from '#/components/Typography'
+
+export function NewMessagesPill() {
+  const t = useTheme()
+
+  React.useEffect(() => {}, [])
+
+  return (
+    <Animated.View
+      style={[
+        a.py_sm,
+        a.rounded_full,
+        a.shadow_sm,
+        a.border,
+        t.atoms.bg_contrast_50,
+        t.atoms.border_contrast_medium,
+        {
+          position: 'absolute',
+          bottom: 70,
+          width: '40%',
+          left: '30%',
+          alignItems: 'center',
+          shadowOpacity: 0.125,
+          shadowRadius: 12,
+          shadowOffset: {width: 0, height: 5},
+        },
+      ]}
+      entering={ScaleAndFadeIn}
+      exiting={ScaleAndFadeOut}>
+      <View style={{flex: 1}}>
+        <Text style={[a.font_bold]}>
+          <Trans>New messages</Trans>
+        </Text>
+      </View>
+    </Animated.View>
+  )
+}

src/lib/custom-animations/ScaleAndFade.ts

@@ -0,0 +1,39 @@
+import {withTiming} from 'react-native-reanimated'
+
+export function ScaleAndFadeIn() {
+  'worklet'
+
+  const animations = {
+    opacity: withTiming(1),
+    transform: [{scale: withTiming(1)}],
+  }
+
+  const initialValues = {
+    opacity: 0,
+    transform: [{scale: 0.7}],
+  }
+
+  return {
+    animations,
+    initialValues,
+  }
+}
+
+export function ScaleAndFadeOut() {
+  'worklet'
+
+  const animations = {
+    opacity: withTiming(0),
+    transform: [{scale: withTiming(0.7)}],
+  }
+
+  const initialValues = {
+    opacity: 1,
+    transform: [{scale: 1}],
+  }
+
+  return {
+    animations,
+    initialValues,
+  }
+}

src/screens/Messages/Conversation/MessagesList.tsx

@@ -16,6 +16,7 @@ import {List} from 'view/com/util/List'
 import {MessageInput} from '#/screens/Messages/Conversation/MessageInput'
 import {MessageListError} from '#/screens/Messages/Conversation/MessageListError'
 import {MessageItem} from '#/components/dms/MessageItem'
+import {NewMessagesPill} from '#/components/dms/NewMessagesPill'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 
@@ -64,6 +65,8 @@ export function MessagesList() {
   const {getAgent} = useAgent()
   const flatListRef = useRef<FlatList>(null)
 
+  const [showNewMessagesPill, setShowNewMessagesPill] = React.useState(false)
+
   // We need to keep track of when the scroll offset is at the bottom of the list to know when to scroll as new items
   // are added to the list. For example, if the user is scrolled up to 1iew older messages, we don't want to scroll to
   // the bottom.
@@ -118,6 +121,7 @@ export function MessagesList() {
           convo.items.length - prevItemCount.current > 1
         ) {
           newOffset = contentHeight.value - 50
+          setShowNewMessagesPill(true)
         }
 
         flatListRef.current?.scrollToOffset({
@@ -180,6 +184,13 @@ export function MessagesList() {
 
       const bottomOffset = e.contentOffset.y + e.layoutMeasurement.height
 
+      if (
+        showNewMessagesPill &&
+        e.contentSize.height - e.layoutMeasurement.height / 3 < bottomOffset
+      ) {
+        runOnJS(setShowNewMessagesPill)(false)
+      }
+
       // Most apps have a little bit of space the user can scroll past while still automatically scrolling ot the bottom
       // when a new message is added, hence the 100 pixel offset
       isAtBottom.value = e.contentSize.height - 100 < bottomOffset
@@ -194,10 +205,11 @@ export function MessagesList() {
     },
     [
       layoutHeight,
-      contentHeight.value,
-      hasInitiallyScrolled,
+      showNewMessagesPill,
       isAtBottom,
       isAtTop,
+      contentHeight.value,
+      hasInitiallyScrolled,
     ],
   )
 
@@ -259,6 +271,7 @@ export function MessagesList() {
           }
         />
       </ScrollProvider>
+      {showNewMessagesPill && <NewMessagesPill />}
       <MessageInput onSendMessage={onSendMessage} scrollToEnd={scrollToEnd} />
     </>
   )