Question 388844 in React native Question posted in
The official React Native documentation can be found here.

React native – Static Images Not Loading with `<ImageBackground>` After Upgrading to Expo SDK 51

I have recently upgraded my Expo project from SDK 50 to SDK 51, and now my static images are not loading when using the <ImageBackground> component. Previously, this setup worked perfectly in SDK 50, but after the upgrade, it only loads images through the uri property. Here is the code snippet illustrating the issue.

This works

import { ImageBackground } from "react-native";

<ImageBackground
  source={{ uri: "https://some-url/background.png" }}
  resizeMode="cover"
  style={styles.background}
>
// some code here
</ImageBackground>

This does not work

import { ImageBackground } from "react-native";

<ImageBackground
  source={require("../../assets/image.png")}
  resizeMode="cover"
  style={styles.background}
>
// some code here
</ImageBackground>

In Expo SDK 50, the second snippet worked perfectly. After upgrading to SDK 51, it no longer displays the static image.

Dependencies in package.json

"dependencies": {
  "@react-native-async-storage/async-storage": "1.21.0",
  "@react-navigation/bottom-tabs": "^6.5.19",
  "@react-navigation/drawer": "^6.6.14",
  "@react-navigation/native": "^6.1.16",
  "@react-navigation/native-stack": "^6.9.25",
  "@reduxjs/toolkit": "^2.2.1",
  "axios": "^1.6.7",
  "expo": "^51.0.8",
  "expo-location": "~16.5.5",
  "expo-status-bar": "~1.11.1",
  "expo-updates": "~0.24.12",
  "react": "18.2.0",
  "react-native": "0.73.5",
  "react-native-element-dropdown": "^2.10.2",
  "react-native-gesture-handler": "~2.14.0",
  "react-native-gifted-chat": "^2.4.0",
  "react-native-keyboard-aware-scroll-view": "^0.9.5",
  "react-native-maps": "1.10.0",
  "react-native-paper": "^5.12.3",
  "react-native-reanimated": "~3.6.2",
  "react-native-root-toast": "^3.5.1",
  "react-native-safe-area-context": "4.8.2",
  "react-native-screens": "~3.29.0",
  "react-native-svg": "14.1.0",
  "react-native-tab-view": "^3.5.2",
  "react-native-vector-icons": "^10.0.3",
  "react-native-webview": "13.6.4",
  "react-native-youtube-iframe": "^2.3.0",
  "react-redux": "^9.1.0",
  "redux-persist": "^6.0.0",
  "uuid": "^9.0.1"
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found a solution, I ran npx expo-doctor@latest and was able to fix dependency issues. This resolved the problem with static images not loading in <ImageBackground> after upgrading to Expo SDK 51.


  2. 0

    Why do you not use import statements for images like so? Maybe this could be it!

    import { ImageBackground } from "react-native";
import Image from "../../assets/image.png";

<ImageBackground
  source={Image}
  resizeMode="cover"
  style={styles.background}
>
// some code here
</ImageBackground>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search