Repository: react-native
Issue: ImageBackground sometimes only renders a portion of the image and does not fill the entire space
Labels: Component: Image,Component: ImageBackground,Needs: Repro,Newer Patch Available,Needs: Attention

### Description

There seems to be an issue with the ImageBackground component where it does not always render correctly. 90% of the time, it renders as expected, but that other 10% it won't fill the entire space. Instead, it only shows the image as what appears to be a 150 x 150 block. The issue happens on Android and IOS.

I don't have a reproducer since the issue happens intermittently and looking at a reproducer likely won't actually show you the issue. I've included a screenshot and the code I'm using.

### Steps to reproduce

Use ImageBackground and run the app

### React Native Version

0.76.2

### Affected Platforms

Runtime - Android, Runtime - iOS

### Output of `npx react-native info`

```text
System:
  OS: macOS 13.5
  CPU: (10) arm64 Apple M1 Pro
  Memory: 95.38 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.3.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 3.6.4
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.9.0
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2024.11.18.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.2 AI-232.10300.40.2321.11668458
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 3.1.4
    path: /Users/johngoodman/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.2
    wanted: ^15.1.2
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.2
    wanted: 0.76.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true
```

### Stacktrace or Logs

```text
n/a
```

### Reproducer

...

### Screenshots and Videos

Here's the screenshot - see how the image is only showing in the top right corner - in this instance, it's supposed to fill the entire screen. Again, this image issue only happens 10% of the time and the other 90% the ImageBackground renders as expected ( it fills the entire ImageBackground component ). Also note, the screenshot is of the simulator, but this issue happens in production builds on actual phones too.

<img width="440" alt="Image" src="https://github.com/user-attachments/assets/62cfd118-6d5c-41e5-8aa4-6194ca58cc12" />


Here's the sample code:

```
import React from 'react';
import {
  StyleSheet,
  ImageBackground,
  Image,
  View,
  Text,
  SafeAreaView,
  ScrollView
} from 'react-native';


const gradientDark = require('../../../assets/images/gradient-dark.png');


function Screen() {

  return (
    <ImageBackground
      source={{uri: imageUrl}}
      resizeMode={'cover'}
      style={{height: '100%', resizeMode: 'cover'}}
    >

      <Image
        source={gradientDark}
        resizeMode={'cover'}
        style={styles.imageGradient}
      />

      <SafeAreaView style={[
        isAndroid ? headerPadding : null,
        {position: 'relative', zIndex: 1}]
      }>
        <ScrollView
          showsVerticalScrollIndicator={false}
          bounces={false}
          contentContainerStyle={{flexGrow: 1}}
        >
          <View>
            <Text>Body content goes here</Text>
          </View>
        </ScrollView>
      </SafeAreaView>

      <ImageBackground
        source={gradientDark}
        resizeMode={'cover'}
        style={styles.footer}
      />

    </ImageBackground>
  );
}

export default Screen;


// --

const styles = StyleSheet.create({
  imageGradient: {
    position: 'absolute',
    top: -10,
    zIndex: 0,
    width: '100%',
    height: 260,
    transform: [{rotate: '180deg'}],
    resizeMode: 'cover'
  },
  footer: {
    position: 'absolute',
    bottom: 0,
    zIndex: 0,
    width: '100%',
    height: 200,
    resizeMode: 'cover'
  }
});
```