microsoft / microsoft/react-native-windows
Changing an Image's source prop to an empty object behaves differently than setting its URI property undefined
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 17.3k
- Forks
- 1.2k
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 33
Description
Problem Description
When changing an Image component's source prop to be an empty object or one that otherwise does not explicitly define the uri property of that prop's object, the Image component's background ImageBrush never updates to an empty image. However, if you set the source prop to be { uri: undefined }, the ImageBrush does update.
This seems to be due to the former causing the parsed ReactImageSource object here taking a default string value in the former case, but setting it to "null" in the latter case. The former causes this conditional to trigger and return early before modifying the brush.
I patched this in our project by adding a line to set the background brush ad nullptr when that conditional is triggered, but wondering if there should be a larger fix here since the property values of an omitted source vs one explicitly set to undefined theoretically should be the same.
Steps To Reproduce
Declare an Image component and set its source property to be a valid image.
Then, either via a button or timeout, change its source property to be an empty object, and observe that the Image used as the background brush does not change from its old value.
Then. change its source to be { uri: undefined }. Observe that the background brush now updates properly.
Expected Results
Both of these source property values should have the same behavior.
CLI version
7.0.3
Environment
System:
OS: Windows 10 10.0.22635
CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1270P
Memory: 20.86 GB / 47.67 GB
Binaries:
Node: 18.17.1 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions: 10.0.18362.0, 10.0.19041.0, 10.0.22621.0
IDEs:
Android Studio: Not Found
Visual Studio: 17.7.34302.85 (Visual Studio Enterprise 2022)
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: 7.0.3 => 7.0.3
react: 18.0.0 => 18.0.0
react-native: 0.69.3 => 0.69.3
react-native-windows: 0.69.19 => 0.69.19
npmGlobalPackages:
*react-native*: Not Found
Target Platform Version
10.0.19041
Target Device(s)
Desktop
Visual Studio Version
Visual Studio 2022
Build Configuration
Debug
Snack, code example, screenshot, or link to a repository
const [imageUri, setImageUri] = useState({});
const changeImage = () => setImageUri(imageUri.uri ? {} : { uri: "https://picsum.photos/200/300" });
return (<>
<Image source={imageUri} style={{ height: 100, width: 100 }} />
<Button onPress={changeImage} title="Change Image" />
</>);
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in vnext/Microsoft.ReactNative/Views/Image/ImageViewManager.cpp around line 187, then inspect the conditional in vnext/Microsoft.ReactNative/Views/Image/ReactImage.cpp around lines 155-158. Reproduce the issue with the provided JSX example by switching between a valid URI, an empty object, and { uri: undefined }; done means the background ImageBrush behaves the same for both empty-source forms.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cpp, react-native
- Domain
- desktop, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 48/100