bump it bop it upgrade it (rn 79/expo 53) (#8281)

* basic bumps

* more tweaking

* fix rn patch

* fix crop picker patch

* fix media library patch

* rm unnecessary patch

* fix notifications patch

* update bottomsheet

* Update withAppDelegateReferrer.js

* Delete withNoBundleCompression.js

* rm withNoBundleCompression plugin

* rm findLast shim

* metro package exports is enabled by default

* update react/react-dom/react-compiler

* fix reanimated issue

* vendor expo-ized emoji popup

* fix types

* hackfix view full thread

* Update EmojiPickerModule.podspec

* more upgrades

* fix multiformats package version

* add baseurl

* bump mmkv

* bumps

* update react-keyed-flatten-children

* bump locale packages

* fix emoji picker dark mode

* rn upgrades

* Revert "bump locale packages"

This reverts commit fc82f0f173.

* upgrade testing-library

* rm test renderer

* update patch name minors

* rm findNodeHandle from tabbar

* only do scrollview tag thing on ios

* disable package exports

* update expo notifications handler

* memoize emoji picker styles

* fix tests, mock multiformats

* bump some dev deps with RC versions

* completely rearchitect toasts

* rm logs

* layout animation config for composer footer

* disable autolinking for patched libs

* undo lingui changes

* version bump from release candidate to 0.1

* update atproto deps

* rm @did-plc/server

* fix key issue (maybe)

* move URL polyfill to the polyfill file

* fix yarn lock

* upgrade to 53.0.3

* reanimated layout anim bug patch

* workletize a function that wasn't getting autoworkletized anymore (#8309)

* bump to expo 53.0.4

* bump RN to 0.79.2

* fix yarn lock ci

* Revert "completely rearchitect toasts"

This reverts commit 2e2fcaeeed.

* final upgrades

* chore: cleanup yarn lock

* prettier

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>
This commit is contained in:
hailey
2025-05-02 13:23:39 -07:00
committed by GitHub
parent 46ea3fdbee
commit 544f7befe0
83 changed files with 3006 additions and 2880 deletions
+38 -36
View File
@@ -118,7 +118,7 @@ import {LazyQuoteEmbed, QuoteX} from '#/view/com/util/post-embeds/QuoteEmbed'
import {Text} from '#/view/com/util/text/Text'
import * as Toast from '#/view/com/util/Toast'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a, native, useTheme} from '#/alf'
import {atoms as a, native, useTheme, web} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {useDialogControl} from '#/components/Dialog'
import {VerifyEmailDialog} from '#/components/dialogs/VerifyEmailDialog'
@@ -1266,39 +1266,41 @@ function ComposerFooter({
a.justify_between,
]}>
<View style={[a.flex_row, a.align_center]}>
{video && video.status !== 'done' ? (
<VideoUploadToolbar state={video} />
) : (
<ToolbarWrapper style={[a.flex_row, a.align_center, a.gap_xs]}>
<SelectPhotoBtn
size={images.length}
disabled={media?.type === 'images' ? isMaxImages : !!media}
onAdd={onImageAdd}
/>
<SelectVideoBtn
onSelectVideo={asset => onSelectVideo(post.id, asset)}
disabled={!!media}
setError={onError}
/>
<OpenCameraBtn
disabled={media?.type === 'images' ? isMaxImages : !!media}
onAdd={onImageAdd}
/>
<SelectGifBtn onSelectGif={onSelectGif} disabled={!!media} />
{!isMobile ? (
<Button
onPress={onEmojiButtonPress}
style={a.p_sm}
label={_(msg`Open emoji picker`)}
accessibilityHint={_(msg`Opens emoji picker`)}
variant="ghost"
shape="round"
color="primary">
<EmojiSmile size="lg" />
</Button>
) : null}
</ToolbarWrapper>
)}
<LayoutAnimationConfig skipEntering skipExiting>
{video && video.status !== 'done' ? (
<VideoUploadToolbar state={video} />
) : (
<ToolbarWrapper style={[a.flex_row, a.align_center, a.gap_xs]}>
<SelectPhotoBtn
size={images.length}
disabled={media?.type === 'images' ? isMaxImages : !!media}
onAdd={onImageAdd}
/>
<SelectVideoBtn
onSelectVideo={asset => onSelectVideo(post.id, asset)}
disabled={!!media}
setError={onError}
/>
<OpenCameraBtn
disabled={media?.type === 'images' ? isMaxImages : !!media}
onAdd={onImageAdd}
/>
<SelectGifBtn onSelectGif={onSelectGif} disabled={!!media} />
{!isMobile ? (
<Button
onPress={onEmojiButtonPress}
style={a.p_sm}
label={_(msg`Open emoji picker`)}
accessibilityHint={_(msg`Opens emoji picker`)}
variant="ghost"
shape="round"
color="primary">
<EmojiSmile size="lg" />
</Button>
) : null}
</ToolbarWrapper>
)}
</LayoutAnimationConfig>
</View>
<View style={[a.flex_row, a.align_center, a.justify_between]}>
{showAddButton && (
@@ -1515,10 +1517,10 @@ const styles = StyleSheet.create({
paddingVertical: 6,
marginLeft: 12,
},
stickyFooterWeb: {
stickyFooterWeb: web({
position: 'sticky',
bottom: 0,
},
}),
errorLine: {
flexDirection: 'row',
alignItems: 'center',
+2 -2
View File
@@ -15,7 +15,7 @@ import {sanitizeHandle} from '#/lib/strings/handles'
import {type ComposerOptsPostRef} from '#/state/shell/composer'
import {MaybeQuoteEmbed} from '#/view/com/util/post-embeds/QuoteEmbed'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a, useTheme} from '#/alf'
import {atoms as a, useTheme, web} from '#/alf'
import {Text} from '#/components/Typography'
import {useSimpleVerificationState} from '#/components/verification'
import {VerificationCheck} from '#/components/verification/VerificationCheck'
@@ -76,7 +76,7 @@ export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) {
a.mx_lg,
a.border_b,
t.atoms.border_contrast_medium,
a.user_select_text,
web(a.user_select_text),
]}
onPress={onPress}
accessibilityRole="button"
+2 -2
View File
@@ -12,7 +12,7 @@ import {useQueryClient} from '@tanstack/react-query'
import {cleanError} from '#/lib/strings/errors'
import {logger} from '#/logger'
import {isNative, isWeb} from '#/platform/detection'
import {isIOS, isNative, isWeb} from '#/platform/detection'
import {usePreferencesQuery} from '#/state/queries/preferences'
import {RQKEY, useProfileFeedgensQuery} from '#/state/queries/profile-feedgens'
import {EmptyState} from '#/view/com/util/EmptyState'
@@ -175,7 +175,7 @@ export const ProfileFeedgens = React.forwardRef<
)
React.useEffect(() => {
if (enabled && scrollElRef.current) {
if (isIOS && enabled && scrollElRef.current) {
const nativeTag = findNodeHandle(scrollElRef.current)
setScrollViewTag(nativeTag)
}
+10 -8
View File
@@ -510,20 +510,22 @@ function LightboxImage({
// This is a bug in Reanimated, but for now we'll work around it like this.
dismissSwipeTranslateY.set(1)
}
dismissSwipeTranslateY.set(() =>
withDecay({
dismissSwipeTranslateY.set(() => {
'worklet'
return withDecay({
velocity: e.velocityY,
velocityFactor: Math.max(3500 / Math.abs(e.velocityY), 1), // Speed up if it's too slow.
deceleration: 1, // Danger! This relies on the reaction below stopping it.
}),
)
})
})
} else {
dismissSwipeTranslateY.set(() =>
withSpring(0, {
dismissSwipeTranslateY.set(() => {
'worklet'
return withSpring(0, {
stiffness: 700,
damping: 50,
}),
)
})
})
}
})
+2 -2
View File
@@ -12,7 +12,7 @@ import {useQueryClient} from '@tanstack/react-query'
import {cleanError} from '#/lib/strings/errors'
import {logger} from '#/logger'
import {isNative, isWeb} from '#/platform/detection'
import {isIOS, isNative, isWeb} from '#/platform/detection'
import {RQKEY, useProfileListsQuery} from '#/state/queries/profile-lists'
import {EmptyState} from '#/view/com/util/EmptyState'
import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
@@ -171,7 +171,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
)
React.useEffect(() => {
if (enabled && scrollElRef.current) {
if (isIOS && enabled && scrollElRef.current) {
const nativeTag = findNodeHandle(scrollElRef.current)
setScrollViewTag(nativeTag)
}
+16 -7
View File
@@ -1,16 +1,25 @@
import React, {ComponentProps} from 'react'
import {type ComponentPropsWithRef} from 'react'
import {ScrollView} from 'react-native'
import {useDraggableScroll} from '#/lib/hooks/useDraggableScrollView'
import {atoms as a, web} from '#/alf'
export const DraggableScrollView = React.forwardRef<
ScrollView,
ComponentProps<typeof ScrollView>
>(function DraggableScrollView(props, ref) {
export function DraggableScrollView({
ref,
style,
...props
}: ComponentPropsWithRef<typeof ScrollView>) {
const {refs} = useDraggableScroll<ScrollView>({
outerRef: ref,
cursor: 'grab', // optional, default
})
return <ScrollView ref={refs} horizontal {...props} />
})
return (
<ScrollView
ref={refs}
style={[style, web(a.user_select_none)]}
horizontal
{...props}
/>
)
}
+23 -6
View File
@@ -1,11 +1,16 @@
import {useCallback} from 'react'
import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native'
import {
type LayoutChangeEvent,
ScrollView,
StyleSheet,
View,
} from 'react-native'
import Animated, {
interpolate,
runOnJS,
runOnUI,
scrollTo,
SharedValue,
type SharedValue,
useAnimatedReaction,
useAnimatedRef,
useAnimatedStyle,
@@ -267,15 +272,27 @@ export function TabBar({
{
translateX: interpolate(
dragProgress.get(),
layoutsValue.map((l, i) => i),
layoutsValue.map(l => l.x + l.width / 2 - contentSize.get() / 2),
layoutsValue.map((l, i) => {
'worklet'
return i
}),
layoutsValue.map(l => {
'worklet'
return l.x + l.width / 2 - contentSize.get() / 2
}),
),
},
{
scaleX: interpolate(
dragProgress.get(),
textLayoutsValue.map((l, i) => i),
textLayoutsValue.map((l, i) => getScaleX(i)),
textLayoutsValue.map((l, i) => {
'worklet'
return i
}),
textLayoutsValue.map((l, i) => {
'worklet'
return getScaleX(i)
}),
),
},
],
+4 -4
View File
@@ -1,7 +1,7 @@
import {useCallback, useEffect, useRef} from 'react'
import {ScrollView, StyleSheet, View} from 'react-native'
import {type ScrollView, StyleSheet, View} from 'react-native'
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
import {Text} from '#/components/Typography'
import {PressableWithHover} from '../util/PressableWithHover'
import {DraggableScrollView} from './DraggableScrollView'
@@ -161,7 +161,7 @@ const desktopStyles = StyleSheet.create({
},
itemInner: {
alignItems: 'center',
overflowX: 'hidden',
...web({overflowX: 'hidden'}),
},
itemText: {
textAlign: 'center',
@@ -204,7 +204,7 @@ const mobileStyles = StyleSheet.create({
itemInner: {
flexGrow: 1,
alignItems: 'center',
overflowX: 'hidden',
...web({overflowX: 'hidden'}),
},
itemText: {
textAlign: 'center',
+5 -2
View File
@@ -2,7 +2,8 @@ import React from 'react'
import {StyleSheet, View} from 'react-native'
import Svg, {Circle, Line} from 'react-native-svg'
import {AtUri} from '@atproto/api'
import {Trans} from '@lingui/macro'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {usePalette} from '#/lib/hooks/usePalette'
import {makeProfileLink} from '#/lib/routes/links'
@@ -22,6 +23,7 @@ export function ViewFullThread({uri}: {uri: string}) {
const urip = new AtUri(uri)
return makeProfileLink({did: urip.hostname, handle: ''}, 'post', urip.rkey)
}, [uri])
const {_} = useLingui()
return (
<Link
@@ -53,7 +55,8 @@ export function ViewFullThread({uri}: {uri: string}) {
</View>
<Text type="md" style={[pal.link, {paddingTop: 18, paddingBottom: 4}]}>
<Trans>View full thread</Trans>
{/* HACKFIX: Trans isn't working after SDK 53 upgrade -sfn */}
{_(msg`View full thread`)}
</Text>
</Link>
)
+1 -1
View File
@@ -19,7 +19,7 @@ import RootSiblings from 'react-native-root-siblings'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {
FontAwesomeIcon,
Props as FontAwesomeProps,
type Props as FontAwesomeProps,
} from '@fortawesome/react-native-fontawesome'
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
+4 -3
View File
@@ -2,13 +2,14 @@
* Note: the dataSet properties are used to leverage custom CSS in public/index.html
*/
import React, {useEffect, useState} from 'react'
import {useEffect, useState} from 'react'
import {Pressable, StyleSheet, Text, View} from 'react-native'
import {
FontAwesomeIcon,
FontAwesomeIconStyle,
Props as FontAwesomeProps,
type FontAwesomeIconStyle,
type Props as FontAwesomeProps,
} from '@fortawesome/react-native-fontawesome'
import type React from 'react'
const DURATION = 3500
@@ -239,7 +239,6 @@ const getKey = (label: string, index: number, id?: string) => {
return `${label}_${index}`
}
// @ts-expect-error - web only styles. the only style that should be broken here is `outline`
const styles = StyleSheet.create({
separator: {
height: 1,
@@ -264,7 +263,6 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
alignItems: 'center',
columnGap: 20,
// @ts-ignore -web
cursor: 'pointer',
paddingTop: 8,
paddingBottom: 8,
@@ -273,6 +271,7 @@ const styles = StyleSheet.create({
borderRadius: 8,
fontFamily:
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif',
// @ts-expect-error web only
outline: 0,
border: 0,
},
@@ -12,9 +12,8 @@ import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {clamp} from '#/lib/numbers'
import {useGate} from '#/lib/statsig/statsig'
import {colors} from '#/lib/styles'
import {isWeb} from '#/platform/detection'
import {useSession} from '#/state/session'
import {useLayoutBreakpoints} from '#/alf'
import {atoms as a, useLayoutBreakpoints} from '#/alf'
export function LoadLatestBtn({
onPress,
@@ -80,7 +79,7 @@ export function LoadLatestBtn({
const styles = StyleSheet.create({
loadLatest: {
zIndex: 20,
position: isWeb ? 'fixed' : 'absolute',
...a.fixed,
left: 18,
borderWidth: StyleSheet.hairlineWidth,
width: 52,