chore: bump deps

apps/mobile/index.tsx

@@ -1,9 +1,20 @@
 import './expo-crypto-shim.js'
 
 import { registerRootComponent } from 'expo'
+import React from 'react'
 
 import App from './src/App'
 
+// Only require and initialize why-did-you-render in development mode
+if (__DEV__) {
+  const whyDidYouRender = require('@welldone-software/why-did-you-render')
+  whyDidYouRender(React, {
+    trackAllPureComponents: false,
+    trackHooks: false,
+    logOnDifferentValues: false
+  })
+}
+
 // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
 // It also ensures that whether you load the app in Expo Go or in a native build,
 // the environment is set up appropriately

apps/mobile/package.json

@@ -9,6 +9,7 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
+    "devtools": "react-devtools",
     "lint": "eslint . --ext .js,.ts,.tsx",
     "eas:build": "eas build  --platform ios"
   },
@@ -17,52 +18,49 @@
     "@gorhom/bottom-sheet": "^4.4.7",
     "@hookform/resolvers": "^3.2.0",
     "@livepeer/react-native": "^1.8.0",
-    "@react-native-async-storage/async-storage": "1.17.11",
-    "@react-native-community/netinfo": "9.3.7",
+    "@react-native-async-storage/async-storage": "1.18.2",
+    "@react-native-community/netinfo": "9.3.10",
     "@react-navigation/bottom-tabs": "^6.5.7",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/stack": "^6.3.16",
-    "@shopify/flash-list": "1.4.0",
+    "@shopify/flash-list": "1.4.3",
     "@walletconnect/modal-react-native": "^1.0.0-rc.10",
-    "expo": "~48.0.18",
-    "expo-av": "~13.2.1",
-    "expo-blur": "~12.2.2",
-    "expo-clipboard": "~4.1.2",
-    "expo-constants": "~14.2.1",
-    "expo-crypto": "~12.2.1",
-    "expo-device": "~5.2.1",
-    "expo-document-picker": "~11.2.2",
-    "expo-haptics": "~12.2.1",
-    "expo-image": "~1.0.1",
-    "expo-image-picker": "~14.1.1",
-    "expo-linear-gradient": "~12.1.2",
-    "expo-linking": "~4.0.1",
-    "expo-notifications": "~0.18.1",
-    "expo-sensors": "~12.1.1",
-    "expo-sharing": "~11.2.2",
-    "expo-splash-screen": "~0.18.2",
-    "expo-status-bar": "~1.4.4",
-    "expo-system-ui": "~2.2.1",
-    "expo-video-thumbnails": "~7.2.1",
+    "expo": "~49.0.7",
+    "expo-av": "~13.4.1",
+    "expo-blur": "~12.4.1",
+    "expo-clipboard": "~4.3.1",
+    "expo-constants": "~14.4.2",
+    "expo-crypto": "~12.4.1",
+    "expo-device": "~5.4.0",
+    "expo-document-picker": "~11.5.4",
+    "expo-haptics": "~12.4.0",
+    "expo-image": "~1.3.2",
+    "expo-image-picker": "~14.3.2",
+    "expo-linear-gradient": "~12.3.0",
+    "expo-linking": "~5.0.2",
+    "expo-notifications": "~0.20.1",
+    "expo-sensors": "~12.3.0",
+    "expo-sharing": "~11.5.0",
+    "expo-splash-screen": "~0.20.5",
+    "expo-status-bar": "~1.6.0",
+    "expo-system-ui": "~2.4.0",
+    "expo-video-thumbnails": "~7.4.0",
     "moti": "^0.26.0",
     "qrcode": "^1.5.3",
     "react": "18.2.0",
     "react-hook-form": "^7.45.4",
-    "react-native": "0.71.8",
-    "react-native-gesture-handler": "~2.9.0",
+    "react-native": "0.72.3",
+    "react-native-gesture-handler": "~2.12.1",
     "react-native-get-random-values": "~1.9.0",
     "react-native-modal": "^13.0.1",
-    "react-native-notificated": "^0.1.0",
-    "react-native-reanimated": "~2.14.4",
+    "react-native-reanimated": "~3.3.0",
     "react-native-reanimated-carousel": "^3.4.0",
-    "react-native-safe-area-context": "4.5.0",
-    "react-native-shared-element": "0.8.8",
-    "react-native-svg": "13.4.0",
-    "react-native-view-shot": "3.5.0",
-    "react-navigation-shared-element": "^3.1.3",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-svg": "13.9.0",
+    "react-native-view-shot": "3.7.0",
     "swr": "^2.2.1",
     "uuid": "^3.4.0",
