My Android react native app was loading images very quick when i was on SDK 46, but when i updated it to the latest version Expo 51 the images stopped loading at all .
Notice that the Facebook Images are without EXTENSIONS
the way that i render image is from Facebook API to get post info after that send it via API to the app to render it like this :
<Image source={{ uri: post.post_image }} style={styles.postImage} />
Notice that i ran
npx expo install --check
npx expo-doctor@latest
also downgrade react-native version
this is the result of :
npx expo-doctor@latest
✔ Check Expo config for common issues
✔ Check package.json for common issues
✔ Check native tooling versions
✔ Check dependencies for packages that should not be installed directly
✔ Check for common project setup issues
✔ Check npm/ yarn versions
✔ Check for issues with metro config
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check that native modules do not use incompatible support packages
✔ Check for legacy global CLI installed locally
✔ Check that packages match versions required by installed Expo SDK
✔ Check that native modules use compatible support package versions for installed Expo SDK
Didn't find any issues with the project!
and for npx expo install --check
Dependencies are up to date
my previous package.json is :
{
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@react-native-async-storage/async-storage": "~1.17.3",
"@react-native-community/cameraroll": "^4.1.2",
"@react-native-community/datetimepicker": "6.2.0",
"@react-native-community/masked-view": "0.1.10",
"@react-native-community/picker": "1.6.0",
"@react-navigation/bottom-tabs": "^5.8.0",
"@react-navigation/drawer": "^5.9.0",
"@react-navigation/material-bottom-tabs": "^5.2.16",
"@react-navigation/native": "^5.7.3",
"@react-navigation/stack": "^5.9.0",
"@types/react-native": "~0.69.1",
"axios": "^0.19.2",
"d3-shape": "^2.0.0",
"enzyme-adapter-react-16": "^1.15.7",
"expo": "^46.0.21",
"expo-auth-session": "~3.7.4",
"expo-build-properties": "~0.3.0",
"expo-camera": "~12.5.0",
"expo-chart-kit": "^1.2.4",
"expo-constants": "~13.2.4",
"expo-dev-client": "~1.3.1",
"expo-font": "~10.2.0",
"expo-image-picker": "~13.3.1",
"expo-linear-gradient": "~11.4.0",
"expo-linking": "~3.2.4",
"expo-localization": "~13.1.0",
"expo-location": "~14.3.0",
"expo-notifications": "~0.16.1",
"expo-random": "~12.3.0",
"expo-splash-screen": "~0.16.2",
"expo-status-bar": "~1.4.2",
"expo-updates": "~0.14.7",
"expo-web-browser": "~11.0.0",
"i18n-js": "^3.7.1",
"moment": "^2.29.1",
"react": "18.0.0",
"react-devtools": "^4.8.2",
"react-dom": "18.0.0",
"react-native": "0.69.9",
"react-native-dots-pagination": "^0.2.0",
"react-native-easy-grid": "^0.2.2",
"react-native-element-dropdown": "^2.10.4",
"react-native-fbsdk-next": "^11.1.0",
"react-native-gesture-handler": "~2.5.0",
"react-native-image-crop-picker": "^0.35.1",
"react-native-image-slider-banner": "^1.0.3",
"react-native-loading-spinner-overlay": "^3.0.1",
"react-native-modal": "^11.5.6",
"react-native-modal-datetime-picker": "^9.0.0",
"react-native-modal-select-list": "^1.1.0",
"react-native-modal-selector": "^2.0.3",
"react-native-options-menu": "^2.0.2",
"react-native-pager-view": "5.4.24",
"react-native-paper": "4.6.0",
"react-native-reanimated": "~2.9.1",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0",
"react-native-snap-carousel": "^4.0.0-beta.6",
"react-native-svg": "12.3.0",
"react-native-svg-charts": "^5.4.0",
"react-native-vector-icons": "^7.0.0",
"react-native-view-shot": "3.3.0",
"react-native-viewpager": "^0.2.13",
"react-native-viewpager-indicator": "^0.0.6",
"react-native-web": "~0.18.7",
"react-native-webview": "11.23.0",
"reanimated-bottom-sheet": "^1.0.0-alpha.22",
"typescript": "^4.6.3"
},
"devDependencies": {
"@babel/core": "^7.19.3",
"babel-preset-expo": "~9.2.1"
},
"private": true,
"name": "app1",
"version": "1.0.0",
"description": "some dis",
"keywords": [
"marketing"
],
"author": "its me",
"license": "MIT"
}
the new one is :
{
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@react-native-async-storage/async-storage": "^1.23.1",
"@react-native-community/datetimepicker": "8.0.1",
"@react-native-community/masked-view": "0.1.10",
"@react-native-community/picker": "1.6.0",
"@react-native/assets-registry": "^0.74.84",
"@react-navigation/bottom-tabs": "^6.5.8",
"@react-navigation/drawer": "^6.6.15",
"@react-navigation/material-bottom-tabs": "^5.2.16",
"@react-navigation/native": "^6.1.6",
"@react-navigation/stack": "^6.3.29",
"@types/react-native-snap-carousel": "^3.8.11",
"axios": "^1.7.2",
"d3-shape": "^2.0.0",
"enzyme-adapter-react-16": "^1.15.7",
"expo": "^51.0.14",
"expo-application": "~5.9.1",
"expo-auth-session": "^5.5.2",
"expo-build-properties": "^0.12.3",
"expo-camera": "^15.0.11",
"expo-chart-kit": "^1.2.4",
"expo-constants": "^16.0.2",
"expo-dev-client": "^4.0.18",
"expo-device": "^6.0.2",
"expo-font": "~12.0.7",
"expo-image": "~1.12.12",
"expo-image-picker": "^15.0.5",
"expo-insights": "~0.7.0",
"expo-linear-gradient": "~13.0.2",
"expo-linking": "^6.3.1",
"expo-localization": "~15.0.3",
"expo-location": "^17.0.1",
"expo-notifications": "^0.28.9",
"expo-random": "~14.0.1",
"expo-splash-screen": "^0.27.5",
"expo-status-bar": "~1.12.1",
"expo-updates": "^0.25.17",
"expo-web-browser": "~13.0.3",
"i18n-js": "^3.7.1",
"moment": "^2.29.1",
"react": "18.2.0",
"react-devtools": "^4.8.2",
"react-dom": "18.2.0",
"react-native": "0.74.1",
"react-native-dots-pagination": "^0.3.1",
"react-native-easy-grid": "^0.2.2",
"react-native-element-dropdown": "^2.12.0",
"react-native-fbsdk-next": "^13.0.0",
"react-native-gesture-handler": "^2.9.0",
"react-native-image-crop-picker": "^0.35.1",
"react-native-loading-spinner-overlay": "^3.0.1",
"react-native-modal": "^13.0.1",
"react-native-modal-datetime-picker": "^9.0.0",
"react-native-modal-select-list": "^1.1.0",
"react-native-modal-selector": "^2.0.3",
"react-native-options-menu": "^2.0.2",
"react-native-pager-view": "6.3.0",
"react-native-paper": "^5.12.3",
"react-native-reanimated": "~3.10.1",
"react-native-safe-area-context": "4.10.1",
"react-native-screens": "^3.20.0",
"react-native-snap-carousel": "github:capelski/react-native-snap-carousel",
"react-native-svg": "15.2.0",
"react-native-svg-charts": "^5.4.0",
"react-native-vector-icons": "^9.0.0",
"react-native-viewpager": "^0.2.13",
"react-native-viewpager-indicator": "^0.0.6",
"react-native-web": "~0.19.10",
"react-native-webview": "13.8.6",
"reanimated-bottom-sheet": "^1.0.0-alpha.22",
"typescript": "~5.3.3"
},
"devDependencies": {
"@babel/core": "^7.19.3",
"babel-preset-expo": "~11.0.0"
},
"private": true,
"name": "app1",
"version": "1.0.0",
"description": "some dis",
"keywords": [
"marketing"
],
"author": "it me again",
"license": "MIT"
}
so i spent a lot of time to search what is the problem and found nothing , i tried all the solutions that i found , but still not working
i searched a lot to figure out what i did wrong, but still no success with it