acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

add animation

Browse Source
This commit is contained in:
Samuel Newman
2025-06-23 14:46:48 +03:00
committed by Eric Bailey
parent dbe86dde43
commit af70a8a9e0
1 changed files with 44 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Tooltip/index.tsx
+44 -41
View File
@@ -7,6 +7,7 @@ import {
useState, useState,
} from 'react' } from 'react'
import {Dimensions, View} from 'react-native' import {Dimensions, View} from 'react-native'
import Animated, {Easing, ZoomIn} from 'react-native-reanimated'
import {useSafeAreaInsets} from 'react-native-safe-area-context' import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {atoms as a, useTheme} from '#/alf' import {atoms as a, useTheme} from '#/alf'
@@ -293,48 +294,50 @@ function Bubble({
left: coords.left, left: coords.left,
}, },
]}> ]}>
<View <Animated.View entering={ZoomIn.easing(Easing.out(Easing.exp))}>
style={[ <View
a.absolute, style={[
a.top_0, a.absolute,
a.z_10, a.top_0,
t.atoms.bg, a.z_10,
{ t.atoms.bg,
borderTopLeftRadius: a.rounded_xs.borderRadius, {
width: TIP_SIZE, borderTopLeftRadius: a.rounded_xs.borderRadius,
height: TIP_SIZE, width: TIP_SIZE,
transform: [{rotate: '45deg'}], height: TIP_SIZE,
top: coords.tipTop, transform: [{rotate: '45deg'}],
left: coords.tipLeft, top: coords.tipTop,
}, left: coords.tipLeft,
]}
/>
<View
style={[
a.px_md,
a.py_sm,
a.rounded_sm,
t.atoms.bg,
t.atoms.shadow_md,
{
shadowOpacity: 0.2,
shadowOffset: {
width: 0,
// provide more shadow beneath tip
height:
TIP_VISUAL_OFFSET *
(coords.computedPosition === 'bottom' ? -1 : 1),
}, },
}, ]}
]} />
onLayout={e => { <View
setBubbleMeasurements({ style={[
width: e.nativeEvent.layout.width, a.px_md,
height: e.nativeEvent.layout.height, a.py_sm,
}) a.rounded_sm,
}}> t.atoms.bg,
{children} t.atoms.shadow_md,
</View> {
shadowOpacity: 0.2,
shadowOffset: {
width: 0,
// provide more shadow beneath tip
height:
TIP_VISUAL_OFFSET *
(coords.computedPosition === 'bottom' ? -1 : 1),
},
},
]}
onLayout={e => {
setBubbleMeasurements({
width: e.nativeEvent.layout.width,
height: e.nativeEvent.layout.height,
})
}}>
{children}
</View>
</Animated.View>
</View> </View>
) )
} }