-    "viem": "^1.6.0",
+    "viem": "^1.6.3",
     "zod": "^3.22.2",
     "zustand": "^4.4.1"
   },
@@ -78,10 +76,12 @@
     "@lenstube/config": "*",
     "@lenstube/generic": "*",
     "@lenstube/lens": "*",
-    "@types/node": "20.5.0",
+    "@types/node": "20.5.1",
     "@types/qrcode": "^1.5.1",
+    "@welldone-software/why-did-you-render": "^7.0.1",
     "babel-plugin-module-resolver": "^5.0.0",
+    "react-devtools": "^4.28.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.4"
+    "typescript": "^5.1.3"
   }
 }

apps/mobile/src/App.tsx

@@ -21,11 +21,12 @@ import React from 'react'
 import { StyleSheet } from 'react-native'
 // eslint-disable-next-line import/no-duplicates
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
 
-import { AppLoading } from './components'
+import AppLoading from './components/common/AppLoading'
+import { ToastProvider } from './components/common/toast'
 import mobileAuthLink from './helpers/auth-link'
 import { Navigation } from './navigation'
-import { NotificationsProvider, SafeAreaProvider } from './providers'
 
 const styles = StyleSheet.create({
   gestureHandlerRootView: {
@@ -61,21 +62,22 @@ const App = (): JSX.Element => {
   return (
     <SafeAreaProvider>
       <ApolloProvider client={apolloClient(mobileAuthLink)}>
-        <LivepeerConfig client={livepeerClient}>
-          <NotificationsProvider />
-          <WalletConnectModal
-            themeMode="dark"
-            projectId={WC_PROJECT_ID}
-            explorerExcludedWalletIds="ALL"
-            providerMetadata={providerMetadata}
-            explorerRecommendedWalletIds={explorerRecommendedWalletIds}
-          />
-          <AppLoading>
-            <GestureHandlerRootView style={styles.gestureHandlerRootView}>
-              <Navigation />
-            </GestureHandlerRootView>
-          </AppLoading>
-        </LivepeerConfig>
+        <AppLoading>
+          <ToastProvider>
+            <LivepeerConfig client={livepeerClient}>
+              <WalletConnectModal
+                themeMode="dark"
+                projectId={WC_PROJECT_ID}
+                explorerExcludedWalletIds="ALL"
+                providerMetadata={providerMetadata}
+                explorerRecommendedWalletIds={explorerRecommendedWalletIds}
+              />
+              <GestureHandlerRootView style={styles.gestureHandlerRootView}>
+                <Navigation />
+              </GestureHandlerRootView>
+            </LivepeerConfig>
+          </ToastProvider>
+        </AppLoading>
       </ApolloProvider>
     </SafeAreaProvider>
   )

apps/mobile/src/components/bytes/ByteCard.tsx

@@ -9,8 +9,7 @@ import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs'
 import { ResizeMode, Video } from 'expo-av'
 import type { FC } from 'react'
 import React, { useEffect, useRef } from 'react'
-import { StyleSheet, useWindowDimensions } from 'react-native'
-import Animated, { FadeIn } from 'react-native-reanimated'
+import { StyleSheet, useWindowDimensions, View } from 'react-native'
 
 import { useIsFocused } from '~/hooks/navigation'
 
@@ -68,10 +67,7 @@ const ByteCard: FC<Props> = ({ byte, isActive }) => {
   }, [isFocused, isActive])
 
   return (
-    <Animated.View
-      entering={FadeIn.duration(500)}
-      style={[styles.byteCard, { height: BYTE_HEIGHT, width }]}
-    >
+    <View style={[styles.byteCard, { height: BYTE_HEIGHT, width }]}>
       <Video
         ref={videoRef}
         isLooping
@@ -87,7 +83,7 @@ const ByteCard: FC<Props> = ({ byte, isActive }) => {
       />
 
       <Overlay byte={byte} />
-    </Animated.View>
+    </View>
   )
 }
 

apps/mobile/src/components/common/AppLoading.tsx

@@ -43,7 +43,7 @@ const Splash = () => {
 
   return (
     <Animated.View
-      entering={FadeIn.duration(700)}
+      entering={FadeIn}
       style={{
         flex: 1,
         alignItems: 'center',
@@ -62,7 +62,7 @@ const Splash = () => {
   )
 }
 
-export const AppLoading: FC<PropsWithChildren> = ({ children }) => {
+const AppLoading: FC<PropsWithChildren> = ({ children }) => {
   const [appLoadingIsVisible, setAppLoadingIsVisible] = useState(true)
   const selectedChannelId = useMobilePersistStore(
     (state) => state.selectedChannelId
@@ -88,3 +88,5 @@ export const AppLoading: FC<PropsWithChildren> = ({ children }) => {
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return <>{children}</>
 }
+
+export default AppLoading

apps/mobile/src/components/common/AudioCard.tsx

@@ -18,7 +18,6 @@ import {
   useWindowDimensions,
   View
 } from 'react-native'
-import { SharedElement } from 'react-navigation-shared-element'
 
 import normalizeFont from '~/helpers/normalize-font'
 import { theme } from '~/helpers/theme'
@@ -86,17 +85,12 @@ const AudioCard: FC<Props> = ({ audio }) => {
     <Pressable onPress={() => navigate('WatchVideo', { id: audio.id })}>
       <>
         <View style={{ display: 'flex', flexDirection: 'row' }}>
-          <SharedElement id={`video.watch.${audio.id}.thumbnail`}>
-            <ExpoImage
-              source={{ uri: thumbnailUrl }}
-              transition={300}
-              contentFit="cover"
-              style={[
-                styles.thumbnail,
-                { width: width / 3, height: width / 3 }
-              ]}
-            />
-          </SharedElement>
+          <ExpoImage
+            source={{ uri: thumbnailUrl }}
+            transition={300}
+            contentFit="cover"
+            style={[styles.thumbnail, { width: width / 3, height: width / 3 }]}
+          />
           <View style={styles.audioInfoContainer}>
             <View style={{ gap: 5 }}>
               <Text style={styles.title} numberOfLines={2}>

apps/mobile/src/components/common/Header.tsx

@@ -6,7 +6,6 @@ import { useWalletConnectModal } from '@walletconnect/modal-react-native'
 import type { FC } from 'react'
 import React, { useRef } from 'react'
 import { ScrollView, StyleSheet, Text, View } from 'react-native'
-import { SharedElement } from 'react-navigation-shared-element'
 
 import haptic from '~/helpers/haptic'
 import normalizeFont from '~/helpers/normalize-font'
@@ -75,14 +74,12 @@ const AuthenticatedUser = () => {
 
   return (
     <>
-      <SharedElement id={`profile.${selectedChannel.handle}`}>
-        <UserProfile
-          profile={selectedChannel}
-          showHandle={false}
-          size={30}
-          onPress={() => profileSheetRef.current?.present()}
-        />
-      </SharedElement>
+      <UserProfile
+        profile={selectedChannel}
+        showHandle={false}
+        size={30}
+        onPress={() => profileSheetRef.current?.present()}
+      />
       <Sheet sheetRef={profileSheetRef} snap={['60%']}>
         <ScrollView style={{ paddingHorizontal: 10, paddingVertical: 15 }}>
           <Switch />

apps/mobile/src/components/common/UserProfile.tsx

@@ -1,6 +1,7 @@
 import { getProfilePicture, trimLensHandle } from '@lenstube/generic'
 import type { Profile } from '@lenstube/lens'
 import { useNavigation } from '@react-navigation/native'
+import type { ImageStyle } from 'expo-image'
 import { Image as ExpoImage } from 'expo-image'
 import type { FC } from 'react'
 import React, { memo } from 'react'
@@ -21,6 +22,7 @@ type Props = {
   opacity?: number
   onPress?: () => void
   handleStyle?: StyleProp<TextStyle>
+  imageStyle?: ImageStyle
 }
 
 const styles = StyleSheet.create({
@@ -46,7 +48,8 @@ const UserProfile: FC<Props> = (props) => {
     onPress,
     showHandle = true,
     handleStyle,
-    pressable
+    pressable,
+    imageStyle = {}
   } = props
   const { navigate } = useNavigation()
 
@@ -68,14 +71,17 @@ const UserProfile: FC<Props> = (props) => {
         }}
         contentFit="cover"
         transition={500}
-        style={{
-          width: size,
-          height: size,
-          borderRadius: radius,
-          borderWidth: 0.5,
-          borderColor: theme.colors.secondary,
-          backgroundColor: theme.colors.backdrop
-        }}
+        style={[
+          {
+            width: size,
+            height: size,
+            borderRadius: radius,
+            borderWidth: 0.5,
+            borderColor: theme.colors.secondary,
+            backgroundColor: theme.colors.backdrop
+          },
+          imageStyle
+        ]}
       />
       {showHandle && (
         <Text numberOfLines={1} style={[styles.handle, handleStyle]}>