-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[RNMobile] Update Image component to avoid flicker when updating the …
…URI (#57869) * Update native image component to avoid flicker when updating the URI * Update non-visible Image block styles * Update mobile Image block to use separate network and local image URL behavior between platforms * Update Image block platform fetching logic * Update Android logic for Image block platform fetching logic * Add further updates to Image block platform logic * Fix code formatting issue in Image block source prop * Resolve RNImage.prefetch promise * Update CHANGELOG * Update non-visible image styles Resolves layout display issue when block is selected * Remove duplicate references to localURL * Fix Replace Image behavior to update from localURL * Refactor Image block URL handling logic * test: Fix failures due to image component modifications (#58213) The mobile image component introduce new asynchronous effects. We must await the result of those effect, in the form of asserting UI changes from the subsequent state updates, to satisfy the React test utilities expectation that unexpected re-renders do not occur after the test completes. Additionally, there were instances of awaiting `act` invocations that were not asynchronous. The erroneous usage of `await` for these synchronous `act` calls resulted in cryptic errors. In reality, the logic run within these `act` calls are synchronous and should merely be wrapped in `act` to signal that they result in a re-render. * Update nonVisibleImage styles Using width: 1 and height: 1 ensures that onLoad will fire * Update packages/components/src/mobile/image/index.native.js Co-authored-by: David Calhoun <[email protected]> * Update RNImage error handler event with code comment * Update selected images styles on iOS to account for non-visible image On iOS, add 1 to height to account for the 1px non-visible image that is used to determine when the network image has loaded We also must verify that it is not NaN, as it can be NaN when the image is loading. --------- Co-authored-by: David Calhoun <[email protected]>
- Loading branch information
1 parent
ceb3c1c
commit 7b77931
Showing
5 changed files
with
140 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -171,3 +171,9 @@ | |
.wide { | ||
width: 100%; | ||
} | ||
|
||
.nonVisibleImage { | ||
height: 1; | ||
width: 1; | ||
opacity: 0; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@derekblank seems this entry was added to the wrong section when merging.