Upgrade to Expo 49 (#1331)

* update to expo 49

* update expo-camera to fix console erorrs

* run doctor again

* fix ts errors

* patch @sentry/react-native

Getting `cannot read property 'ignoreLogs' of undefined` in this file.
Ironically, this may be a cyclical imports problem. LogBox isn't enabled
in production, so this patch should only affect dev/test.

* fix type error

* reinstall newer reanimated

* pin expo-dev-client to fix reanimated dev-build issue

* fix type errors, fix bad conflict res

* Fix to notifications badge z-index on desktop

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>
zio/stable
Eric Bailey 2023-09-05 14:23:22 -05:00 committed by GitHub
parent 9a3fa512eb
commit e3e91816d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 1133 additions and 1768 deletions

View File

@ -29,7 +29,7 @@
"@braintree/sanitize-url": "^6.0.2", "@braintree/sanitize-url": "^6.0.2",
"@emoji-mart/react": "^1.1.1", "@emoji-mart/react": "^1.1.1",
"@expo/html-elements": "^0.4.2", "@expo/html-elements": "^0.4.2",
"@expo/webpack-config": "^18.0.1", "@expo/webpack-config": "^19.0.0",
"@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-regular-svg-icons": "^6.1.1", "@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1",
@ -37,11 +37,11 @@
"@gorhom/bottom-sheet": "^4.4.7", "@gorhom/bottom-sheet": "^4.4.7",
"@mattermost/react-native-paste-input": "^0.6.4", "@mattermost/react-native-paste-input": "^0.6.4",
"@miblanchard/react-native-slider": "^2.3.1", "@miblanchard/react-native-slider": "^2.3.1",
"@react-native-async-storage/async-storage": "^1.17.6", "@react-native-async-storage/async-storage": "1.18.2",
"@react-native-camera-roll/camera-roll": "^5.2.2", "@react-native-camera-roll/camera-roll": "^5.2.2",
"@react-native-clipboard/clipboard": "^1.10.0", "@react-native-clipboard/clipboard": "^1.10.0",
"@react-native-community/blur": "^4.3.0", "@react-native-community/blur": "^4.3.0",
"@react-native-community/datetimepicker": "6.7.3", "@react-native-community/datetimepicker": "7.2.0",
"@react-native-menu/menu": "^0.8.0", "@react-native-menu/menu": "^0.8.0",
"@react-navigation/bottom-tabs": "^6.5.7", "@react-navigation/bottom-tabs": "^6.5.7",
"@react-navigation/drawer": "^6.6.2", "@react-navigation/drawer": "^6.6.2",
@ -51,7 +51,7 @@
"@segment/analytics-react": "^1.0.0-rc1", "@segment/analytics-react": "^1.0.0-rc1",
"@segment/analytics-react-native": "^2.10.1", "@segment/analytics-react-native": "^2.10.1",
"@segment/sovran-react-native": "^0.4.5", "@segment/sovran-react-native": "^0.4.5",
"@sentry/react-native": "4.13.0", "@sentry/react-native": "5.5.0",
"@tiptap/core": "^2.0.0-beta.220", "@tiptap/core": "^2.0.0-beta.220",
"@tiptap/extension-document": "^2.0.0-beta.220", "@tiptap/extension-document": "^2.0.0-beta.220",
"@tiptap/extension-hard-break": "^2.0.3", "@tiptap/extension-hard-break": "^2.0.3",
@ -71,24 +71,24 @@
"email-validator": "^2.0.4", "email-validator": "^2.0.4",
"emoji-mart": "^5.5.2", "emoji-mart": "^5.5.2",
"eventemitter3": "^5.0.1", "eventemitter3": "^5.0.1",
"expo": "~48.0.18", "expo": "^49.0.8",
"expo-application": "~5.1.1", "expo-application": "~5.3.0",
"expo-build-properties": "~0.5.1", "expo-build-properties": "~0.8.3",
"expo-camera": "~13.2.1", "expo-camera": "13.5.1",
"expo-constants": "~14.2.1", "expo-constants": "~14.4.2",
"expo-dev-client": "~2.1.1", "expo-dev-client": "2.4.7",
"expo-device": "~5.2.1", "expo-device": "~5.4.0",
"expo-image": "^1.2.3", "expo-image": "~1.3.2",
"expo-image-manipulator": "^11.1.1", "expo-image-manipulator": "~11.3.0",
"expo-image-picker": "^14.1.1", "expo-image-picker": "~14.3.2",
"expo-localization": "~14.1.1", "expo-localization": "~14.3.0",
"expo-media-library": "~15.2.3", "expo-media-library": "~15.4.1",
"expo-notifications": "~0.18.1", "expo-notifications": "~0.20.1",
"expo-sharing": "~11.2.2", "expo-sharing": "~11.5.0",
"expo-splash-screen": "~0.18.2", "expo-splash-screen": "~0.20.5",
"expo-status-bar": "~1.4.4", "expo-status-bar": "~1.6.0",
"expo-system-ui": "~2.2.1", "expo-system-ui": "~2.4.0",
"expo-updates": "~0.16.4", "expo-updates": "~0.18.12",
"fast-text-encoding": "^1.0.6", "fast-text-encoding": "^1.0.6",
"graphemer": "^1.4.0", "graphemer": "^1.4.0",
"history": "^5.3.0", "history": "^5.3.0",
@ -113,7 +113,7 @@
"react-avatar-editor": "^13.0.0", "react-avatar-editor": "^13.0.0",
"react-circular-progressbar": "^2.1.0", "react-circular-progressbar": "^2.1.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-native": "0.71.8", "react-native": "0.72.4",
"react-native-appstate-hook": "^1.0.6", "react-native-appstate-hook": "^1.0.6",
"react-native-draggable-flatlist": "^4.0.1", "react-native-draggable-flatlist": "^4.0.1",
"react-native-drawer-layout": "^3.2.0", "react-native-drawer-layout": "^3.2.0",
@ -129,18 +129,18 @@
"react-native-progress": "bluesky-social/react-native-progress", "react-native-progress": "bluesky-social/react-native-progress",
"react-native-reanimated": "^3.4.2", "react-native-reanimated": "^3.4.2",
"react-native-root-siblings": "^4.1.1", "react-native-root-siblings": "^4.1.1",
"react-native-safe-area-context": "^4.4.1", "react-native-safe-area-context": "4.6.3",
"react-native-screens": "^3.20.0", "react-native-screens": "~3.22.0",
"react-native-splash-screen": "^3.3.0", "react-native-splash-screen": "^3.3.0",
"react-native-svg": "13.4.0", "react-native-svg": "13.9.0",
"react-native-url-polyfill": "^1.3.0", "react-native-url-polyfill": "^1.3.0",
"react-native-uuid": "^2.0.1", "react-native-uuid": "^2.0.1",
"react-native-version-number": "^0.3.6", "react-native-version-number": "^0.3.6",
"react-native-web": "^0.18.11", "react-native-web": "~0.19.6",
"react-native-web-linear-gradient": "^1.1.2", "react-native-web-linear-gradient": "^1.1.2",
"react-responsive": "^9.0.2", "react-responsive": "^9.0.2",
"rn-fetch-blob": "^0.12.0", "rn-fetch-blob": "^0.12.0",
"sentry-expo": "~6.1.0", "sentry-expo": "~7.0.0",
"tippy.js": "^6.3.7", "tippy.js": "^6.3.7",
"tlds": "^1.234.0", "tlds": "^1.234.0",
"zeego": "^1.6.2", "zeego": "^1.6.2",
@ -169,7 +169,6 @@
"@types/lodash.set": "^4.3.7", "@types/lodash.set": "^4.3.7",
"@types/lodash.shuffle": "^4.2.7", "@types/lodash.shuffle": "^4.2.7",
"@types/react-avatar-editor": "^13.0.0", "@types/react-avatar-editor": "^13.0.0",
"@types/react-native": "^0.67.3",
"@types/react-responsive": "^8.0.5", "@types/react-responsive": "^8.0.5",
"@types/react-test-renderer": "^17.0.1", "@types/react-test-renderer": "^17.0.1",
"@typescript-eslint/eslint-plugin": "^5.48.2", "@typescript-eslint/eslint-plugin": "^5.48.2",
@ -187,7 +186,7 @@
"husky": "^8.0.3", "husky": "^8.0.3",
"is-ci": "^3.0.1", "is-ci": "^3.0.1",
"jest": "^29.4.3", "jest": "^29.4.3",
"jest-expo": "^48.0.2", "jest-expo": "^49.0.0",
"jest-junit": "^15.0.0", "jest-junit": "^15.0.0",
"lint-staged": "^13.2.3", "lint-staged": "^13.2.3",
"metro-react-native-babel-preset": "^0.73.7", "metro-react-native-babel-preset": "^0.73.7",
@ -197,7 +196,7 @@
"react-scripts": "^5.0.1", "react-scripts": "^5.0.1",
"react-test-renderer": "18.2.0", "react-test-renderer": "18.2.0",
"ts-node": "^10.9.1", "ts-node": "^10.9.1",
"typescript": "^4.4.4", "typescript": "^5.1.3",
"url-loader": "^4.1.1", "url-loader": "^4.1.1",
"webpack": "^5.75.0", "webpack": "^5.75.0",
"webpack-cli": "^5.0.1", "webpack-cli": "^5.0.1",

View File

@ -0,0 +1,14 @@
diff --git a/node_modules/@sentry/react-native/dist/js/utils/ignorerequirecyclelogs.js b/node_modules/@sentry/react-native/dist/js/utils/ignorerequirecyclelogs.js
index 7e0b4cd..3fd7406 100644
--- a/node_modules/@sentry/react-native/dist/js/utils/ignorerequirecyclelogs.js
+++ b/node_modules/@sentry/react-native/dist/js/utils/ignorerequirecyclelogs.js
@@ -3,6 +3,8 @@ import { LogBox } from 'react-native';
* This is a workaround for using fetch on RN, this is a known issue in react-native and only generates a warning.
*/
export function ignoreRequireCycleLogs() {
- LogBox.ignoreLogs(['Require cycle:']);
+ try {
+ LogBox.ignoreLogs(['Require cycle:']);
+ } catch (e) {}
}
//# sourceMappingURL=ignorerequirecyclelogs.js.map

View File

@ -1,16 +1,7 @@
diff --git a/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m b/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m diff --git a/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m b/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m
index 1c8f8e0..090bda5 100644 index 9dca6a5..090bda5 100644
--- a/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m --- a/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m
+++ b/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m +++ b/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m
@@ -256,7 +256,7 @@ static void *TextFieldSelectionObservingContext = &TextFieldSelectionObservingCo
- (void)textViewDidChange:(__unused UITextView *)textView
{
- if (_ignoreNextTextInputCall) {
+ if (_ignoreNextTextInputCall && [_lastStringStateWasUpdatedWith isEqual:_backedTextInputView.attributedText]) {
_ignoreNextTextInputCall = NO;
return;
}
@@ -266,11 +266,10 @@ static void *TextFieldSelectionObservingContext = &TextFieldSelectionObservingCo @@ -266,11 +266,10 @@ static void *TextFieldSelectionObservingContext = &TextFieldSelectionObservingCo
- (void)textViewDidChangeSelection:(__unused UITextView *)textView - (void)textViewDidChangeSelection:(__unused UITextView *)textView
@ -23,4 +14,4 @@ index 1c8f8e0..090bda5 100644
- _lastStringStateWasUpdatedWith = _backedTextInputView.attributedText; - _lastStringStateWasUpdatedWith = _backedTextInputView.attributedText;
[self textViewProbablyDidChangeSelection]; [self textViewProbablyDidChangeSelection];
} }

View File

@ -13,6 +13,7 @@ Sentry.init({
enableInExpoDevelopment: false, // if true, Sentry will try to send events/errors in development mode. enableInExpoDevelopment: false, // if true, Sentry will try to send events/errors in development mode.
debug: false, // If `true`, Sentry will try to print out useful debugging information if something goes wrong with sending the event. Set it to `false` in production debug: false, // If `true`, Sentry will try to print out useful debugging information if something goes wrong with sending the event. Set it to `false` in production
environment: __DEV__ ? 'development' : 'production', // Set the environment environment: __DEV__ ? 'development' : 'production', // Set the environment
// @ts-ignore exists but not in types, see https://docs.sentry.io/platforms/react-native/configuration/options/#enableAutoPerformanceTracking
enableAutoPerformanceTracking: true, // Enable auto performance tracking enableAutoPerformanceTracking: true, // Enable auto performance tracking
tracesSampleRate: 0.5, // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring. // TODO: this might be too much in production tracesSampleRate: 0.5, // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring. // TODO: this might be too much in production
_experiments: { _experiments: {

View File

@ -90,6 +90,7 @@ const styles = StyleSheet.create({
containerInner: { containerInner: {
height: '100%', height: '100%',
justifyContent: 'center', justifyContent: 'center',
// @ts-ignore web only
paddingBottom: '20vh', paddingBottom: '20vh',
paddingHorizontal: 20, paddingHorizontal: 20,
}, },

View File

@ -242,6 +242,7 @@ const styles = StyleSheet.create({
overflow: 'hidden', overflow: 'hidden',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
// @ts-ignore only rendered on web
maxWidth: '400px', maxWidth: '400px',
}, },
description: { description: {

View File

@ -145,7 +145,9 @@ const styles = StyleSheet.create({
}, },
container: { container: {
width: 500, width: 500,
// @ts-ignore web only
maxWidth: '100vw', maxWidth: '100vw',
// @ts-ignore web only
maxHeight: '100vh', maxHeight: '100vh',
paddingVertical: 20, paddingVertical: 20,
paddingHorizontal: 24, paddingHorizontal: 24,

View File

@ -54,6 +54,7 @@ export function Component({}: {}) {
style={[ style={[
pal.view, pal.view,
styles.container, styles.container,
// @ts-ignore vh is web only
isMobile isMobile
? { ? {
paddingTop: 20, paddingTop: 20,

View File

@ -55,6 +55,7 @@ export const Component = observer(() => {
style={[ style={[
pal.view, pal.view,
styles.container, styles.container,
// @ts-ignore vh is on web only
isMobile isMobile
? { ? {
paddingTop: 20, paddingTop: 20,

View File

@ -36,7 +36,7 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
ref, ref,
) => { ) => {
const [selectedPage, setSelectedPage] = React.useState(0) const [selectedPage, setSelectedPage] = React.useState(0)
const pagerView = React.useRef<PagerView>() const pagerView = React.useRef<PagerView>(null)
React.useImperativeHandle(ref, () => ({ React.useImperativeHandle(ref, () => ({
setPage: (index: number) => pagerView.current?.setPage(index), setPage: (index: number) => pagerView.current?.setPage(index),

View File

@ -1,5 +1,11 @@
import React from 'react' import React from 'react'
import {StyleSheet, StyleProp, View, ViewStyle} from 'react-native' import {
StyleSheet,
StyleProp,
View,
ViewStyle,
DimensionValue,
} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {HeartIcon} from 'lib/icons' import {HeartIcon} from 'lib/icons'
import {s} from 'lib/styles' import {s} from 'lib/styles'
@ -11,8 +17,8 @@ export function LoadingPlaceholder({
height, height,
style, style,
}: { }: {
width: string | number width: DimensionValue
height: string | number height: DimensionValue
style?: StyleProp<ViewStyle> style?: StyleProp<ViewStyle>
}) { }) {
const theme = useTheme() const theme = useTheme()

View File

@ -4,7 +4,10 @@
import React, {useState, useEffect} from 'react' import React, {useState, useEffect} from 'react'
import {StyleSheet, Text, View} from 'react-native' import {StyleSheet, Text, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {
FontAwesomeIcon,
FontAwesomeIconStyle,
} from '@fortawesome/react-native-fontawesome'
const DURATION = 3500 const DURATION = 3500
@ -32,7 +35,11 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
<> <>
{activeToast && ( {activeToast && (
<View style={styles.container}> <View style={styles.container}>
<FontAwesomeIcon icon="check" size={24} style={styles.icon} /> <FontAwesomeIcon
icon="check"
size={24}
style={styles.icon as FontAwesomeIconStyle}
/>
<Text style={styles.text}>{activeToast.text}</Text> <Text style={styles.text}>{activeToast.text}</Text>
</View> </View>
)} )}
@ -57,6 +64,7 @@ const styles = StyleSheet.create({
position: 'absolute', position: 'absolute',
left: 20, left: 20,
bottom: 20, bottom: 20,
// @ts-ignore web only
width: 'calc(100% - 40px)', width: 'calc(100% - 40px)',
maxWidth: 350, maxWidth: 350,
padding: 20, padding: 20,

View File

@ -118,6 +118,7 @@ const styles = StyleSheet.create({
contentContainer: { contentContainer: {
borderLeftWidth: 1, borderLeftWidth: 1,
borderRightWidth: 1, borderRightWidth: 1,
// @ts-ignore web only
minHeight: '100vh', minHeight: '100vh',
}, },
container: { container: {
@ -133,6 +134,7 @@ const styles = StyleSheet.create({
marginRight: 'auto', marginRight: 'auto',
}, },
fixedHeight: { fixedHeight: {
// @ts-ignore web only
height: '100vh', height: '100vh',
}, },
stableGutters: { stableGutters: {

View File

@ -60,6 +60,7 @@ export const LoggedOutLayout = ({
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flexDirection: 'row', flexDirection: 'row',
// @ts-ignore web only
height: '100vh', height: '100vh',
}, },
side: { side: {

View File

@ -74,6 +74,7 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
position: 'absolute', position: 'absolute',
// @ts-ignore web only
left: '50vw', left: '50vw',
// @ts-ignore web only -prf // @ts-ignore web only -prf
transform: 'translateX(-282px)', transform: 'translateX(-282px)',
@ -92,6 +93,7 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
position: 'absolute', position: 'absolute',
// @ts-ignore web only
left: '50vw', left: '50vw',
// @ts-ignore web only -prf // @ts-ignore web only -prf
transform: 'translateX(-50%)', transform: 'translateX(-50%)',

View File

@ -246,6 +246,7 @@ const styles = StyleSheet.create({
desktopContainer: { desktopContainer: {
borderLeftWidth: 1, borderLeftWidth: 1,
borderRightWidth: 1, borderRightWidth: 1,
// @ts-ignore only rendered on web
minHeight: '100vh', minHeight: '100vh',
}, },
empty: { empty: {

View File

@ -76,11 +76,13 @@ const styles = StyleSheet.create({
borderRadius: 8, borderRadius: 8,
marginBottom: 0, marginBottom: 0,
borderWidth: 1, borderWidth: 1,
// @ts-ignore web only
maxHeight: 'calc(100% - (40px * 2))', maxHeight: 'calc(100% - (40px * 2))',
}, },
containerMobile: { containerMobile: {
borderRadius: 0, borderRadius: 0,
marginBottom: BOTTOM_BAR_HEIGHT, marginBottom: BOTTOM_BAR_HEIGHT,
// @ts-ignore web only
maxHeight: `calc(100% - ${BOTTOM_BAR_HEIGHT}px)`, maxHeight: `calc(100% - ${BOTTOM_BAR_HEIGHT}px)`,
}, },
}) })

View File

@ -367,8 +367,10 @@ const styles = StyleSheet.create({
leftNav: { leftNav: {
position: 'absolute', position: 'absolute',
top: 10, top: 10,
// @ts-ignore web only
right: 'calc(50vw + 312px)', right: 'calc(50vw + 312px)',
width: 220, width: 220,
// @ts-ignore web only
maxHeight: 'calc(100vh - 10px)', maxHeight: 'calc(100vh - 10px)',
overflowY: 'auto', overflowY: 'auto',
}, },
@ -413,6 +415,7 @@ const styles = StyleSheet.create({
width: 28, width: 28,
height: 28, height: 28,
marginTop: 2, marginTop: 2,
zIndex: 1,
}, },
navItemIconWrapperTablet: { navItemIconWrapperTablet: {
width: 40, width: 40,

View File

@ -120,6 +120,7 @@ const styles = StyleSheet.create({
rightNav: { rightNav: {
position: 'absolute', position: 'absolute',
top: 20, top: 20,
// @ts-ignore web only
left: 'calc(50vw + 310px)', left: 'calc(50vw + 310px)',
width: 304, width: 304,
}, },

View File

@ -1,7 +1,12 @@
import React from 'react' import React from 'react'
import {observer} from 'mobx-react-lite' import {observer} from 'mobx-react-lite'
import {StatusBar} from 'expo-status-bar' import {StatusBar} from 'expo-status-bar'
import {StyleSheet, useWindowDimensions, View} from 'react-native' import {
DimensionValue,
StyleSheet,
useWindowDimensions,
View,
} from 'react-native'
import {useSafeAreaInsets} from 'react-native-safe-area-context' import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {Drawer} from 'react-native-drawer-layout' import {Drawer} from 'react-native-drawer-layout'
import {useNavigationState} from '@react-navigation/native' import {useNavigationState} from '@react-navigation/native'
@ -25,7 +30,7 @@ const ShellInner = observer(() => {
const winDim = useWindowDimensions() const winDim = useWindowDimensions()
const safeAreaInsets = useSafeAreaInsets() const safeAreaInsets = useSafeAreaInsets()
const containerPadding = React.useMemo( const containerPadding = React.useMemo(
() => ({height: '100%', paddingTop: safeAreaInsets.top}), () => ({height: '100%' as DimensionValue, paddingTop: safeAreaInsets.top}),
[safeAreaInsets], [safeAreaInsets],
) )
const renderDrawerContent = React.useCallback(() => <DrawerContent />, []) const renderDrawerContent = React.useCallback(() => <DrawerContent />, [])

2759
yarn.lock

File diff suppressed because it is too large Load Diff