Ansh
8e9cf182c2
* upgrade sentry to support profiling monitoring * remove console logs in production builds * feeds tab bar and bottom bar animation centralized * refactor FeedPage out of Home * add script to start in production mode * move FAB inner to reanimated * move FABInner back to `Animated` RN animation * add perf commands * add testing with Maestro and perf with Flashlight * fix merge conflicts * fix resourceClass name in eas.json * fix onEndReachedThreshold in Feed * memoize styles * go back to old styling for LoadLatestBtn * remove reanimated code from useMinimalShellMode * move shell animations to hook/reanimated for perf * fix empty state issue * make shell animation feel smoother * make shell animation more smooth * run animation with autorun * specify keys for tab bar properly * remove comments * remove already imported dep * fix lint * add testing instructions * mock sentry-expo for jest * fix jest mocks * Fix the load-latest button on desktop and tablet * Fix: don't move the FAB in tablet mode * Fix type error * Fix tabs bar positioning on tablet * Fix types --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com>
80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import React, {ComponentProps} from 'react'
|
|
import {observer} from 'mobx-react-lite'
|
|
import {StyleSheet, TouchableWithoutFeedback} from 'react-native'
|
|
import LinearGradient from 'react-native-linear-gradient'
|
|
import {gradients} from 'lib/styles'
|
|
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
|
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
|
import {clamp} from 'lib/numbers'
|
|
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
|
|
import Animated from 'react-native-reanimated'
|
|
|
|
export interface FABProps
|
|
extends ComponentProps<typeof TouchableWithoutFeedback> {
|
|
testID?: string
|
|
icon: JSX.Element
|
|
}
|
|
|
|
export const FABInner = observer(function FABInnerImpl({
|
|
testID,
|
|
icon,
|
|
...props
|
|
}: FABProps) {
|
|
const insets = useSafeAreaInsets()
|
|
const {isMobile, isTablet} = useWebMediaQueries()
|
|
const {fabMinimalShellTransform} = useMinimalShellMode()
|
|
|
|
const size = React.useMemo(() => {
|
|
return isTablet ? styles.sizeLarge : styles.sizeRegular
|
|
}, [isTablet])
|
|
const tabletSpacing = React.useMemo(() => {
|
|
return isTablet
|
|
? {right: 50, bottom: 50}
|
|
: {
|
|
right: 24,
|
|
bottom: clamp(insets.bottom, 15, 60) + 15,
|
|
}
|
|
}, [insets.bottom, isTablet])
|
|
|
|
return (
|
|
<TouchableWithoutFeedback testID={testID} {...props}>
|
|
<Animated.View
|
|
style={[
|
|
styles.outer,
|
|
size,
|
|
tabletSpacing,
|
|
isMobile && fabMinimalShellTransform,
|
|
]}>
|
|
<LinearGradient
|
|
colors={[gradients.blueLight.start, gradients.blueLight.end]}
|
|
start={{x: 0, y: 0}}
|
|
end={{x: 1, y: 1}}
|
|
style={[styles.inner, size]}>
|
|
{icon}
|
|
</LinearGradient>
|
|
</Animated.View>
|
|
</TouchableWithoutFeedback>
|
|
)
|
|
})
|
|
|
|
const styles = StyleSheet.create({
|
|
sizeRegular: {
|
|
width: 60,
|
|
height: 60,
|
|
borderRadius: 30,
|
|
},
|
|
sizeLarge: {
|
|
width: 70,
|
|
height: 70,
|
|
borderRadius: 35,
|
|
},
|
|
outer: {
|
|
position: 'absolute',
|
|
zIndex: 1,
|
|
},
|
|
inner: {
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
})
|