react-native
react-native copied to clipboard
facebook
[RN][Android] Fix <Image/> Logbox feedback loop
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
nullsrc. ReactImageViewreceivesnullsrc, emits warning.- Warning dispatches native -> js call, rendering
LogBox, which uses<Image/> - Fabric preallocates the image, setting
nullsrc. - 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
| :warning: | Missing Reproducible Example |
|---|---|
| :information_source: | We could not detect a reproducible example in your issue report. Please provide either:
|
| :warning: | Missing Reproducible Example |
|---|---|
| :information_source: | We could not detect a reproducible example in your issue report. Please provide either:
|
@cipolleschi can you please explain more about view preallocation ?
@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! ;)
@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;
@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 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.
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?
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.
This issue was closed because it has been stalled for 7 days with no activity.