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>

17 files changed, 46 insertions, 8 deletions

diff --git a/src/lib/sentry.ts b/src/lib/sentry.ts
index 5448415ff..b7f04854d 100644
--- a/src/lib/sentry.ts
+++ b/src/lib/sentry.ts
@@ -13,6 +13,7 @@ Sentry.init({
   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
   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
   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: {
diff --git a/src/view/com/auth/SplashScreen.web.tsx b/src/view/com/auth/SplashScreen.web.tsx
index 22b328582..3c949bb9a 100644
--- a/src/view/com/auth/SplashScreen.web.tsx
+++ b/src/view/com/auth/SplashScreen.web.tsx
@@ -90,6 +90,7 @@ const styles = StyleSheet.create({
   containerInner: {
     height: '100%',
     justifyContent: 'center',
+    // @ts-ignore web only
     paddingBottom: '20vh',
     paddingHorizontal: 20,
   },
diff --git a/src/view/com/modals/DeleteAccount.tsx b/src/view/com/modals/DeleteAccount.tsx
index 98482457c..50a4cd603 100644
--- a/src/view/com/modals/DeleteAccount.tsx
+++ b/src/view/com/modals/DeleteAccount.tsx
@@ -242,6 +242,7 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
+    // @ts-ignore only rendered on web
     maxWidth: '400px',
   },
   description: {
diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx
index b3a79221d..86fa28faf 100644
--- a/src/view/com/modals/Modal.web.tsx
+++ b/src/view/com/modals/Modal.web.tsx
@@ -145,7 +145,9 @@ const styles = StyleSheet.create({
   },
   container: {
     width: 500,
+    // @ts-ignore web only
     maxWidth: '100vw',
+    // @ts-ignore web only
     maxHeight: '100vh',
     paddingVertical: 20,
     paddingHorizontal: 24,
diff --git a/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx b/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx
index e577991c5..910522f90 100644
--- a/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx
+++ b/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx
@@ -54,6 +54,7 @@ export function Component({}: {}) {
       style={[
         pal.view,
         styles.container,
+        // @ts-ignore vh is web only
         isMobile
           ? {
               paddingTop: 20,
diff --git a/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx b/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx
index c80f8731c..1ee5c9d1f 100644
--- a/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx
+++ b/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx
@@ -55,6 +55,7 @@ export const Component = observer(() => {
       style={[
         pal.view,
         styles.container,
+        // @ts-ignore vh is on web only
         isMobile
           ? {
               paddingTop: 20,
diff --git a/src/view/com/pager/Pager.tsx b/src/view/com/pager/Pager.tsx
index e2c8bf6d2..ad271da33 100644
--- a/src/view/com/pager/Pager.tsx
+++ b/src/view/com/pager/Pager.tsx
@@ -36,7 +36,7 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
     ref,
   ) => {
     const [selectedPage, setSelectedPage] = React.useState(0)
-    const pagerView = React.useRef<PagerView>()
+    const pagerView = React.useRef<PagerView>(null)
 
     React.useImperativeHandle(ref, () => ({
       setPage: (index: number) => pagerView.current?.setPage(index),
diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx
index 2f653ee09..bf39fd50c 100644
--- a/src/view/com/util/LoadingPlaceholder.tsx
+++ b/src/view/com/util/LoadingPlaceholder.tsx
@@ -1,5 +1,11 @@
 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 {HeartIcon} from 'lib/icons'
 import {s} from 'lib/styles'
@@ -11,8 +17,8 @@ export function LoadingPlaceholder({
   height,
   style,
 }: {
-  width: string | number
-  height: string | number
+  width: DimensionValue
+  height: DimensionValue
   style?: StyleProp<ViewStyle>
 }) {
   const theme = useTheme()
diff --git a/src/view/com/util/Toast.web.tsx b/src/view/com/util/Toast.web.tsx
index cfde68536..c295bad69 100644
--- a/src/view/com/util/Toast.web.tsx
+++ b/src/view/com/util/Toast.web.tsx
@@ -4,7 +4,10 @@
 
 import React, {useState, useEffect} from 'react'
 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
 
@@ -32,7 +35,11 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
     <>
       {activeToast && (
         <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>
         </View>
       )}
@@ -57,6 +64,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     left: 20,
     bottom: 20,
+    // @ts-ignore web only
     width: 'calc(100% - 40px)',
     maxWidth: 350,
     padding: 20,
diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx
index 58a367f20..bbd9ce04a 100644
--- a/src/view/com/util/Views.web.tsx
+++ b/src/view/com/util/Views.web.tsx
@@ -118,6 +118,7 @@ const styles = StyleSheet.create({
   contentContainer: {
     borderLeftWidth: 1,
     borderRightWidth: 1,
+    // @ts-ignore web only
     minHeight: '100vh',
   },
   container: {
@@ -133,6 +134,7 @@ const styles = StyleSheet.create({
     marginRight: 'auto',
   },
   fixedHeight: {
+    // @ts-ignore web only
     height: '100vh',
   },
   stableGutters: {
diff --git a/src/view/com/util/layouts/LoggedOutLayout.tsx b/src/view/com/util/layouts/LoggedOutLayout.tsx
index daa33cece..9424a7154 100644
--- a/src/view/com/util/layouts/LoggedOutLayout.tsx
+++ b/src/view/com/util/layouts/LoggedOutLayout.tsx
@@ -60,6 +60,7 @@ export const LoggedOutLayout = ({
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
+    // @ts-ignore web only
     height: '100vh',
   },
   side: {
diff --git a/src/view/com/util/load-latest/LoadLatestBtn.web.tsx b/src/view/com/util/load-latest/LoadLatestBtn.web.tsx
index c9576e56b..83c696f7e 100644
--- a/src/view/com/util/load-latest/LoadLatestBtn.web.tsx
+++ b/src/view/com/util/load-latest/LoadLatestBtn.web.tsx
@@ -74,6 +74,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     position: 'absolute',
+    // @ts-ignore web only
     left: '50vw',
     // @ts-ignore web only -prf
     transform: 'translateX(-282px)',
@@ -92,6 +93,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     position: 'absolute',
+    // @ts-ignore web only
     left: '50vw',
     // @ts-ignore web only -prf
     transform: 'translateX(-50%)',
diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx
index 5055ee76f..dc9c253cb 100644
--- a/src/view/screens/SavedFeeds.tsx
+++ b/src/view/screens/SavedFeeds.tsx
@@ -246,6 +246,7 @@ const styles = StyleSheet.create({
   desktopContainer: {
     borderLeftWidth: 1,
     borderRightWidth: 1,
+    // @ts-ignore only rendered on web
     minHeight: '100vh',
   },
   empty: {
diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx
index e8f7908c2..b32ba90c4 100644
--- a/src/view/shell/Composer.web.tsx
+++ b/src/view/shell/Composer.web.tsx
@@ -76,11 +76,13 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     marginBottom: 0,
     borderWidth: 1,
+    // @ts-ignore web only
     maxHeight: 'calc(100% - (40px * 2))',
   },
   containerMobile: {
     borderRadius: 0,
     marginBottom: BOTTOM_BAR_HEIGHT,
+    // @ts-ignore web only
     maxHeight: `calc(100% - ${BOTTOM_BAR_HEIGHT}px)`,
   },
 })
diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index 087455d3f..6df121fae 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@@ -367,8 +367,10 @@ const styles = StyleSheet.create({
   leftNav: {
     position: 'absolute',
     top: 10,
+    // @ts-ignore web only
     right: 'calc(50vw + 312px)',
     width: 220,
+    // @ts-ignore web only
     maxHeight: 'calc(100vh - 10px)',
     overflowY: 'auto',
   },
@@ -413,6 +415,7 @@ const styles = StyleSheet.create({
     width: 28,
     height: 28,
     marginTop: 2,
+    zIndex: 1,
   },
   navItemIconWrapperTablet: {
     width: 40,
diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx
index 746bbcf59..797058d6c 100644
--- a/src/view/shell/desktop/RightNav.tsx
+++ b/src/view/shell/desktop/RightNav.tsx
@@ -120,6 +120,7 @@ const styles = StyleSheet.create({
   rightNav: {
     position: 'absolute',
     top: 20,
+    // @ts-ignore web only
     left: 'calc(50vw + 310px)',
     width: 304,
   },
diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx
index 72e7facc8..c5080e866 100644
--- a/src/view/shell/index.tsx
+++ b/src/view/shell/index.tsx
@@ -1,7 +1,12 @@
 import React from 'react'
 import {observer} from 'mobx-react-lite'
 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 {Drawer} from 'react-native-drawer-layout'
 import {useNavigationState} from '@react-navigation/native'
@@ -25,7 +30,7 @@ const ShellInner = observer(() => {
   const winDim = useWindowDimensions()
   const safeAreaInsets = useSafeAreaInsets()
   const containerPadding = React.useMemo(
-    () => ({height: '100%', paddingTop: safeAreaInsets.top}),
+    () => ({height: '100%' as DimensionValue, paddingTop: safeAreaInsets.top}),
     [safeAreaInsets],
   )
   const renderDrawerContent = React.useCallback(() => <DrawerContent />, [])