merge in main

src/view/com/composer/Composer.tsx

@@ -107,7 +107,9 @@ export const ComposePost = observer(function ComposePost({
   text: initText,
   imageUris: initImageUris,
   cancelRef,
+  isModalReady,
 }: Props & {
+  isModalReady: boolean
   cancelRef?: React.RefObject<CancelRef>
 }) {
   const {currentAccount} = useSession()
@@ -155,12 +157,6 @@ export const ComposePost = observer(function ComposePost({
   const [labels, setLabels] = useState<string[]>([])
   const [threadgate, setThreadgate] = useState<ThreadgateSetting[]>([])
 
-  React.useEffect(() => {
-    if (!isAndroid) return
-    const id = setTimeout(() => textInput.current?.focus(), 100)
-    return () => clearTimeout(id)
-  }, [])
-
   const gallery = useMemo(
     () => new GalleryModel(initImageUris),
     [initImageUris],
@@ -181,9 +177,7 @@ export const ComposePost = observer(function ComposePost({
   const onPressCancel = useCallback(() => {
     if (graphemeLength > 0 || !gallery.isEmpty || extGif) {
       closeAllDialogs()
-      if (Keyboard) {
-        Keyboard.dismiss()
-      }
+      Keyboard.dismiss()
       discardPromptControl.open()
     } else {
       onClose()
@@ -524,7 +518,11 @@ export const ComposePost = observer(function ComposePost({
                 ref={textInput}
                 richtext={richtext}
                 placeholder={selectTextInputPlaceholder}
-                autoFocus={!isAndroid}
+                // fixes autofocus on android
+                key={
+                  isAndroid ? (isModalReady ? 'ready' : 'animating') : 'static'
+                }
+                autoFocus={isAndroid ? isModalReady : true}
                 setRichText={setRichText}
                 onPhotoPasted={onPhotoPasted}
                 onPressPublish={onPressPublish}

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx

@@ -1,30 +1,36 @@
 import React, {useState} from 'react'
-
 import {ActivityIndicator, Dimensions, StyleSheet} from 'react-native'
-import {Image} from 'expo-image'
+import {Gesture, GestureDetector} from 'react-native-gesture-handler'
 import Animated, {
   runOnJS,
+  useAnimatedReaction,
   useAnimatedRef,
   useAnimatedStyle,
-  useAnimatedReaction,
   useSharedValue,
   withDecay,
   withSpring,
 } from 'react-native-reanimated'
-import {GestureDetector, Gesture} from 'react-native-gesture-handler'
+import {Image} from 'expo-image'
+
+import type {Dimensions as ImageDimensions, ImageSource} from '../../@types'
 import useImageDimensions from '../../hooks/useImageDimensions'
 import {
-  createTransform,
-  readTransform,
   applyRounding,
+  createTransform,
   prependPan,
   prependPinch,
   prependTransform,
+  readTransform,
   TransformMatrix,
 } from '../../transforms'
-import type {ImageSource, Dimensions as ImageDimensions} from '../../@types'
 
-const SCREEN = Dimensions.get('window')
+const windowDim = Dimensions.get('window')
+const screenDim = Dimensions.get('screen')
+const statusBarHeight = windowDim.height - screenDim.height
+const SCREEN = {
+  width: windowDim.width,
+  height: windowDim.height + statusBarHeight,
+}
 const MIN_DOUBLE_TAP_SCALE = 2
 const MAX_ORIGINAL_IMAGE_ZOOM = 2
 

src/view/com/util/MainScrollProvider.tsx

@@ -1,6 +1,10 @@
 import React, {useCallback, useEffect} from 'react'
 import {NativeScrollEvent} from 'react-native'
-import {interpolate, useSharedValue} from 'react-native-reanimated'
+import {
+  cancelAnimation,
+  interpolate,
+  useSharedValue,
+} from 'react-native-reanimated'
 import EventEmitter from 'eventemitter3'
 
 import {ScrollProvider} from '#/lib/ScrollContext'
@@ -117,6 +121,8 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) {
         const newValue = clamp(startMode.value + dProgress, 0, 1)
         if (newValue !== mode.value) {
           // Manually adjust the value. This won't be (and shouldn't be) animated.
+          // Cancel any any existing animation
+          cancelAnimation(mode)
           mode.value = newValue
         }
       } else {

src/view/shell/Composer.tsx

@@ -1,4 +1,4 @@
-import React, {useLayoutEffect} from 'react'
+import React, {useLayoutEffect, useState} from 'react'
 import {Modal, View} from 'react-native'
 import {GestureHandlerRootView} from 'react-native-gesture-handler'
 import {RootSiblingParent} from 'react-native-root-siblings'
@@ -24,8 +24,16 @@ export const Composer = observer(function ComposerImpl({}: {
   const t = useTheme()
   const state = useComposerState()
   const ref = useComposerCancelRef()
+  const [isModalReady, setIsModalReady] = useState(false)
 
   const open = !!state
+  const [prevOpen, setPrevOpen] = useState(open)
+  if (open !== prevOpen) {
+    setPrevOpen(open)
+    if (!open) {
+      setIsModalReady(false)
+    }
+  }
 
   return (
     <Modal
@@ -34,10 +42,12 @@ export const Composer = observer(function ComposerImpl({}: {
       visible={open}
       presentationStyle="formSheet"
       animationType="slide"
+      onShow={() => setIsModalReady(true)}
       onRequestClose={() => ref.current?.onPressCancel()}>
       <View style={[t.atoms.bg, a.flex_1]}>
         <Providers open={open}>
           <ComposePost
+            isModalReady={isModalReady}
             cancelRef={ref}
             replyTo={state?.replyTo}
             onPost={state?.onPost}

src/view/shell/Composer.web.tsx

@@ -56,6 +56,7 @@ export function Composer({}: {winHeight: number}) {
           t.atoms.border_contrast_medium,
         ]}>
         <ComposePost
+          isModalReady={true}
           replyTo={state.replyTo}
           quote={state.quote}
           onPost={state.onPost}

src/view/shell/bottom-bar/BottomBarWeb.tsx

@@ -16,6 +16,9 @@ import {s} from '#/lib/styles'
 import {useSession} from '#/state/session'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {useCloseAllActiveElements} from '#/state/util'
+import {useGate} from 'lib/statsig/statsig'
+import {useUnreadMessageCount} from 'state/queries/messages/list-converations'
+import {useUnreadNotifications} from 'state/queries/notifications/unread'
 import {Button} from '#/view/com/util/forms/Button'
 import {Text} from '#/view/com/util/text/Text'
 import {Logo} from '#/view/icons/Logo'
@@ -46,11 +49,15 @@ export function BottomBarWeb() {
   const {hasSession, currentAccount} = useSession()
   const pal = usePalette('default')
   const safeAreaInsets = useSafeAreaInsets()
+  const gate = useGate()
   const {footerMinimalShellTransform} = useMinimalShellMode()
   const {requestSwitchToAccount} = useLoggedOutViewControls()
   const closeAllActiveElements = useCloseAllActiveElements()
   const iconWidth = 26
 
+  const unreadMessageCount = useUnreadMessageCount()
+  const notificationCountStr = useUnreadNotifications()
+
   const showSignIn = React.useCallback(() => {
     closeAllActiveElements()
     requestSwitchToAccount({requestedAccount: 'none'})
@@ -103,10 +110,20 @@ export function BottomBarWeb() {
                 {({isActive}) => {
                   const Icon = isActive ? MessageFilled : Message
                   return (
-                    <Icon
-                      width={iconWidth - 1}
-                      style={[styles.ctrlIcon, pal.text, styles.messagesIcon]}
-                    />
+                    <>
+                      <Icon
+                        width={iconWidth - 1}
+                        style={[styles.ctrlIcon, pal.text, styles.messagesIcon]}
+                      />
+                      {unreadMessageCount.count > 0 &&
+                        gate('show_notification_badge_mobile_web') && (
+                          <View style={styles.notificationCount}>
+                            <Text style={styles.notificationCountLabel}>
+                              {unreadMessageCount.numUnread}
+                            </Text>
+                          </View>
+                        )}
+                    </>
                   )
                 }}
               </NavItem>
@@ -114,10 +131,20 @@ export function BottomBarWeb() {
                 {({isActive}) => {
                   const Icon = isActive ? BellFilled : Bell
                   return (
-                    <Icon
-                      width={iconWidth}
-                      style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
-                    />
+                    <>
+                      <Icon
+                        width={iconWidth}
+                        style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
+                      />
+                      {notificationCountStr !== '' &&
+                        gate('show_notification_badge_mobile_web') && (
+                          <View style={styles.notificationCount}>
+                            <Text style={styles.notificationCountLabel}>
+                              {notificationCountStr}
+                            </Text>
+                          </View>
+                        )}
+                    </>
                   )
                 }}
               </NavItem>