rive-app / rive-app/rive-react-native

Graceful handling of invalid Rive file URLs for iOS after calling `.play` (Expo)

Open
#211 0 comments 2 reactions 0 assignees View on GitHub

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
  1. Pass an invalid URL to the Rive component in Expo. e.g.:
<StyledSparkleRive
    url="invalidUrl"
	ref={riveRef}
    artboardName="Artboard"
    animationName="Idle"
    onError={reportIssue}
/>
  1. Call .play on the riveRef.current
  2. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.