Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(image): enabling basic cache control for android #47182

Conversation

mateoguzmana
Copy link
Contributor

Summary:

Fixes #12606

Previously, Image cache control options were not functional on Android, even though they were being passed to the native component via the source prop. This PR addresses that by implementing logic to manage cache behaviour on Android.

When the reload option is explicitly set, the image is now evicted from both memory and disk caches before a new request is made. This ensures the image is always fetched from the source, aligning the caching behaviour between Android and iOS for the default and reload options.

Changelog:

[ANDROID][ADDED] - Enabling basic Image cache control for Android

Test Plan:

Added a new example to the rn-tester, where we can notice that the image on the right is reloaded if rendered or re-rendered as the cache policy is set to reload. The image on the left has the cache policy set to default and won't be re-rendered as the image is already in the cache. See the video below:

Screen.Recording.2024-10-23.at.23.31.02.mov

Also tested on both old and new architecture.

@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 Oct 23, 2024
@react-native-bot
Copy link
Collaborator

Fails
🚫

Danger failed to run dangerfile.js.

Error ReferenceError

validateChangelog is not defined
ReferenceError: validateChangelog is not defined
    at Object.<anonymous> (dangerfile.js:48:18)
    at Module._compile (node:internal/modules/cjs/loader:1364:14)
    at requireFromString (/home/runner/work/react-native/react-native/node_modules/require-from-string/index.js:28:4)
    at /home/runner/work/react-native/react-native/node_modules/danger/distribution/runner/runners/inline.js:161:68
    at step (/home/runner/work/react-native/react-native/node_modules/danger/distribution/runner/runners/inline.js:52:23)
    at Object.next (/home/runner/work/react-native/react-native/node_modules/danger/distribution/runner/runners/inline.js:33:53)
    at /home/runner/work/react-native/react-native/node_modules/danger/distribution/runner/runners/inline.js:27:71
    at new Promise (<anonymous>)
    at __awaiter (/home/runner/work/react-native/react-native/node_modules/danger/distribution/runner/runners/inline.js:23:12)
    at runDangerfileEnvironment (/home/runner/work/react-native/react-native/node_modules/danger/distribution/runner/runners/inline.js:118:132)
    at /home/runner/work/react-native/react-native/node_modules/danger/distribution/platforms/GitHub.js:181:38
    at step (/home/runner/work/react-native/react-native/node_modules/danger/distribution/platforms/GitHub.js:44:23)
    at Object.next (/home/runner/work/react-native/react-native/node_modules/danger/distribution/platforms/GitHub.js:25:53)
    at /home/runner/work/react-native/react-native/node_modules/danger/distribution/platforms/GitHub.js:19:71
    at new Promise (<anonymous>)
    at __awaiter (/home/runner/work/react-native/react-native/node_modules/danger/distribution/platforms/GitHub.js:15:12)
    at Object.executeRuntimeEnvironment (/home/runner/work/react-native/react-native/node_modules/danger/distribution/platforms/GitHub.js:144:88)
    at /home/runner/work/react-native/react-native/node_modules/danger/distribution/commands/danger-runner.js:101:47
    at step (/home/runner/work/react-native/react-native/node_modules/danger/distribution/commands/danger-runner.js:34:23)
    at Object.next (/home/runner/work/react-native/react-native/node_modules/danger/distribution/commands/danger-runner.js:15:53)
    at fulfilled (/home/runner/work/react-native/react-native/node_modules/danger/distribution/commands/danger-runner.js:6:58)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Dangerfile

