expo-image added

Author: olafch

package.json

@@ -121,6 +121,7 @@
     "expo-device": "~6.0.2",
     "expo-font": "~12.0.5",
     "expo-haptics": "~13.0.1",
+    "expo-image": "~1.12.12",
     "expo-image-picker": "~15.0.5",
     "expo-linear-gradient": "~13.0.2",
     "expo-linking": "~6.3.1",

src/components/CompanyLogo.tsx

@@ -1,6 +1,7 @@
 import { darkBinarLogo, darkLogoSygnet, lightBinarLogo, lightLogoSygnet } from '@baca/constants'
 import { ColorSchemeName, useColorScheme } from '@baca/contexts'
-import { Image, ImageProps, ImageStyle } from 'react-native'
+import { Image } from 'expo-image'
+import { ImageProps, ImageStyle } from 'react-native'
 
 type LogoTypes = 'binarSygnet' | 'binar'
 
@@ -26,12 +27,5 @@ export const CompanyLogo = ({
 
   const source = LOGO[colorScheme][type]
 
-  return (
-    <Image
-      {...{ source }}
-      resizeMethod="resize"
-      resizeMode="contain"
-      style={[{ height, maxWidth: width }, style]}
-    />
-  )
+  return <Image contentFit="scale-down" source={source} style={[{ height, width }, style]} />
 }

src/components/LandingHeader.tsx

@@ -5,9 +5,10 @@ import { useFullScreenModal } from '@baca/design-system/modals/useFullScreenModa
 import { useCallback, useMemo, useTheme, useTranslation } from '@baca/hooks'
 import { useUniversalWidth } from '@baca/navigation/tabNavigator/hooks'
 import { isSignedInAtom } from '@baca/store/auth'
+import { Image } from 'expo-image'
 import { useRouter } from 'expo-router'
 import { useAtomValue } from 'jotai'
-import { Image, StyleSheet, Platform, View } from 'react-native'
+import { StyleSheet, Platform, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export function LandingHeader() {
@@ -36,8 +37,7 @@ export function LandingHeader() {
       </Pressable>
     ) : (
       <Image
-        resizeMethod="resize"
-        resizeMode="contain"
+        contentFit="scale-down"
         source={colorScheme === 'light' ? lightBinarLogo : darkBinarLogo}
         style={jsStyles.logoWide}
       />

src/components/molecules/SocialButtons/SocialButton.tsx

@@ -2,8 +2,9 @@ import { googleIcon } from '@baca/constants'
 import { useColorScheme } from '@baca/contexts'
 import { Button, ButtonProps, Icon } from '@baca/design-system'
 import i18n from '@baca/i18n'
+import { Image, ImageStyle } from 'expo-image'
 import { FC, useCallback } from 'react'
-import { Image, ImageSourcePropType } from 'react-native'
+import { ImageSourcePropType } from 'react-native'
 
 type SocialMediaType = 'apple' | 'facebook' | 'google'
 
@@ -51,7 +52,10 @@ export const SocialButton: FC<SocialButtonProps> = ({ type = 'google', ...rest }
           return <Icon color="#1877F2" name="facebook-circle-fill" size={24} />
         case 'google':
           return (
-            <Image source={source?.[colorScheme] || source?.['light']} width={24} height={24} />
+            <Image
+              source={source?.[colorScheme] || source?.['light']}
+              style={{ width: 24, height: 24 } as ImageStyle}
+            />
           )
       }
     },

src/components/screens/profile/ProfileEditImage.tsx

@@ -1,8 +1,9 @@
 import { Box, Text, Button, Row, themeColors } from '@baca/design-system'
+import { Image } from 'expo-image'
 import * as ImagePicker from 'expo-image-picker'
 import { t } from 'i18next'
 import { useState, useCallback } from 'react'
-import { Image, StyleSheet } from 'react-native'
+import { StyleSheet } from 'react-native'
 
 export const ProfileEditImage: React.FC = () => {
   const [image, setImage] = useState<string | null>(null)

yarn.lock

@@ -6310,6 +6310,11 @@ expo-image-picker@~15.0.5:
   dependencies:
     expo-image-loader "~4.7.0"
 
+expo-image@~1.12.12:
+  version "1.12.12"
+  resolved "https://registry.yarnpkg.com/expo-image/-/expo-image-1.12.12.tgz#b6422a07da0f6dddcea154d2857f617086a527cc"
+  integrity sha512-zZutUhKYqcqTH12o87pGCVLsuQeRK2vaNwxa8beznbDnmWevm3dmbOTCxaOhGgjyDxwcdwDa483Q4IKCXL6tBw==
+
 expo-json-utils@~0.13.0:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/expo-json-utils/-/expo-json-utils-0.13.1.tgz#e49b697198e11c573d346f08ab91c467095934a9"
@@ -12157,7 +12162,16 @@ string-length@^5.0.1:
     char-regex "^2.0.0"
     strip-ansi "^7.0.1"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -12235,7 +12249,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -12249,6 +12263,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -13353,7 +13374,7 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -13371,6 +13392,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"