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

Rive animation cannot be loaded on android build

Open
#151 2 comments 0 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

Hey!
I recently added Rive for some animations to my app and they worked great in development mode. However, after building both for iOS and android, I noticed that the animations won't play on android. Everything works fine on iOS.
I cut out the log of my android phone when I'm trying to play the animation:

10993 E Volley  : [108] NetworkDispatcher.processRequest: Unhandled exception java.lang.RuntimeException: Bad URL src_animations_rive_animation
10993 E Volley  : java.lang.RuntimeException: Bad URL src_animations_rive_animation
10993 E Volley  : 	at com.android.volley.toolbox.NetworkUtility.shouldRetryException(NetworkUtility.java:164)
10993 E Volley  : 	at com.android.volley.toolbox.BasicNetwork.performRequest(BasicNetwork.java:145)
10993 E Volley  : 	at com.android.volley.NetworkDispatcher.processRequest(NetworkDispatcher.java:132)
10993 E Volley  : 	at com.android.volley.NetworkDispatcher.processRequest(NetworkDispatcher.java:111)
10993 E Volley  : 	at com.android.volley.NetworkDispatcher.run(NetworkDispatcher.java:90)
10993 E Volley  : Caused by: java.net.MalformedURLException: no protocol: src_animations_rive_animation
10993 E Volley  : 	at java.net.URL.<init>(URL.java:601)
10993 E Volley  : 	at java.net.URL.<init>(URL.java:498)
10993 E Volley  : 	at java.net.URL.<init>(URL.java:447)
10993 E Volley  : 	at com.android.volley.toolbox.HurlStack.executeRequest(HurlStack.java:82)
10993 E Volley  : 	at com.android.volley.toolbox.BasicNetwork.performRequest(BasicNetwork.java:104)
10993 E Volley  : 	... 3 more

So, apparently, android is having a problem finding the animation because of a "bad URL". I'm working with expo and oriented myself here: #123 to load the assets - which works fine in the dev build and on iOS deployment but seems to have problems on android deployment.

A small snippet how I'm loading them:

import { Asset }  from 'expo-asset'
import riveAnimation from "../../animations/rive_animation.riv";

const myAnimation = Asset.fromModule(riveAnimation);

...

<Rive url={myAnimation.localUri || myAnimation.uri} />

Playing is handled with a ref but that should not be relevant here.

Did anyone else experience this issue and found a solution? Any help is highly appreciated!

I also already tried passing myAnimation.name to the resourceName if the platform is android, but that led to a crash. A log of that one is beneath, if relevant

See crash error 
 E AndroidRuntime: FATAL EXCEPTION: expo-updates-error-recovery
 E AndroidRuntime: java.lang.IllegalStateException: File resource not found. You must provide correct url or resourceName!
 E AndroidRuntime: 	at com.rivereactnative.RiveReactNativeView.handleFileNotFound(RiveReactNativeView.kt:394)
 E AndroidRuntime: 	at com.rivereactnative.RiveReactNativeView.reloadIfNeeded(RiveReactNativeView.kt:294)
 E AndroidRuntime: 	at com.rivereactnative.RiveReactNativeView.update(RiveReactNativeView.kt:202)
 E AndroidRuntime: 	at com.rivereactnative.RiveReactNativeViewManager.onAfterUpdateTransaction(RiveReactNativeViewManager.kt:124)
 E AndroidRuntime: 	at com.rivereactnative.RiveReactNativeViewManager.onAfterUpdateTransaction(RiveReactNativeViewManager.kt:10)
 E AndroidRuntime: 	at com.facebook.react.uimanager.ViewManager.updateProperties(ViewManager.java:88)
 E AndroidRuntime: 	at com.facebook.react.uimanager.ViewManager.createViewInstance(ViewManager.java:188)
 E AndroidRuntime: 	at com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:115)
 E AndroidRuntime: 	at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:281)
 E AndroidRuntime: 	at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:194)
 E AndroidRuntime: 	at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:909)
 E AndroidRuntime: 	at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:1026)
 E AndroidRuntime: 	at com.facebook.react.uimanager.UIViewOperationQueue.access$2600(UIViewOperationQueue.java:47)
 E AndroidRuntime: 	at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1086)
 E AndroidRuntime: 	at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
 E AndroidRuntime: 	at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)
 E AndroidRuntime: 	at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)
 E AndroidRuntime: 	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1140)
 E AndroidRuntime: 	at android.view.Choreographer.doCallbacks(Choreographer.java:946)
 E AndroidRuntime: 	at android.view.Choreographer.doFrame(Choreographer.java:870)
 E AndroidRuntime: 	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1127)
 E AndroidRuntime: 	at android.os.Handler.handleCallback(Handler.java:938)
 E AndroidRuntime: 	at android.os.Handler.dispatchMessage(Handler.java:99)
 E AndroidRuntime: 	at android.os.Looper.loopOnce(Looper.java:210)
 E AndroidRuntime: 	at android.os.Looper.loop(Looper.java:299)
 E AndroidRuntime: 	at android.app.ActivityThread.main(ActivityThread.java:8105)
 E AndroidRuntime: 	at java.lang.reflect.Method.invoke(Native Method)
 E AndroidRuntime: 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:556)
 E AndroidRuntime: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1045)
 D OOMEventManagerFK: checkEventAndDumpForJE: 0
 I DropBoxManagerService: add tag=data_app_crash isTagEnabled=true flags=0x2
Expected behavior

Animations should work and behave the same way in deployment as in development build for both platforms

Device & Versions (please complete the following information)
  • Device: Android phone (any, really)
  • OS: Android 13
  • React Native 0.70.5
  • Expo 47.0.8
  • rive-react-native 3.0.41

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 by tracing the Android asset-loading path from the Rive url prop and the reported failure in com.rivereactnative.RiveReactNativeView.kt, especially reloadIfNeeded and handleFileNotFound. Reproduce with the Expo 47 and React Native 0.70.5 setup using the provided .riv asset and compare development with an Android deployment. Done means the animation loads and plays on Android deployment as it does in development and on iOS.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, kotlin, react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.