43|     'This will require a manual import by a Facebook employee.';
44|   warn(`${title} - <i>${idea}</i>`);
45| }
46| 
47| // Provides advice if a test plan is missing.
--------------------^
48| const includesTestPlan =
49|   danger.github.pr.body &&
50|   danger.github.pr.body.toLowerCase().includes('## test plan');
51| if (!includesTestPlan && !isFromPhabricator) {

Generated by 🚫 dangerJS against c2b0e6c

@mateoguzmana mateoguzmana marked this pull request as ready for review October 23, 2024 22:10
@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 Oct 23, 2024
@facebook-github-bot
Copy link
Contributor

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

facebook-github-bot pushed a commit that referenced this pull request Oct 25, 2024
Summary:
Danger seems to have a bug where it's not transpiling the import of
rnx-kit/rn-changelog-generator. This mitigates the issue to get our
project back on track.

This can be replicated locally by:

```bash
DEBUG="*" DANGER_GITHUB_API_TOKEN=$GITHUB_TOKEN yarn danger pr #47182
```
You can see it running correctly here when switching to the branch with the fix.  **I'm a little concerned that this is still failing on the PR**.  Thoughts?

 {F1946190275}

Changelog: [internal]

Pull Request resolved: #47192

Reviewed By: cortinico

Differential Revision: D64924466

Pulled By: blakef

fbshipit-source-id: 68df0521620809effe3a78ce842e043382ad64a6
@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label Oct 31, 2024
@react-native-bot
Copy link
Collaborator

This pull request was successfully merged by @mateoguzmana in e5dd7d6

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

@facebook-github-bot
Copy link
Contributor

@Abbondanzo merged this pull request in e5dd7d6.

facebook-github-bot pushed a commit that referenced this pull request Nov 4, 2024
…47348)

Summary:
Following up from #47182, as basic caching control is already in place in Android, it can be extended to include the `only-if-cached` option.

We check whether the image is in the cache. If it is, we proceed to load it. Otherwise, we do nothing.

## Changelog:

[ANDROID] [ADDED] - Image `only-if-cached` cache control option

Pull Request resolved: #47348

Test Plan:
In the `rn-tester`, I added a third example for Android where the third image will never be loaded as the cache policy is set to `only-if-cached` and the image has not been loaded before.

<details>
<summary>Video demonstrating how the `only-if-cached` options behaves</summary>

https://github.com/user-attachments/assets/45669e81-5414-4103-8931-138bffa81447

</details>

<details>
<summary>Error from image not found in cache example</summary>

<img width="807" alt="image" src="https://github.com/user-attachments/assets/6b79d811-1809-437c-b2fe-c86d3da7c58d">

</details>

Reviewed By: rshest

Differential Revision: D65384639

Pulled By: Abbondanzo

fbshipit-source-id: f4a72694f45eb3d7097c350f4a4008a0abf0a1ab
facebook-github-bot pushed a commit that referenced this pull request Nov 12, 2024
)

Summary:
This PR follows up on #47182 and #47348 by adding `force-cache`, the final missing option to align caching controls with the existing behavior on iOS.

Local caching behavior remains unchanged: if a cached image is available locally, it will be returned; otherwise, a network request will be made.

When an image request is sent over the network, the `force-cache` option sent from the sent fJS side will now use the `okhttp3.CacheControl.FORCE_CACHE` directive.

## Changelog:

[ANDROID] [ADDED] - Image `force-cache` caching control option

Pull Request resolved: #47426

Test Plan:
New example added to the RNTester under the cache policy examples. Then inspecting that the cache control is set correctly before sending it in the `okhttp3.Request` builder.

```kt
FLog.w("ReactNative", "fetching uri: %s, with cacheControl: %s", uri, cacheControlBuilder.build().toString())
// fetching uri: https:...png?cacheBust=force-cache, with cacheControl: no-store, max-stale=2147483647, only-if-cached
```

This case was a bit more tricky to test in terms of e2e as it would involve some caching in the server as well, I'm open to suggestions to make this more complete.

Reviewed By: javache

Differential Revision: D65490360

Pulled By: Abbondanzo

fbshipit-source-id: f807a9793f85caea39c59a370d057b9a1d450a78
facebook-github-bot pushed a commit that referenced this pull request Dec 9, 2024
…ts (#47953)

Summary:
This is a follow up for the new cache control options for the Android Image component introduced in #47182, #47348 & #47426. And to make sure the cache control header works as expected and avoid missing the issue fixed in #47922, this PR introduces test cases to make sure this is getting applied as expected in the `ReactOkHttpNetworkFetcher`.

## Changelog:

[INTERNAL] [ADDED] - `ReactOkHttpNetworkFetcher` cache control tests

Pull Request resolved: #47953

Test Plan:
```bash
yarn test-android
```

Reviewed By: rshest

Differential Revision: D66498305

Pulled By: javache

fbshipit-source-id: 7a9a0cc596e49964943e59189614743ca8a472a1
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.

Image never reloads with same uri
3 participants