mirror of https://github.com/tooot-app/app
59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
import { useTheme } from '@utils/styles/ThemeManager'
|
|
import React, { useContext, useEffect } from 'react'
|
|
import { Dimensions, Image } from 'react-native'
|
|
import Animated, {
|
|
useAnimatedStyle,
|
|
useSharedValue,
|
|
withTiming
|
|
} from 'react-native-reanimated'
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
|
import AccountContext from './utils/createContext'
|
|
|
|
export interface Props {
|
|
account?: Mastodon.Account
|
|
limitHeight?: boolean
|
|
}
|
|
|
|
const AccountHeader: React.FC<Props> = ({ account, limitHeight = false }) => {
|
|
const { accountState, accountDispatch } = useContext(AccountContext)
|
|
const { theme } = useTheme()
|
|
const topInset = useSafeAreaInsets().top
|
|
|
|
const height = useSharedValue(
|
|
Dimensions.get('screen').width * accountState.headerRatio + topInset
|
|
)
|
|
const styleHeight = useAnimatedStyle(() => {
|
|
return {
|
|
height: withTiming(height.value)
|
|
}
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (
|
|
account?.header &&
|
|
!account.header.includes('/headers/original/missing.png')
|
|
) {
|
|
Image.getSize(account.header, (width, height) => {
|
|
// if (!limitHeight) {
|
|
// accountDispatch({
|
|
// type: 'headerRatio',
|
|
// payload: height / width
|
|
// })
|
|
// }
|
|
})
|
|
}
|
|
}, [account])
|
|
|
|
return (
|
|
<Animated.Image
|
|
source={{ uri: account?.header }}
|
|
style={[styleHeight, { backgroundColor: theme.disabled }]}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default React.memo(
|
|
AccountHeader,
|
|
(_, next) => next.account === undefined
|
|
)
|