feat: add RiveImages.loadFromURLAsync for dynamic image loading#39
Conversation
mfazekas
force-pushed
the
mfazekas/referenced-asset-rive-image
branch
2 times, most recently
from
84cd097 to
90b6473
Compare
mfazekas
force-pushed
the
mfazekas/referenced-asset-rive-image
branch
from
50881b8 to
3bf54ec
Compare
mfazekas
changed the title
There was a problem hiding this comment.
Pull request overview
This PR adds support for dynamic image loading in Rive animations through a new RiveImages.loadFromURLAsync API. The feature enables loading images from URLs at runtime and passing them as referenced assets, with full support for React Suspense patterns for loading states.
Key Changes
- Introduces
RiveImageandRiveImageFactoryNitro specs for cross-platform image loading - Implements native iOS and Android support using platform-specific
RiveRenderImageAPIs - Extends
ReferencedAssettype to acceptRiveImageinstances directly alongside existing source types - Adds a comprehensive Suspense example demonstrating async image loading with URL switching
Reviewed changes
Copilot reviewed 15 out of 50 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/specs/RiveImage.nitro.ts | Defines TypeScript interfaces for RiveImage and RiveImageFactory with loadFromURLAsync method |
| src/specs/RiveFile.nitro.ts | Extends ResolvedReferencedAsset to include optional RiveImage field |
| src/index.tsx | Exports RiveImages factory and RiveImage type for public API |
| src/hooks/useRiveFile.ts | Adds isRiveImage type guard and updates parsePossibleSources to handle RiveImage instances |
| src/core/RiveImages.ts | Creates RiveImages factory singleton using NitroModules |
| src/core/ReferencedAssets.ts | Refactors types to support union of ReferencedAssetSource and RiveImage |
| nitrogen/generated/shared/c++/*.{hpp,cpp} | Auto-generated C++ bindings for HybridRiveImageSpec and HybridRiveImageFactorySpec |
| nitrogen/generated/ios/swift/*.swift | Auto-generated Swift protocol and wrapper classes for iOS implementation |
| nitrogen/generated/ios/c++/*.{hpp,cpp} | Auto-generated iOS C++ bridge code for Swift interop |
| nitrogen/generated/ios/RNRiveAutolinking.* | Registers RiveImage and RiveImageFactory in iOS autolinking system |
| nitrogen/generated/android/kotlin/*.kt | Auto-generated Kotlin abstract classes for Android implementation |
| nitrogen/generated/android/c++/*.{hpp,cpp} | Auto-generated Android JNI bridge code |
| nitrogen/generated/android/riveOnLoad.cpp | Registers RiveImage and RiveImageFactory in Android autolinking |
| nitrogen/generated/android/rive+autolinking.cmake | Adds generated files to Android CMake build |
| nitro.json | Configures autolinking for HybridRiveImage and HybridRiveImageFactory classes |
| ios/ReferencedAssetLoader.swift | Implements handlePreloadedImage to support passing RiveImage instances |
| ios/HybridRiveImageFactory.swift | Implements URL-based image loading using URLSession and RiveRenderImage |
| ios/HybridRiveImage.swift | Wraps RiveRenderImage with byteSize property for native iOS |
| android/src/main/java/.../ReferencedAssetLoader.kt | Updates to use RiveRenderImage.fromEncoded and handle pre-loaded images |
| android/src/main/java/.../HybridRiveImageFactory.kt | Implements URL-based image loading using HttpURLConnection |
| android/src/main/java/.../HybridRiveImage.kt | Wraps RiveRenderImage with byteSize property for native Android |
| example/src/pages/index.ts | Exports new OutOfBandAssetsWithSuspense example |
| example/src/pages/OutOfBandAssetsWithSuspense.tsx | Demonstrates React Suspense with RiveImages.loadFromURLAsync for dynamic image loading |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
mfazekas
force-pushed
the
mfazekas/referenced-asset-rive-image
branch
from
5006f9b to
3bf54ec
Compare
| * Factory for creating RiveImage instances from various sources. | ||
| * Exposed as `RiveImages` in the public API. | ||
| */ | ||
| export interface RiveImageFactory |
There was a problem hiding this comment.
Should we add more options on to op URL. For .riv file loading we have network/local-assets/bundled/bytes. Might not need all the same options, or would we expect in React Native people will normally be working with a network asset?
There was a problem hiding this comment.
@HayesGordon good point. Yes we'll need other options, http was the easiest to kickstart, I'll add support for other sources in followup pr.
HayesGordon
left a comment
HayesGordon
left a comment
There was a problem hiding this comment.
This is great! A few considerations:
- Making shared logic for network (similar) operations
- Expanding the options to create a
RiveImage - We need to do the same for fonts!
None of this is blocking. Great work!
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 19 out of 54 changed files in this pull request and generated 8 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
mfazekas
force-pushed
the
mfazekas/referenced-asset-rive-image
branch
from
871df0c to
be3511c
Compare
mfazekas
force-pushed
the
mfazekas/referenced-asset-rive-image
branch
2 times, most recently
from
48bb684 to
3ba8a15
Compare
mfazekas
force-pushed
the
mfazekas/referenced-asset-rive-image
branch
from
3ba8a15 to
645f7ad
Compare
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit
ktlint
🚫 [ktlint] standard:no-trailing-spaces reported by reviewdog 🐶
Trailing space(s)
🚫 [ktlint] standard:no-consecutive-blank-lines reported by reviewdog 🐶
Needless blank line(s)
🚫 [ktlint] standard:parameter-list-wrapping reported by reviewdog 🐶
Parameter should start on a newline
🚫 [ktlint] standard:parameter-list-wrapping reported by reviewdog 🐶
Parameter should start on a newline
🚫 [ktlint] standard:parameter-list-wrapping reported by reviewdog 🐶
Parameter should start on a newline
🚫 [ktlint] standard:parameter-list-wrapping reported by reviewdog 🐶
Parameter should start on a newline
🚫 [ktlint] standard:parameter-list-wrapping reported by reviewdog 🐶
Parameter should start on a newline
🚫 [ktlint] standard:parameter-list-wrapping reported by reviewdog 🐶
Missing newline before ")"
🚫 [ktlint] standard:max-line-length reported by reviewdog 🐶
Exceeded max line length (140)
- Add RiveImage nitro spec and factory for loading images from URLs - Implement iOS native support using RiveRenderImage - Support passing RiveImage directly to referencedAssets - Add Suspense example demonstrating async image loading
mfazekas
force-pushed
the
mfazekas/referenced-asset-rive-image
branch
from
237ac42 to
d7af261
Compare
HayesGordon
left a comment
HayesGordon
left a comment
There was a problem hiding this comment.
LGTM! Something we can explore in a follow up PR for Android and iOS is to make the creation of these assets, for example, RiveRenderImage, run on a background thread. I need to ask internally if there is much advantage to doing that.
TODO: