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 commitfc82f0f173. * 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 commit2e2fcaeeed. * final upgrades * chore: cleanup yarn lock * prettier --------- Co-authored-by: Samuel Newman <mozzius@protonmail.com>
This commit is contained in:
@@ -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',
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
}),
|
||||
)
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
}),
|
||||
),
|
||||
},
|
||||
],
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user