[RN][Android] Fix <Image/> Logbox feedback loop

[cipolleschi]

Description

When src is null, the <Image/> component displays a warning in LogBox.

The feedback loop:

• Some component renders an <Image/>
• Fabric preallocates the image, setting null src.
• ReactImageView receives null src, emits warning.
• Warning dispatches native -> js call, rendering LogBox, which uses <Image/>
• Fabric preallocates the image, setting null src.
• Goto 3

This feedback loop was originally deactivated in bridgeless.

Why: In step 4, this line would never execute: context.hasActiveReactInstance() would always return false. (ThemedReactContext was broken but we fixed it).

We should fix this feedback loop, and re-enable this warning in bridgeless.
Hint at a potential fix:

• Prevent view preallocation from assigning a null src to preallocated views

Steps to reproduce

N/A

React Native Version

0.75.2

Affected Platforms

Runtime - Android

Areas

Fabric - The New Renderer

Output of npx react-native info

N/A

Stacktrace or Logs

N/A

Reproducer

https://github.com/facebook/react-native/packages/rn-tester

Screenshots and Videos

No response

[react-native-bot]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[react-native-bot]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[deepanshushuklad11]

@cipolleschi can you please explain more about view preallocation ?

[cipolleschi]

@deepanshushuklad11 Thanks for the interest in this issue! This is a task I created to mirror an internal task as we are collaborating with another company which is helping with some bugs. Let's leave this to them for the time being! ;)

[coado]

@cipolleschi I am not sure if I understand that correctly, but I think that warnImageSource is called only in the setSource function, which is called with uri props passed by the user, so the preallocation does not cause calling warnImageSource function or is it something that should also be added here?

For this code and with activating on bridgeless here, should it technically cause the feedback loop to happen in the current configuration?

import { Image, StyleSheet, SafeAreaView } from "react-native";

const IMAGE1 =
  'https://www.facebook.com/assets/fb_lite_messaging/[email protected]';


const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Image style={styles.image} source={{ uri: IMAGE1 }} />
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 200,
    height: 200,
  },
})

export default App;

[cipolleschi]

@coado As far as I understand, yes, it should happen. But I also think that the warning has been disabled in Bridgeless mode, so that's why you are not seeing it.
What happens if you assign {uri: null} to the image?

[coado]

@coado As far as I understand, yes, it should happen. But I also think that the warning has been disabled in Bridgeless mode, so that's why you are not seeing it. What happens if you assign {uri: null} to the image?

When I remove !ReactFeatureFlags.enableBridgelessArchitecture from the if statement here (enabling on bridgeless) and set uri: IMAGE1 there is no warning. When I set uri: null there is a warning but no infinite loop.

[cipolleschi]

ok, so perhaps this has been fixed somehow by some other fix and the responsible for the task internally forgot to close the task.
Potentially we could close this...

@RSNara could you help out and double check this?