shared/common-adapters/bottom-accessory.tsx - master - githubmirror/client

shared/common-adapters/bottom-accessory.tsx

51 строка2 KB

chrisnojima

fix(chat): show inbox unread bar off liquid glass (#29522)

10 авг 2026, 20:49

10 авг 2026, 20:496b82083

import * as C from '@/constants'
import * as React from 'react'
import * as Styles from '@/styles'
import {View} from 'react-native'
import {useNavigation} from '@react-navigation/native'
import {useIsFocused} from '@react-navigation/core'
import type {BottomTabNavigationProp} from '@react-navigation/bottom-tabs'
import {isLiquidGlassSupported as _isLiquidGlassSupported} from '@callstack/liquid-glass'
import type {RootParamList} from '@/router-v2/route-params'

const isLiquidGlassActive = (isIOS && C.isPhone && _isLiquidGlassSupported) as boolean

// True when BottomAccessory hosts its children in the tab bar's accessory row.
// When false children render inline and must lay themselves out (no row context).
export const isBottomAccessoryHosted = isLiquidGlassActive

const useStyles = Styles.createStyleHook(() => ({
  container: {
    ...Styles.globalStyles.fillAbsolute,
    alignItems: 'stretch',
    flexDirection: 'row',
  },
}))

const BottomAccessoryMobile = ({children}: {children: React.ReactNode}) => {
  const styles = useStyles()
  const navigation = useNavigation()
  const isFocused = useIsFocused()

  React.useEffect(() => {
    if (!isFocused) return
    const parent = navigation.getParent() as BottomTabNavigationProp<RootParamList> | undefined
    parent?.setOptions({
      bottomAccessory: (): React.ReactNode => (
        <View style={Styles.castStyleNative(styles.container)}>
          {children}
        </View>
      ),
    })
    return () => {
      parent?.setOptions({bottomAccessory: undefined})
    }
  }, [children, isFocused, navigation, styles.container])

  return null
}

export const BottomAccessory = ({children}: {children: React.ReactNode}) => {
  if (!isMobile || !isLiquidGlassActive) return <>{children}</>
  return <BottomAccessoryMobile>{children}</BottomAccessoryMobile>
}