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

Replace pointerEvents props with atoms styles

Browse Source 
Migrate all pointerEvents prop usage to use the atoms system (a.pointer_events_none, a.pointer_events_auto, a.pointer_events_box_none) for consistency with the design system.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Samuel Newman
2026-01-12 11:02:26 +02:00
parent fd6b8fcbf1
commit 501f78a3d7
25 changed files with 163 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AccountList.tsx
+1 -1
View File
@@ -44,8 +44,8 @@ export function AccountList({
return ( return (
<View <View
pointerEvents={pendingDid ? 'none' : 'auto'}
style={[ style={[
pendingDid ? a.pointer_events_none : a.pointer_events_auto,
a.rounded_lg, a.rounded_lg,
a.overflow_hidden, a.overflow_hidden,
a.border, a.border,
src/components/FeedInterstitials.tsx
+4 -4
View File
@@ -680,20 +680,20 @@ export function ProfileGrid({
<View <View
ref={containerRef} ref={containerRef}
style={[ style={[
IS_IOS ? a.pointer_events_auto : a.pointer_events_box_none,
!isProfileHeaderContext && a.border_t, !isProfileHeaderContext && a.border_t,
t.atoms.border_contrast_low, t.atoms.border_contrast_low,
t.atoms.bg_contrast_25, t.atoms.bg_contrast_25,
]} ]}>
pointerEvents={IS_IOS ? 'auto' : 'box-none'}>
<View <View
style={[ style={[
IS_IOS ? a.pointer_events_auto : a.pointer_events_box_none,
a.px_lg, a.px_lg,
a.pt_md, a.pt_md,
a.flex_row, a.flex_row,
a.align_center, a.align_center,
a.justify_between, a.justify_between,
]} ]}>
pointerEvents={IS_IOS ? 'auto' : 'box-none'}>
<Text style={[a.text_sm, a.font_semi_bold, t.atoms.text]}> <Text style={[a.text_sm, a.font_semi_bold, t.atoms.text]}>
<Trans>Suggested for you</Trans> <Trans>Suggested for you</Trans>
</Text> </Text>
src/components/Post/Embed/VideoEmbed/VideoEmbedInner/TimeIndicator.tsx
+1 -1
View File
@@ -29,7 +29,6 @@ export function TimeIndicator({
return ( return (
<View <View
pointerEvents="none"
accessibilityLabel={_( accessibilityLabel={_(
msg`Time remaining: ${plural(Number(time) || 0, { msg`Time remaining: ${plural(Number(time) || 0, {
one: '# second', one: '# second',
@@ -38,6 +37,7 @@ export function TimeIndicator({
)} )}
accessibilityHint="" accessibilityHint=""
style={[ style={[
a.pointer_events_none,
{ {
backgroundColor: 'rgba(0, 0, 0, 0.5)', backgroundColor: 'rgba(0, 0, 0, 0.5)',
borderRadius: 6, borderRadius: 6,
src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/VideoControls.tsx
+7 -2
View File
@@ -413,8 +413,13 @@ export function Controls({
</View> </View>
{(showSpinner || error) && ( {(showSpinner || error) && (
<View <View
pointerEvents="none" style={[
style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}> a.pointer_events_none,
a.absolute,
a.inset_0,
a.justify_center,
a.align_center,
]}>
{showSpinner && <Loader fill={t.palette.white} size="lg" />} {showSpinner && <Loader fill={t.palette.white} size="lg" />}
{error && ( {error && (
<Text style={{color: t.palette.white}}> <Text style={{color: t.palette.white}}>
src/components/Post/Embed/index.tsx
+1 -1
View File
@@ -307,7 +307,7 @@ export function QuoteEmbed({
onBeforePress={onBeforePress} onBeforePress={onBeforePress}
onPressIn={onPressIn} onPressIn={onPressIn}
onPressOut={onPressOut}> onPressOut={onPressOut}>
<View pointerEvents="none"> <View style={a.pointer_events_none}>
<PostMeta <PostMeta
author={quote.author} author={quote.author}
moderation={moderation} moderation={moderation}
src/lib/custom-animations/AccordionAnimation.tsx
+6 -3
View File
@@ -13,6 +13,7 @@ import Animated, {
withTiming, withTiming,
} from 'react-native-reanimated' } from 'react-native-reanimated'
import {atoms as a} from '#/alf'
import {IS_IOS, IS_WEB} from '#/env' import {IS_IOS, IS_WEB} from '#/env'
type AccordionAnimationProps = React.PropsWithChildren<{ type AccordionAnimationProps = React.PropsWithChildren<{
@@ -63,10 +64,12 @@ function MobileAccordion({
return ( return (
<Animated.View <Animated.View
style={style} style={[
IS_IOS ? a.pointer_events_auto : a.pointer_events_box_none,
style,
]}
entering={FadeInUp.duration(duration)} entering={FadeInUp.duration(duration)}
exiting={FadeOutUp.duration(duration / 2)} exiting={FadeOutUp.duration(duration / 2)}>
pointerEvents={IS_IOS ? 'auto' : 'box-none'}>
{children} {children}
</Animated.View> </Animated.View>
) )
src/lib/custom-animations/LikeIcon.tsx
+28 -24
View File
@@ -6,7 +6,7 @@ import Animated, {
} from 'react-native-reanimated' } from 'react-native-reanimated'
import {s} from '#/lib/styles' import {s} from '#/lib/styles'
import {useTheme} from '#/alf' import {atoms as a, useTheme} from '#/alf'
import { import {
Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled, Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled,
Heart2_Stroke2_Corner0_Rounded as HeartIconOutline, Heart2_Stroke2_Corner0_Rounded as HeartIconOutline,
@@ -90,7 +90,7 @@ export function AnimatedLikeIcon({
</Animated.View> </Animated.View>
) : ( ) : (
<HeartIconOutline <HeartIconOutline
style={[{color: t.palette.contrast_500}, {pointerEvents: 'none'}]} style={[{color: t.palette.contrast_500}, a.pointer_events_none]}
width={size} width={size}
/> />
)} )}
@@ -98,31 +98,35 @@ export function AnimatedLikeIcon({
<> <>
<Animated.View <Animated.View
entering={circle1Keyframe.duration(300)} entering={circle1Keyframe.duration(300)}
style={{ style={[
position: 'absolute', a.pointer_events_none,
backgroundColor: s.likeColor.color, {
top: 0, position: 'absolute',
left: 0, backgroundColor: s.likeColor.color,
width: size, top: 0,
height: size, left: 0,
zIndex: -1, width: size,
pointerEvents: 'none', height: size,
borderRadius: size / 2, zIndex: -1,
}} borderRadius: size / 2,
},
]}
/> />
<Animated.View <Animated.View
entering={circle2Keyframe.duration(300)} entering={circle2Keyframe.duration(300)}
style={{ style={[
position: 'absolute', a.pointer_events_none,
backgroundColor: t.atoms.bg.backgroundColor, {
top: 0, position: 'absolute',
left: 0, backgroundColor: t.atoms.bg.backgroundColor,
width: size, top: 0,
height: size, left: 0,
zIndex: -1, width: size,
pointerEvents: 'none', height: size,
borderRadius: size / 2, zIndex: -1,
}} borderRadius: size / 2,
},
]}
/> />
</> </>
) : null} ) : null}
src/lib/custom-animations/LikeIcon.web.tsx
+30 -26
View File
@@ -3,7 +3,7 @@ import {View} from 'react-native'
import {useReducedMotion} from 'react-native-reanimated' import {useReducedMotion} from 'react-native-reanimated'
import {s} from '#/lib/styles' import {s} from '#/lib/styles'
import {useTheme} from '#/alf' import {atoms as a, useTheme} from '#/alf'
import { import {
Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled, Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled,
Heart2_Stroke2_Corner0_Rounded as HeartIconOutline, Heart2_Stroke2_Corner0_Rounded as HeartIconOutline,
@@ -78,41 +78,45 @@ export function AnimatedLikeIcon({
</View> </View>
) : ( ) : (
<HeartIconOutline <HeartIconOutline
style={[{color: t.palette.contrast_500}, {pointerEvents: 'none'}]} style={[{color: t.palette.contrast_500}, a.pointer_events_none]}
width={size} width={size}
/> />
)} )}
<View <View
// @ts-expect-error is div // @ts-expect-error is div
ref={circle1Ref} ref={circle1Ref}
style={{ style={[
position: 'absolute', a.pointer_events_none,
backgroundColor: s.likeColor.color, {
top: 0, position: 'absolute',
left: 0, backgroundColor: s.likeColor.color,
width: size, top: 0,
height: size, left: 0,
zIndex: -1, width: size,
pointerEvents: 'none', height: size,
borderRadius: size / 2, zIndex: -1,
opacity: 0, borderRadius: size / 2,
}} opacity: 0,
},
]}
/> />
<View <View
// @ts-expect-error is div // @ts-expect-error is div
ref={circle2Ref} ref={circle2Ref}
style={{ style={[
position: 'absolute', a.pointer_events_none,
backgroundColor: t.atoms.bg.backgroundColor, {
top: 0, position: 'absolute',
left: 0, backgroundColor: t.atoms.bg.backgroundColor,
width: size, top: 0,
height: size, left: 0,
zIndex: -1, width: size,
pointerEvents: 'none', height: size,
borderRadius: size / 2, zIndex: -1,
opacity: 0, borderRadius: size / 2,
}} opacity: 0,
},
]}
/> />
</View> </View>
) )
src/screens/Messages/components/MessageInputEmbed.tsx
+2 -2
View File
@@ -167,6 +167,7 @@ export function MessageInputEmbed({
content = ( content = (
<View <View
style={[ style={[
a.pointer_events_none,
a.flex_1, a.flex_1,
t.atoms.bg, t.atoms.bg,
t.atoms.border_contrast_low, t.atoms.border_contrast_low,
@@ -174,8 +175,7 @@ export function MessageInputEmbed({
a.border, a.border,
a.p_sm, a.p_sm,
a.mb_sm, a.mb_sm,
]} ]}>
pointerEvents="none">
<PostMeta <PostMeta
showAvatar showAvatar
author={post.author} author={post.author}
src/screens/Profile/Header/DisplayName.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ export function ProfileHeaderDisplayName({
const {gtMobile} = useBreakpoints() const {gtMobile} = useBreakpoints()
return ( return (
<View pointerEvents="none"> <View style={a.pointer_events_none}>
<Text <Text
emoji emoji
testID="profileHeaderDisplayName" testID="profileHeaderDisplayName"
src/screens/Profile/Header/GrowableBanner.tsx
+2 -3
View File
@@ -153,15 +153,14 @@ function GrowableBannerInner({
</Animated.View> </Animated.View>
</Pressable> </Pressable>
<AnimatedBlurView <AnimatedBlurView
pointerEvents="none" style={[a.pointer_events_none, a.absolute, a.inset_0]}
style={[a.absolute, a.inset_0]}
tint="dark" tint="dark"
animatedProps={animatedBlurViewProps} animatedProps={animatedBlurViewProps}
/> />
</Animated.View> </Animated.View>
<View <View
pointerEvents="none"
style={[ style={[
a.pointer_events_none,
a.absolute, a.absolute,
a.inset_0, a.inset_0,
{top: topInset - (IS_IOS ? 15 : 0)}, {top: topInset - (IS_IOS ? 15 : 0)},
src/screens/Profile/Header/Handle.tsx
+11 -2
View File
@@ -23,8 +23,17 @@ export function ProfileHeaderHandle({
const blockHide = profile.viewer?.blocking || profile.viewer?.blockedBy const blockHide = profile.viewer?.blocking || profile.viewer?.blockedBy
return ( return (
<View <View
style={[a.flex_row, a.gap_sm, a.align_center, {maxWidth: '100%'}]} style={[
pointerEvents={disableTaps ? 'none' : IS_IOS ? 'auto' : 'box-none'}> a.flex_row,
a.gap_sm,
a.align_center,
{maxWidth: '100%'},
disableTaps
? a.pointer_events_none
: IS_IOS
? a.pointer_events_auto
: a.pointer_events_box_none,
]}>
<NewskieDialog profile={profile} disabled={disableTaps} /> <NewskieDialog profile={profile} disabled={disableTaps} />
{profile.viewer?.followedBy && !blockHide ? ( {profile.viewer?.followedBy && !blockHide ? (
<View style={[t.atoms.bg_contrast_50, a.rounded_xs, a.px_sm, a.py_xs]}> <View style={[t.atoms.bg_contrast_50, a.rounded_xs, a.px_sm, a.py_xs]}>
src/screens/Profile/Header/Metrics.tsx
+1 -2
View File
@@ -30,8 +30,7 @@ export function ProfileHeaderMetrics({
return ( return (
<View <View
style={[a.flex_row, a.gap_sm, a.align_center]} style={[a.flex_row, a.gap_sm, a.align_center, a.pointer_events_box_none]}>
pointerEvents="box-none">
<InlineLinkText <InlineLinkText
testID="profileHeaderFollowersButton" testID="profileHeaderFollowersButton"
style={[a.flex_row, t.atoms.text]} style={[a.flex_row, t.atoms.text]}
src/screens/Profile/Header/ProfileHeaderLabeler.tsx
+15 -5
View File
@@ -111,11 +111,21 @@ let ProfileHeaderLabeler = ({
hideBackButton={hideBackButton} hideBackButton={hideBackButton}
isPlaceholderProfile={isPlaceholderProfile}> isPlaceholderProfile={isPlaceholderProfile}>
<View <View
style={[a.px_lg, a.pt_md, a.pb_sm]} style={[
pointerEvents={IS_IOS ? 'auto' : 'box-none'}> a.px_lg,
a.pt_md,
a.pb_sm,
IS_IOS ? a.pointer_events_auto : a.pointer_events_box_none,
]}>
<View <View
style={[a.flex_row, a.justify_end, a.align_center, a.gap_xs, a.pb_lg]} style={[
pointerEvents={IS_IOS ? 'auto' : 'box-none'}> a.flex_row,
a.justify_end,
a.align_center,
a.gap_xs,
a.pb_lg,
IS_IOS ? a.pointer_events_auto : a.pointer_events_box_none,
]}>
<HeaderLabelerButtons profile={profile} /> <HeaderLabelerButtons profile={profile} />
</View> </View>
<View style={[a.flex_col, a.gap_2xs, a.pt_2xs, a.pb_md]}> <View style={[a.flex_col, a.gap_2xs, a.pt_2xs, a.pb_md]}>
@@ -126,7 +136,7 @@ let ProfileHeaderLabeler = ({
<> <>
{isSelf && <ProfileHeaderMetrics profile={profile} />} {isSelf && <ProfileHeaderMetrics profile={profile} />}
{descriptionRT && !moderation.ui('profileView').blur ? ( {descriptionRT && !moderation.ui('profileView').blur ? (
<View pointerEvents="auto"> <View style={a.pointer_events_auto}>
<RichText <RichText
testID="profileHeaderDescription" testID="profileHeaderDescription"
style={[a.text_md]} style={[a.text_md]}
src/screens/Profile/Header/ProfileHeaderStandard.tsx
+10 -5
View File
@@ -102,8 +102,13 @@ let ProfileHeaderStandard = ({
hideBackButton={hideBackButton} hideBackButton={hideBackButton}
isPlaceholderProfile={isPlaceholderProfile}> isPlaceholderProfile={isPlaceholderProfile}>
<View <View
style={[a.px_lg, a.pt_md, a.pb_sm, a.overflow_hidden]} style={[
pointerEvents={IS_IOS ? 'auto' : 'box-none'}> a.px_lg,
a.pt_md,
a.pb_sm,
a.overflow_hidden,
IS_IOS ? a.pointer_events_auto : a.pointer_events_box_none,
]}>
<View <View
style={[ style={[
{paddingLeft: 90}, {paddingLeft: 90},
@@ -113,8 +118,8 @@ let ProfileHeaderStandard = ({
a.gap_xs, a.gap_xs,
a.pb_sm, a.pb_sm,
a.flex_wrap, a.flex_wrap,
]} IS_IOS ? a.pointer_events_auto : a.pointer_events_box_none,
pointerEvents={IS_IOS ? 'auto' : 'box-none'}> ]}>
<HeaderStandardButtons <HeaderStandardButtons
profile={profile} profile={profile}
moderation={moderation} moderation={moderation}
@@ -151,7 +156,7 @@ let ProfileHeaderStandard = ({
<View style={a.gap_md}> <View style={a.gap_md}>
<ProfileHeaderMetrics profile={profile} /> <ProfileHeaderMetrics profile={profile} />
{descriptionRT && !moderation.ui('profileView').blur ? ( {descriptionRT && !moderation.ui('profileView').blur ? (
<View pointerEvents="auto"> <View style={a.pointer_events_auto}>
<RichText <RichText
testID="profileHeaderDescription" testID="profileHeaderDescription"
style={[a.text_md]} style={[a.text_md]}
src/screens/Profile/Header/Shell.tsx
+12 -5
View File
@@ -161,10 +161,17 @@ let ProfileHeaderShell = ({
}, [profile.banner, moderation, _openLightbox, bannerRef]) }, [profile.banner, moderation, _openLightbox, bannerRef])
return ( return (
<View style={t.atoms.bg} pointerEvents={IS_IOS ? 'auto' : 'box-none'}> <View
style={[
t.atoms.bg,
IS_IOS ? a.pointer_events_auto : a.pointer_events_box_none,
]}>
<View <View
pointerEvents={IS_IOS ? 'auto' : 'box-none'} style={[
style={[a.relative, {height: 150}]}> a.relative,
{height: 150},
IS_IOS ? a.pointer_events_auto : a.pointer_events_box_none,
]}>
<StatusBarShadow /> <StatusBarShadow />
<GrowableBanner <GrowableBanner
onPress={isPlaceholderProfile ? undefined : onPressBanner} onPress={isPlaceholderProfile ? undefined : onPressBanner}
@@ -238,7 +245,7 @@ let ProfileHeaderShell = ({
a.px_lg, a.px_lg,
a.pt_xs, a.pt_xs,
a.pb_sm, a.pb_sm,
IS_IOS ? a.pointer_events_auto : {pointerEvents: 'box-none'}, IS_IOS ? a.pointer_events_auto : a.pointer_events_box_none,
]} ]}
/> />
) : ( ) : (
@@ -248,7 +255,7 @@ let ProfileHeaderShell = ({
a.px_lg, a.px_lg,
a.pt_xs, a.pt_xs,
a.pb_sm, a.pb_sm,
IS_IOS ? a.pointer_events_auto : {pointerEvents: 'box-none'}, IS_IOS ? a.pointer_events_auto : a.pointer_events_box_none,
]} ]}
/> />
))} ))}
src/screens/Profile/Header/index.tsx
+9 -9
View File
@@ -160,15 +160,8 @@ const MinimalHeader = memo(function MinimalHeader({
return ( return (
<Animated.View <Animated.View
pointerEvents={visible ? 'auto' : 'none'}
aria-hidden={!visible}
accessibilityElementsHidden={!visible}
importantForAccessibility={visible ? 'auto' : 'no-hide-descendants'}
onLayout={evt => {
setMinimalHeaderHeight(evt.nativeEvent.layout.height)
onLayout(evt)
}}
style={[ style={[
visible ? a.pointer_events_auto : a.pointer_events_none,
a.absolute, a.absolute,
a.z_50, a.z_50,
t.atoms.bg, t.atoms.bg,
@@ -179,7 +172,14 @@ const MinimalHeader = memo(function MinimalHeader({
paddingTop: insets.top, paddingTop: insets.top,
}, },
animatedStyle, animatedStyle,
]}> ]}
aria-hidden={!visible}
accessibilityElementsHidden={!visible}
importantForAccessibility={visible ? 'auto' : 'no-hide-descendants'}
onLayout={evt => {
setMinimalHeaderHeight(evt.nativeEvent.layout.height)
onLayout(evt)
}}>
<Header.Outer noBottomBorder> <Header.Outer noBottomBorder>
{hideBackButton ? <Header.MenuButton /> : <Header.BackButton />} {hideBackButton ? <Header.MenuButton /> : <Header.BackButton />}
<Header.Content align="left"> <Header.Content align="left">
src/screens/Settings/components/CopyButton.tsx
+2 -2
View File
@@ -48,14 +48,14 @@ export function CopyButton({
entering={ZoomIn.duration(100)} entering={ZoomIn.duration(100)}
exiting={FadeOutUp.duration(2000)} exiting={FadeOutUp.duration(2000)}
style={[ style={[
a.pointer_events_none,
a.absolute, a.absolute,
{bottom: '100%', right: 0}, {bottom: '100%', right: 0},
a.justify_center, a.justify_center,
a.gap_sm, a.gap_sm,
a.z_10, a.z_10,
a.pb_sm, a.pb_sm,
]} ]}>
pointerEvents="none">
<Text <Text
style={[ style={[
a.font_medium, a.font_medium,
src/screens/StarterPack/StarterPackLandingScreen.tsx
+2 -2
View File
@@ -262,11 +262,11 @@ function LandingScreenLoaded({
<View <View
key={item.subject.did} key={item.subject.did}
style={[ style={[
a.pointer_events_none,
a.py_lg, a.py_lg,
a.px_md, a.px_md,
(!isTabletOrDesktop || i !== 0) && a.border_t, (!isTabletOrDesktop || i !== 0) && a.border_t,
t.atoms.border_contrast_low, t.atoms.border_contrast_low,
{pointerEvents: 'none'},
]}> ]}>
<ProfileCard <ProfileCard
profile={item.subject} profile={item.subject}
@@ -285,7 +285,7 @@ function LandingScreenLoaded({
<View <View
style={[ style={[
{pointerEvents: 'none'}, a.pointer_events_none,
isTabletOrDesktop && [ isTabletOrDesktop && [
a.border, a.border,
a.rounded_md, a.rounded_md,
src/screens/VideoFeed/components/Scrubber.tsx
+2 -2
View File
@@ -171,6 +171,7 @@ export function Scrubber({
)} )}
<Animated.View <Animated.View
style={[ style={[
a.pointer_events_none,
a.absolute, a.absolute,
{ {
left: 0, left: 0,
@@ -178,8 +179,7 @@ export function Scrubber({
bottom: insets.bottom + 80, bottom: insets.bottom + 80,
}, },
timeStyle, timeStyle,
]} ]}>
pointerEvents="none">
<Text style={[a.text_center, a.font_semi_bold]}> <Text style={[a.text_center, a.font_semi_bold]}>
<Text style={[a.text_5xl, {fontVariant: ['tabular-nums']}]}> <Text style={[a.text_5xl, {fontVariant: ['tabular-nums']}]}>
{formatTime(currentSeekTime)} {formatTime(currentSeekTime)}
src/screens/VideoFeed/index.tsx
+2 -2
View File
@@ -917,13 +917,13 @@ function Overlay({
{IS_ANDROID && status === 'loading' && ( {IS_ANDROID && status === 'loading' && (
<View <View
style={[ style={[
a.pointer_events_none,
a.absolute, a.absolute,
a.inset_0, a.inset_0,
a.align_center, a.align_center,
a.justify_center, a.justify_center,
a.z_10, a.z_10,
]} ]}>
pointerEvents="none">
<Loader size="2xl" /> <Loader size="2xl" />
</View> </View>
)} )}
src/view/com/composer/Composer.tsx
+1 -1
View File
@@ -1245,7 +1245,7 @@ function ComposerEmbeds({
<View <View
style={[a.pb_sm, video ? [a.pt_md] : [a.pt_xl], IS_WEB && [a.pb_md]]}> style={[a.pb_sm, video ? [a.pt_md] : [a.pt_xl], IS_WEB && [a.pb_md]]}>
<View style={[a.relative]}> <View style={[a.relative]}>
<View style={{pointerEvents: 'none'}}> <View style={a.pointer_events_none}>
<LazyQuoteEmbed uri={embed.quote.uri} /> <LazyQuoteEmbed uri={embed.quote.uri} />
</View> </View>
{canRemoveQuote && ( {canRemoveQuote && (
src/view/com/composer/ExternalEmbed.tsx
+2 -2
View File
@@ -44,7 +44,7 @@ export const ExternalEmbedGif = ({
return ( return (
<View style={[a.overflow_hidden, t.atoms.border_contrast_medium]}> <View style={[a.overflow_hidden, t.atoms.border_contrast_medium]}>
{linkInfo ? ( {linkInfo ? (
<View style={{pointerEvents: 'auto'}}> <View style={a.pointer_events_auto}>
<ExternalEmbed link={linkInfo} hideAlt /> <ExternalEmbed link={linkInfo} hideAlt />
</View> </View>
) : error ? ( ) : error ? (
@@ -129,7 +129,7 @@ export const ExternalEmbedLink = ({
return ( return (
<View style={[a.mb_xl, a.overflow_hidden, t.atoms.border_contrast_medium]}> <View style={[a.mb_xl, a.overflow_hidden, t.atoms.border_contrast_medium]}>
{linkComponent ? ( {linkComponent ? (
<View style={{pointerEvents: 'none'}}>{linkComponent}</View> <View style={a.pointer_events_none}>{linkComponent}</View>
) : error ? ( ) : error ? (
<Container style={[a.align_start, a.p_md, a.gap_xs]}> <Container style={[a.align_start, a.p_md, a.gap_xs]}>
<Text numberOfLines={1} style={t.atoms.text_contrast_high}> <Text numberOfLines={1} style={t.atoms.text_contrast_high}>
src/view/com/pager/PagerWithHeader.tsx
+8 -4
View File
@@ -23,7 +23,7 @@ import {
type PagerRef, type PagerRef,
type RenderTabBarFnProps, type RenderTabBarFnProps,
} from '#/view/com/pager/Pager' } from '#/view/com/pager/Pager'
import {useTheme} from '#/alf' import {atoms as a, useTheme} from '#/alf'
import {IS_IOS} from '#/env' import {IS_IOS} from '#/env'
import {type ListMethods} from '../util/List' import {type ListMethods} from '../util/List'
import {PagerHeaderProvider} from './PagerHeaderContext' import {PagerHeaderProvider} from './PagerHeaderContext'
@@ -273,11 +273,15 @@ let PagerTabBar = ({
const headerRef = useRef(null) const headerRef = useRef(null)
return ( return (
<Animated.View <Animated.View
pointerEvents={IS_IOS ? 'auto' : 'box-none'} style={[
style={[styles.tabBarMobile, headerTransform, t.atoms.bg]}> IS_IOS ? a.pointer_events_auto : a.pointer_events_box_none,
styles.tabBarMobile,
headerTransform,
t.atoms.bg,
]}>
<View <View
ref={headerRef} ref={headerRef}
pointerEvents={IS_IOS ? 'auto' : 'box-none'} style={IS_IOS ? a.pointer_events_auto : a.pointer_events_box_none}
collapsable={false}> collapsable={false}>
{renderHeader?.({setMinimumHeight: setMinimumHeaderHeight})} {renderHeader?.({setMinimumHeight: setMinimumHeaderHeight})}
{ {
src/view/com/util/LoadingPlaceholder.tsx
+3 -18
View File
@@ -69,12 +69,7 @@ export function PostLoadingPlaceholder({
<View style={[styles.postCtrl, {marginLeft: -6}]}> <View style={[styles.postCtrl, {marginLeft: -6}]}>
<View style={styles.postBtn}> <View style={styles.postBtn}>
<Bubble <Bubble
style={[ style={[{color: t.palette.contrast_500}, a.pointer_events_none]}
{
color: t.palette.contrast_500,
},
{pointerEvents: 'none'},
]}
width={18} width={18}
/> />
</View> </View>
@@ -82,12 +77,7 @@ export function PostLoadingPlaceholder({
<View style={styles.postCtrl}> <View style={styles.postCtrl}>
<View style={styles.postBtn}> <View style={styles.postBtn}>
<Repost <Repost
style={[ style={[{color: t.palette.contrast_500}, a.pointer_events_none]}
{
color: t.palette.contrast_500,
},
{pointerEvents: 'none'},
]}
width={18} width={18}
/> />
</View> </View>
@@ -95,12 +85,7 @@ export function PostLoadingPlaceholder({
<View style={styles.postCtrl}> <View style={styles.postCtrl}>
<View style={styles.postBtn}> <View style={styles.postBtn}>
<HeartIconOutline <HeartIconOutline
style={[ style={[{color: t.palette.contrast_500}, a.pointer_events_none]}
{
color: t.palette.contrast_500,
},
{pointerEvents: 'none'},
]}
width={18} width={18}
/> />
</View> </View>