fix(hot): avoid image caching on profile

app/(auth)/intro.tsx

@@ -1,4 +1,4 @@
-import {Image, ScrollView, View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import * as WebBrowser from 'expo-web-browser';
 
 import styled, {css} from '@emotion/native';
@@ -11,6 +11,7 @@ import {t} from '../../src/STRINGS';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import ButtonSocialSignIn from '../../src/components/uis/ButtonSocialSignIn';
 import {useWarmUpBrowser} from '../../src/hooks/useWarmUpBrowser';
+import {Image} from 'expo-image';
 
 WebBrowser.maybeCompleteAuthSession();
 
@@ -97,6 +98,8 @@ export default function Intro(): JSX.Element {
             source={IMG_CROSSPLATFORMS}
             style={css`
               margin-top: 24px;
+              width: 330px;
+              height: 260px;
             `}
           />
           <View

app/(home)/(tabs)/_layout.tsx

@@ -9,7 +9,7 @@ import {css} from '@emotion/native';
 import {Image} from 'expo-image';
 import {IC_ICON} from '../../../src/icons';
 import {useRecoilValue} from 'recoil';
-import {authRecoilState} from '../../../src/recoil/atoms';
+import {authRecoilSelector} from '../../../src/recoil/selectors';
 
 function SettingsMenu(): JSX.Element {
   const {theme} = useDooboo();
@@ -34,7 +34,7 @@ function SettingsMenu(): JSX.Element {
 export default function TabLayout(): JSX.Element {
   const {theme} = useDooboo();
   const notificationResponseListener = useRef<Notifications.Subscription>();
-  const {user} = useRecoilValue(authRecoilState);
+  const {user} = useRecoilValue(authRecoilSelector);
 
   useEffect(() => {
     if (!user?.id) return;

app/(home)/(tabs)/my.tsx

@@ -12,6 +12,8 @@ import {openURL} from '../../../src/utils/common';
 import DoobooStats from '../../../src/components/fragments/DoobooStats';
 import ErrorBoundary from 'react-native-error-boundary';
 import FallbackComponent from '../../../src/components/uis/FallbackComponent';
+import {Image} from 'expo-image';
+import {authRecoilSelector} from '../../../src/recoil/selectors';
 
 const Container = styled.SafeAreaView`
   flex: 1;
@@ -30,7 +32,7 @@ const Content = styled.View`
   padding: 16px;
 `;
 
-const UserAvatar = styled.Image`
+const UserAvatar = styled(Image)`
   width: 120px;
   height: 120px;
   border-radius: 60px;
@@ -103,7 +105,8 @@ const TagText = styled.Text`
 `;
 
 export default function My(): JSX.Element {
-  const {user, tags} = useRecoilValue(authRecoilState);
+  const {tags} = useRecoilValue(authRecoilState);
+  const {user} = useRecoilValue(authRecoilSelector);
   const {theme} = useDooboo();
 
   return (

app/(home)/settings/profile-update.tsx

@@ -84,6 +84,7 @@ const fetcher = async ({
     authId,
     supabase,
   });
+
   return {profile, userTags};
 };
 
@@ -181,7 +182,9 @@ export default function ProfileUpdate(): JSX.Element {
       );
       setValue('future_expectations', user.profile.future_expectations || '');
       setTags(user.userTags);
-      setProfileImg(`${user.profile.avatar_url}` || undefined);
+      setProfileImg(
+        `${user.profile.avatar_url}?${new Date().toISOString()}` || undefined,
+      );
     }
   }, [user, setValue]);
 

app/(home)/user/[displayName].tsx

@@ -21,6 +21,7 @@ import {
   fetchIsAFollowing,
 } from '../../../src/apis/followQueries';
 import useSupabase from '../../../src/hooks/useSupabase';
+import {Image} from 'expo-image';
 
 const Container = styled.SafeAreaView`
   flex: 1;
@@ -39,7 +40,7 @@ const Content = styled.View`
   padding: 16px;
 `;
 
-const UserAvatar = styled.Image`
+const UserAvatar = styled(Image)`
   width: 120px;
   height: 120px;
   border-radius: 60px;

package.json

@@ -116,7 +116,6 @@
     "@types/jest": "^29.5.13",
     "@types/react": "~18.3.10",
     "@types/recoil": "^0.0.9",
-    "@typescript-eslint/eslint-plugin": "^8.7.0",
     "ajv": "^8.17.1",
     "babel-jest": "^29.7.0",
     "commitlint-plugin-function-rules": "^4.0.0",

src/components/uis/ButtonSocialSignIn/ButtonSocialSignInView.tsx

@@ -5,9 +5,10 @@ import type {
   TextStyle,
   ViewStyle,
 } from 'react-native';
-import {Image, TouchableOpacity} from 'react-native';
+import {TouchableOpacity} from 'react-native';
 import styled from '@emotion/native';
 import {LoadingIndicator, Typography, useDooboo} from 'dooboo-ui';
+import {Image} from 'expo-image';
 
 type Props = {
   style?: StyleProp<ViewStyle>;
@@ -47,7 +48,7 @@ export default function SocialSignInButton({
     <TouchableOpacity activeOpacity={0.8} onPress={onPress}>
       <Container style={style}>
         {loading ? (
-          <LoadingIndicator size="small" color={theme.text.placeholder}/>
+          <LoadingIndicator size="small" color={theme.text.placeholder} />
         ) : (
           <>
             {leftElement ? (

src/components/uis/PostListItem.tsx

@@ -2,9 +2,8 @@ import styled, {css} from '@emotion/native';
 import {Hr, Icon, Typography, useDooboo} from 'dooboo-ui';
 import type {Image, Post, User} from '../../types';
 import {formatDateTime} from '../../utils/date';
-import {TouchableOpacity} from 'react-native-gesture-handler';
 import UserListItem from './UserListItem';
-import {View} from 'react-native';
+import {TouchableOpacity, View} from 'react-native';
 import ControlItem, {ControlItemProps} from './ControlItem';
 import {Image as ExpoImage} from 'expo-image';
 import {useRecoilValue} from 'recoil';

src/components/uis/Scouter/Score.tsx

@@ -9,6 +9,7 @@ import {
   IC_TIER_PLATINUM,
   IC_TIER_SILVER,
 } from '../../../icons';
+import {Image} from 'expo-image';
 
 const Container = styled.View`
   align-self: stretch;
@@ -33,7 +34,7 @@ const ScoreView = styled.View`
   align-items: center;
 `;
 
-const StyledImage = styled.Image`
+const StyledImage = styled(Image)`
   width: 32px;
   height: 32px;
   margin-right: 8px;

src/recoil/selectors.ts

@@ -0,0 +1,28 @@
+import {selector} from 'recoil';
+import {authRecoilState, UserInfo} from './atoms';
+
+export const authRecoilSelector = selector<UserInfo>({
+  key: 'authRecoilSelector',
+  get: ({get}) => {
+    const state = get(authRecoilState);
+
+    if (state.user?.avatar_url) {
+      return {
+        ...state,
+        user: {
+          ...state.user,
+          avatar_url: `${state.user.avatar_url}?${new Date().toISOString()}`,
+        },
+      };
+    }
+    return state;
+  },
+  set: ({set, get}, newValue) => {
+    const newUserInfo = newValue as UserInfo;
+
+    if (newUserInfo.user?.avatar_url) {
+      newUserInfo.user.avatar_url = `${newUserInfo.user.avatar_url}?${new Date().toISOString()}`;
+    }
+    set(authRecoilState, newUserInfo);
+  },
+});