rive-app / rive-app/rive-react-native
Graceful handling of invalid Rive file URLs for iOS after calling `.play` (Expo)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 783
- Forks
- 81
- Avg merge
- 3d 6h
- Merged PRs (30d)
- 3
Description
Description
When providing an invalid URL to the Rive component on iOS and calling .play, the application crashes instead of handling the error gracefully. It would be beneficial to have a fallback mechanism or error handling similar to what is currently implemented on Android, which provides a clear error message without causing a crash.
Steps to Reproduce
- Pass an invalid URL to the Rive component in Expo. e.g.:
<StyledSparkleRive
url="invalidUrl"
ref={riveRef}
artboardName="Artboard"
animationName="Idle"
onError={reportIssue}
/>
- Call
.playon theriveRef.current - Try to test the animation inside your emulator/test device.
Expected Behavior
When an invalid URL is passed to the Rive component, the application should not crash when trying to call .play on the riveRef. Instead, it should handle the error by providing an appropriate message, allowing developers to implement a fallback UI or retry mechanism.
Actual Behavior
The application crashes when the Rive component on iOS receives an invalid URL and is being played using the .play function. No error message is logged. Using the autoplay prop does not cause the animation to crash.
Android Error Handling (for reference)
On Android, the error is handled correctly, and the following message is presented:
json
{
"type": "IncorrectRiveFileUrl",
"message": "Unable to download Rive file from: invalidUrl"
}
Additional Information
- rive-react-native: [6.1.1]
- react-native: [0.71.14]
- expo: [48.0.21]
- Platform: iOS (Android works as expected)
- reproduced on: [both real iOS Device and Simulator]
- environment: [DEV]
It would be greatly appreciated if the same error handling implemented for Android could be applied to the iOS side to improve the robustness of the Rive component in various network conditions or potential server outages.
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 with the iOS Rive component path triggered when calling .play on a remote URL, then compare it with the Android invalid-URL handling described in the issue. Reproduce with url="invalidUrl" in Expo and verify that iOS reports an error through onError without crashing, while preserving the expected fallback behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ios, react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100