From f48a91b124166b16229acfec3544ecc0dae9053c Mon Sep 17 00:00:00 2001 From: Utku <74243531+utkubakir@users.noreply.github.com> Date: Tue, 9 Apr 2024 08:13:27 -0400 Subject: [PATCH] [MOB-82] Switch to expo image & inspector long press (#2301) * open action modal on long press * fix styling on about screen * better/optimized image component --- apps/mobile/.eslintrc.js | 5 ++ apps/mobile/package.json | 1 + .../src/components/drawer/DrawerContent.tsx | 5 +- .../src/components/explorer/FileThumb.tsx | 3 +- .../src/components/icons/FolderIcon.tsx | 2 +- apps/mobile/src/components/icons/Icon.tsx | 2 +- .../src/components/job/JobContainer.tsx | 3 +- .../modal/inspector/ActionsModal.tsx | 5 +- .../src/screens/onboarding/GetStarted.tsx | 3 +- .../src/screens/settings/info/About.tsx | 51 +++++++++---------- pnpm-lock.yaml | 22 +++++--- 11 files changed, 60 insertions(+), 42 deletions(-) diff --git a/apps/mobile/.eslintrc.js b/apps/mobile/.eslintrc.js index c81c53171..981f773dc 100644 --- a/apps/mobile/.eslintrc.js +++ b/apps/mobile/.eslintrc.js @@ -22,6 +22,11 @@ module.exports = { importNames: ['SafeAreaView'], message: 'Import SafeAreaView from react-native-safe-area-context instead' }, + { + name: 'react-native', + importNames: ['Image', 'ImageProps', 'ImageBackground'], + message: 'Import it from expo-image instead' + }, { name: 'react-native-toast-message', message: 'Import it from components instead' diff --git a/apps/mobile/package.json b/apps/mobile/package.json index 908f9b55b..9dc4a7008 100644 --- a/apps/mobile/package.json +++ b/apps/mobile/package.json @@ -41,6 +41,7 @@ "expo-av": "^13.10.5", "expo-blur": "^12.9.2", "expo-build-properties": "~0.11.1", + "expo-image": "^1.10.6", "expo-linking": "~6.2.2", "expo-media-library": "~15.9.1", "expo-splash-screen": "~0.26.4", diff --git a/apps/mobile/src/components/drawer/DrawerContent.tsx b/apps/mobile/src/components/drawer/DrawerContent.tsx index 6dd02cb77..02817e080 100644 --- a/apps/mobile/src/components/drawer/DrawerContent.tsx +++ b/apps/mobile/src/components/drawer/DrawerContent.tsx @@ -1,9 +1,10 @@ import { DrawerContentScrollView } from '@react-navigation/drawer'; import { DrawerContentComponentProps } from '@react-navigation/drawer/lib/typescript/src/types'; import { AppLogo } from '@sd/assets/images'; -import { CheckCircle, Gear } from 'phosphor-react-native'; +import { Image } from 'expo-image'; +import { CheckCircle } from 'phosphor-react-native'; import { useRef } from 'react'; -import { Image, Platform, Pressable, Text, View } from 'react-native'; +import { Platform, Pressable, Text, View } from 'react-native'; import { JobManagerContextProvider, useLibraryQuery } from '@sd/client'; import Layout from '~/constants/Layout'; import { tw, twStyle } from '~/lib/tailwind'; diff --git a/apps/mobile/src/components/explorer/FileThumb.tsx b/apps/mobile/src/components/explorer/FileThumb.tsx index 1bb4aab11..0ee343e7a 100644 --- a/apps/mobile/src/components/explorer/FileThumb.tsx +++ b/apps/mobile/src/components/explorer/FileThumb.tsx @@ -1,7 +1,8 @@ import { DocumentDirectoryPath } from '@dr.pogodin/react-native-fs'; import { getIcon } from '@sd/assets/util'; +import { Image } from 'expo-image'; import { useEffect, useLayoutEffect, useMemo, useState, type PropsWithChildren } from 'react'; -import { Image, View } from 'react-native'; +import { View } from 'react-native'; import { getExplorerItemData, getItemFilePath, diff --git a/apps/mobile/src/components/icons/FolderIcon.tsx b/apps/mobile/src/components/icons/FolderIcon.tsx index 474cf703e..11566acff 100644 --- a/apps/mobile/src/components/icons/FolderIcon.tsx +++ b/apps/mobile/src/components/icons/FolderIcon.tsx @@ -1,5 +1,5 @@ import { Folder, Folder_Light } from '@sd/assets/icons'; -import { Image } from 'react-native'; +import { Image } from 'expo-image'; type FolderProps = { /** diff --git a/apps/mobile/src/components/icons/Icon.tsx b/apps/mobile/src/components/icons/Icon.tsx index f54b719dc..165ddf888 100644 --- a/apps/mobile/src/components/icons/Icon.tsx +++ b/apps/mobile/src/components/icons/Icon.tsx @@ -1,5 +1,5 @@ import { getIcon, iconNames } from '@sd/assets/util'; -import { Image, ImageProps } from 'react-native'; +import { Image, ImageProps } from 'expo-image'; import { ClassInput } from 'twrnc'; import { isDarkTheme } from '@sd/client'; import { twStyle } from '~/lib/tailwind'; diff --git a/apps/mobile/src/components/job/JobContainer.tsx b/apps/mobile/src/components/job/JobContainer.tsx index d7a491f26..9e7532cc0 100644 --- a/apps/mobile/src/components/job/JobContainer.tsx +++ b/apps/mobile/src/components/job/JobContainer.tsx @@ -1,6 +1,7 @@ +import { Image } from 'expo-image'; import { Icon } from 'phosphor-react-native'; import { Fragment } from 'react'; -import { Image, Text, View, ViewStyle } from 'react-native'; +import { Text, View, ViewStyle } from 'react-native'; import { TextItems } from '@sd/client'; import { styled, tw, twStyle } from '~/lib/tailwind'; diff --git a/apps/mobile/src/components/modal/inspector/ActionsModal.tsx b/apps/mobile/src/components/modal/inspector/ActionsModal.tsx index 04bead07c..d9e106bc8 100644 --- a/apps/mobile/src/components/modal/inspector/ActionsModal.tsx +++ b/apps/mobile/src/components/modal/inspector/ActionsModal.tsx @@ -102,7 +102,10 @@ export const ActionsModal = () => { {/* Thumbnail/Icon */} - fileInfoRef.current?.present()}> + fileInfoRef.current?.present()} + > diff --git a/apps/mobile/src/screens/onboarding/GetStarted.tsx b/apps/mobile/src/screens/onboarding/GetStarted.tsx index 9acb05cd2..ab50e9b9c 100644 --- a/apps/mobile/src/screens/onboarding/GetStarted.tsx +++ b/apps/mobile/src/screens/onboarding/GetStarted.tsx @@ -2,10 +2,11 @@ import { useNavigation, useRoute } from '@react-navigation/native'; import { AppLogo, BloomOne } from '@sd/assets/images'; import { SdMobIntro } from '@sd/assets/videos'; import { ResizeMode, Video } from 'expo-av'; +import { Image } from 'expo-image'; import { MotiView } from 'moti'; import { CaretLeft } from 'phosphor-react-native'; import { useEffect } from 'react'; -import { Image, KeyboardAvoidingView, Platform, Pressable, Text, View } from 'react-native'; +import { KeyboardAvoidingView, Platform, Pressable, Text, View } from 'react-native'; import Animated from 'react-native-reanimated'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { useOnboardingStore } from '@sd/client'; diff --git a/apps/mobile/src/screens/settings/info/About.tsx b/apps/mobile/src/screens/settings/info/About.tsx index 4bf9dd403..71550e2e9 100644 --- a/apps/mobile/src/screens/settings/info/About.tsx +++ b/apps/mobile/src/screens/settings/info/About.tsx @@ -1,6 +1,7 @@ +import { Image } from 'expo-image'; import { Globe } from 'phosphor-react-native'; import React from 'react'; -import { Image, Linking, Platform, Text, View } from 'react-native'; +import { Linking, Platform, Text, View } from 'react-native'; import { useBridgeQuery } from '@sd/client'; import { DiscordIcon, GitHubIcon } from '~/components/icons/Brands'; import ScreenContainer from '~/components/layout/ScreenContainer'; @@ -13,14 +14,14 @@ const AboutScreen = () => { return ( - + - - + + Spacedrive{' '} {`for ${ Platform.OS === 'android' @@ -28,56 +29,56 @@ const AboutScreen = () => { : Platform.OS[0] + Platform.OS.slice(1).toUpperCase() }`} - + The file manager from the future. - + v{buildInfo.data?.version || '-.-.-'} - {buildInfo.data?.commit || 'dev'} {/* iOS has buttons falling out of the screen for some reason. So, I made the buttons veritical instead */} - + {/* Discord Button */} {/* GitHub Button */} {/* Website Button */} - - Vision - + + Vision + Many of us have multiple cloud accounts, drives that aren’t backed up and data at risk of loss. We depend on cloud services like Google Photos and iCloud, but are locked in with limited capacity and almost zero interoperability between @@ -90,14 +91,12 @@ const AboutScreen = () => { - + Meet the contributors behind Spacedrive - {/* Temporary image url approach until a solution is reached */} + {/* TODO: Temporary image url approach until a solution is reached */} @@ -107,5 +106,3 @@ const AboutScreen = () => { }; export default AboutScreen; - -// React Native doesn't allow for SVGs to be imported, so we have to use react-native-svg. diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c2c147271..c51d08eed 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -392,6 +392,9 @@ importers: expo-build-properties: specifier: ~0.11.1 version: 0.11.1(expo@50.0.13) + expo-image: + specifier: ^1.10.6 + version: 1.10.6(expo@50.0.13) expo-linking: specifier: ~6.2.2 version: 6.2.2(expo@50.0.13) @@ -3092,10 +3095,6 @@ packages: peerDependencies: '@effect-ts/otel-node': '*' peerDependenciesMeta: - '@effect-ts/core': - optional: true - '@effect-ts/otel': - optional: true '@effect-ts/otel-node': optional: true dependencies: @@ -14728,6 +14727,15 @@ packages: fontfaceobserver: 2.3.0 dev: false + /expo-image@1.10.6(expo@50.0.13): + resolution: {integrity: sha512-vcnAIym1eU8vQgV1re1E7rVQZStJimBa4aPDhjFfzMzbddAF7heJuagyewiUkTzbZUwYzPaZAie6VJPyWx9Ueg==} + peerDependencies: + expo: '*' + dependencies: + '@react-native/assets-registry': 0.73.1 + expo: 50.0.13(@babel/core@7.24.0)(@react-native/babel-preset@0.73.21) + dev: false + /expo-keep-awake@12.8.2(expo@50.0.13): resolution: {integrity: sha512-uiQdGbSX24Pt8nGbnmBtrKq6xL/Tm3+DuDRGBk/3ZE/HlizzNosGRIufIMJ/4B4FRw4dw8KU81h2RLuTjbay6g==} peerDependencies: @@ -24486,7 +24494,7 @@ packages: engines: {node: ^14.18.0 || >=16.0.0} hasBin: true peerDependencies: - '@types/node': '>= 14' + '@types/node': '>18.18.x' less: '*' lightningcss: ^1.21.0 sass: '*' @@ -24521,7 +24529,7 @@ packages: engines: {node: ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: - '@types/node': ^18.0.0 || >=20.0.0 + '@types/node': '>18.18.x' less: '*' lightningcss: ^1.21.0 sass: '*' @@ -24556,7 +24564,7 @@ packages: engines: {node: ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: - '@types/node': ^18.0.0 || >=20.0.0 + '@types/node': '>18.18.x' less: '*' lightningcss: ^1.21.0 sass: '*'