Skip to content

Fix Android Image defaultSource runtime error#49097

Closed
mateoguzmana wants to merge 2 commits into
react:mainfrom
mateoguzmana:fix/android-default-source-broken
Closed

Fix Android Image defaultSource runtime error#49097
mateoguzmana wants to merge 2 commits into
react:mainfrom
mateoguzmana:fix/android-default-source-broken

Conversation

@mateoguzmana

Copy link
Copy Markdown
Collaborator

Summary:

Fixes #49075

The Image defaultSource prop is causing a runtime error from 0.77 just by using it in the Image component (see error in the linked issue). This might be a regression from some changes in the prop processing logic from either #47710, #47713 or #47754.

Changelog:

[ANDROID] [FIXED] - Fix Image defaultSource runtime error

Test Plan:

  • Verify it doesn't throw any error on runtime anymore for Android.
  • iOS behaviour should not be impacted as changes are Android specific

In the RNTester, you can use the following component:

import * as React from 'react';
import {Image, View} from 'react-native';

function Playground() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Image
        defaultSource={require('../../assets/bandaged.png')}
        source={{
          uri: 'https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_4x3.jpg',
        }}
        style={{width: 200, height: 200}}
      />
    </View>
  );
}

Also, this defaultSource prop is ignored in debug builds for Android (as per the docs) – but I've verified we get the defaultSource as a string, which is what we expect on the native side:

Screenshot of the Android logs

image

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jan 31, 2025
@facebook-github-bot facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Jan 31, 2025
@mateoguzmana
mateoguzmana marked this pull request as draft January 31, 2025 16:10
@cortinico
cortinico requested a review from dmytrorykun January 31, 2025 16:17
@mateoguzmana
mateoguzmana marked this pull request as ready for review January 31, 2025 16:21

@dmytrorykun dmytrorykun left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Accepting to address the regression. Will try to fix this forward during next several weeks.

@facebook-github-bot

Copy link
Copy Markdown
Contributor

@cortinico has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label Feb 4, 2025
@facebook-github-bot

Copy link
Copy Markdown
Contributor

@cortinico merged this pull request in 1c51b77.

@react-native-bot

Copy link
Copy Markdown
Collaborator

This pull request was successfully merged by @mateoguzmana in 1c51b77

When will my fix make it into a release? | How to file a pick request?

fbp93 pushed a commit to fbp93/react-native that referenced this pull request Mar 7, 2025
Summary:
Fixes react#49075

The Image `defaultSource` prop is causing a runtime error from 0.77 just by using it in the Image component (see error in the linked issue). This might be a regression from some changes in the prop processing logic from either react#47710, react#47713 or react#47754.

## Changelog:

[ANDROID] [FIXED] - Fix Image defaultSource runtime error

Pull Request resolved: react#49097

Test Plan:
- Verify it doesn't throw any error on runtime anymore for Android.
- iOS behaviour should not be impacted as changes are Android specific

In the RNTester, you can use the following component:

```tsx
import * as React from 'react';
import {Image, View} from 'react-native';

function Playground() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Image
        defaultSource={require('../../assets/bandaged.png')}
        source={{
          uri: 'https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_4x3.jpg',
        }}
        style={{width: 200, height: 200}}
      />
    </View>
  );
}
```

