Bump react-native to 0.73.1, expo to 50 (#2214)

* Bump to react-native@0.73, bump expo@next

Includes bumps for all expo deps and dev dependencies. Updates
react-native patch and others, and removes the babel-preset-expo patch.

* Remove duplicate Splash ref

* Bump more deps

* Properly install expo-notifications

* Bump webview dep

* Bump packages according to expo fix; remove pager-view patch as it is no longer needed

* Don't access expo-camera from Web

* Fix crypto dep on web

* Fix some type issues

* Build esnext modules to support dynamic imports

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

9 files changed, 35 insertions, 4 deletions

diff --git a/src/Splash.tsx b/src/Splash.tsx
index 16375539f..fc70bb3b7 100644
--- a/src/Splash.tsx
+++ b/src/Splash.tsx
@@ -40,8 +40,6 @@ type Props = {
   isReady: boolean
 }
 
-SplashScreen.preventAutoHideAsync().catch(() => {})
-
 const AnimatedLogo = Animated.createAnimatedComponent(Logo)
 
 export function Splash(props: React.PropsWithChildren<Props>) {
diff --git a/src/lib/hooks/usePermissions.web.ts b/src/lib/hooks/usePermissions.web.ts
new file mode 100644
index 000000000..c550a7d6d
--- /dev/null
+++ b/src/lib/hooks/usePermissions.web.ts
@@ -0,0 +1,16 @@
+export function usePhotoLibraryPermission() {
+  const requestPhotoAccessIfNeeded = async () => {
+    // On the, we use <input type="file"> to produce a filepicker
+    // This does not need any permission granting.
+    return true
+  }
+  return {requestPhotoAccessIfNeeded}
+}
+
+export function useCameraPermission() {
+  const requestCameraAccessIfNeeded = async () => {
+    return false
+  }
+
+  return {requestCameraAccessIfNeeded}
+}
diff --git a/src/platform/crypto.ts b/src/platform/crypto.ts
new file mode 100644
index 000000000..c7deb21cc
--- /dev/null
+++ b/src/platform/crypto.ts
@@ -0,0 +1,7 @@
+// HACK
+// expo-modules-core tries to require('crypto') in uuid.web.js
+// and while it tries to detect web crypto before doing so, our
+// build fails when it tries to do this require. We use a babel
+// and tsconfig alias to direct it here
+// -prf
+export default crypto
diff --git a/src/platform/detection.ts b/src/platform/detection.ts
index f4f7be240..150fc1fe3 100644
--- a/src/platform/detection.ts
+++ b/src/platform/detection.ts
@@ -14,5 +14,7 @@ export const isMobileWeb =
   global.window.matchMedia(isMobileWebMediaQuery)?.matches
 
 export const deviceLocales = dedupArray(
-  getLocales?.().map?.(locale => locale.languageCode),
-)
+  getLocales?.()
+    .map?.(locale => locale.languageCode)
+    .filter(code => typeof code === 'string'),
+) as string[]
diff --git a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
index e27a0793d..f4b2d99b0 100644
--- a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
+++ b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
@@ -96,6 +96,7 @@ const styles = StyleSheet.create({
   },
   trigger: {
     backgroundColor: 'transparent',
+    // @ts-ignore web only -prf
     border: 'none',
     paddingTop: 4,
     paddingLeft: 12,
diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx
index 9b1bf7a49..df7d92301 100644
--- a/src/view/com/post/Post.tsx
+++ b/src/view/com/post/Post.tsx
@@ -221,6 +221,7 @@ const styles = StyleSheet.create({
     paddingBottom: 5,
     paddingLeft: 10,
     borderTopWidth: 1,
+    // @ts-ignore web only -prf
     cursor: 'pointer',
   },
   layout: {
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index 20d199745..2be314266 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -364,6 +364,7 @@ const styles = StyleSheet.create({
     borderTopWidth: 1,
     paddingLeft: 10,
     paddingRight: 15,
+    // @ts-ignore web only -prf
     cursor: 'pointer',
     overflow: 'hidden',
   },
diff --git a/src/view/com/util/Html.tsx b/src/view/com/util/Html.tsx
index 1590955a2..2e4719481 100644
--- a/src/view/com/util/Html.tsx
+++ b/src/view/com/util/Html.tsx
@@ -30,6 +30,7 @@ export function H1({children}: React.PropsWithChildren<{}>) {
   const styles = useStyles()
   const pal = usePalette('default')
   const typography = useTheme().typography['title-xl']
+  // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf
   return <ExpoH1 style={[typography, pal.text, styles.h1]}>{children}</ExpoH1>
 }
 
@@ -37,6 +38,7 @@ export function H2({children}: React.PropsWithChildren<{}>) {
   const styles = useStyles()
   const pal = usePalette('default')
   const typography = useTheme().typography['title-lg']
+  // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf
   return <ExpoH2 style={[typography, pal.text, styles.h2]}>{children}</ExpoH2>
 }
 
@@ -44,6 +46,7 @@ export function H3({children}: React.PropsWithChildren<{}>) {
   const styles = useStyles()
   const pal = usePalette('default')
   const typography = useTheme().typography.title
+  // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf
   return <ExpoH3 style={[typography, pal.text, styles.h3]}>{children}</ExpoH3>
 }
 
@@ -51,6 +54,7 @@ export function H4({children}: React.PropsWithChildren<{}>) {
   const styles = useStyles()
   const pal = usePalette('default')
   const typography = useTheme().typography['title-sm']
+  // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf
   return <ExpoH4 style={[typography, pal.text, styles.h4]}>{children}</ExpoH4>
 }
 
diff --git a/src/view/shell/desktop/Feeds.tsx b/src/view/shell/desktop/Feeds.tsx
index ff51ffe22..93b96e704 100644
--- a/src/view/shell/desktop/Feeds.tsx
+++ b/src/view/shell/desktop/Feeds.tsx
@@ -86,6 +86,7 @@ function FeedItem({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    // @ts-ignore web only -prf
     overflowY: 'auto',
     width: 300,
     paddingHorizontal: 12,