Also, this `defaultSource` prop is ignored in debug builds for Android ([as per the docs](https://reactnative.dev/docs/image#defaultsource)) – but I've verified we get the defaultSource as a string, which is what we expect on the native side:

<details>
<summary>Screenshot of the Android logs</summary>

![image](https://github.com/user-attachments/assets/e62ae2c3-6a93-4e44-a2d7-c913f5db2173)

</details>

Reviewed By: javache

Differential Revision: D69052723

Pulled By: cortinico

fbshipit-source-id: 2860dd4c18cefcfcbc4e39f94dfa6305f45773a3

# Conflicts:
#	packages/react-native/Libraries/Image/ImageViewNativeComponent.js
cortinico pushed a commit that referenced this pull request Mar 10, 2025
Summary:
Fixes #49075

The Image `defaultSource` prop is causing a runtime error from 0.77 just by using it in the Image component (see error in the linked issue). This might be a regression from some changes in the prop processing logic from either #47710, #47713 or #47754.

## Changelog:

[ANDROID] [FIXED] - Fix Image defaultSource runtime error

Pull Request resolved: #49097

Test Plan:
- Verify it doesn't throw any error on runtime anymore for Android.
- iOS behaviour should not be impacted as changes are Android specific

In the RNTester, you can use the following component:

```tsx
import * as React from 'react';
import {Image, View} from 'react-native';

function Playground() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Image
        defaultSource={require('../../assets/bandaged.png')}
        source={{
          uri: 'https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_4x3.jpg',
        }}
        style={{width: 200, height: 200}}
      />
    </View>
  );
}
```

Also, this `defaultSource` prop is ignored in debug builds for Android ([as per the docs](https://reactnative.dev/docs/image#defaultsource)) – but I've verified we get the defaultSource as a string, which is what we expect on the native side:

<details>
<summary>Screenshot of the Android logs</summary>

![image](https://github.com/user-attachments/assets/e62ae2c3-6a93-4e44-a2d7-c913f5db2173)

</details>

Reviewed By: javache

Differential Revision: D69052723

Pulled By: cortinico

fbshipit-source-id: 2860dd4c18cefcfcbc4e39f94dfa6305f45773a3

# Conflicts:
#	packages/react-native/Libraries/Image/ImageViewNativeComponent.js

Co-authored-by: Mateo Guzmán <info@mateoguzman.net>
@react-native-bot

Copy link
Copy Markdown
Collaborator

This pull request was successfully merged by @fbp93 in 7c50b5e

When will my fix make it into a release? | How to file a pick request?

cipolleschi pushed a commit that referenced this pull request Mar 18, 2025
Summary:
Fixes #49075

The Image `defaultSource` prop is causing a runtime error from 0.77 just by using it in the Image component (see error in the linked issue). This might be a regression from some changes in the prop processing logic from either #47710, #47713 or #47754.

[ANDROID] [FIXED] - Fix Image defaultSource runtime error

Pull Request resolved: #49097

Test Plan:
- Verify it doesn't throw any error on runtime anymore for Android.
- iOS behaviour should not be impacted as changes are Android specific

In the RNTester, you can use the following component:

```tsx
import * as React from 'react';
import {Image, View} from 'react-native';

function Playground() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Image
        defaultSource={require('../../assets/bandaged.png')}
        source={{
          uri: 'https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_4x3.jpg',
        }}
        style={{width: 200, height: 200}}
      />
    </View>
  );
}
```

Also, this `defaultSource` prop is ignored in debug builds for Android ([as per the docs](https://reactnative.dev/docs/image#defaultsource)) – but I've verified we get the defaultSource as a string, which is what we expect on the native side:

<details>
<summary>Screenshot of the Android logs</summary>

![image](https://github.com/user-attachments/assets/e62ae2c3-6a93-4e44-a2d7-c913f5db2173)

</details>

Reviewed By: javache

Differential Revision: D69052723

Pulled By: cortinico

fbshipit-source-id: 2860dd4c18cefcfcbc4e39f94dfa6305f45773a3
@react-native-bot

Copy link
Copy Markdown
Collaborator

This pull request was successfully merged by @mateoguzmana in 665212e

When will my fix make it into a release? | How to file a pick request?

Flewp pushed a commit to discord/react-native-archived that referenced this pull request Apr 7, 2025
Summary:
Fixes react#49075

The Image `defaultSource` prop is causing a runtime error from 0.77 just by using it in the Image component (see error in the linked issue). This might be a regression from some changes in the prop processing logic from either react#47710, react#47713 or react#47754.

[ANDROID] [FIXED] - Fix Image defaultSource runtime error

Pull Request resolved: react#49097

Test Plan:
- Verify it doesn't throw any error on runtime anymore for Android.
- iOS behaviour should not be impacted as changes are Android specific

In the RNTester, you can use the following component:

```tsx
import * as React from 'react';
import {Image, View} from 'react-native';

function Playground() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Image
        defaultSource={require('../../assets/bandaged.png')}
        source={{
          uri: 'https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_4x3.jpg',
        }}
        style={{width: 200, height: 200}}
      />
    </View>
  );
}
```

Also, this `defaultSource` prop is ignored in debug builds for Android ([as per the docs](https://reactnative.dev/docs/image#defaultsource)) – but I've verified we get the defaultSource as a string, which is what we expect on the native side:

<details>
<summary>Screenshot of the Android logs</summary>

![image](https://github.com/user-attachments/assets/e62ae2c3-6a93-4e44-a2d7-c913f5db2173)

</details>

Reviewed By: javache

Differential Revision: D69052723

Pulled By: cortinico

fbshipit-source-id: 2860dd4c18cefcfcbc4e39f94dfa6305f45773a3
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0.77: Error when updating defaultsource property of <Image /> component (Android)

4 participants