🐛 Error handling doesn't work and crashes the app

[guval-gh]

Description

Hi 👋

<Rive> component allows us (normally) to handle some errors (RNRiveErrorType):

• IncorrectRiveFileUrl
• MalformedFile
• FileNotFound
• IncorrectArtboardName
• UnsupportedRuntimeVersion
• IncorrectStateMachineName
• IncorrectStateMachineInput

But instead of displaying a warning and/or handling error with onError, the app crashes instantly with any of the errors listed above 😕

Example

The app crash instantly with something like that:

const malformedFileUrl =
  "https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg";

const correctFileUrl =
  "https://public.rive.app/community/runtime-files/2195-4346-avatar-pack-use-case.riv";

export default function Example7() {
  const riveRef = useRef<RiveRef>(null);

  return (
      <Rive
        url={malformedFileUrl}
        // url={correctFileUrl}
        onError={(riveError: RNRiveError) => {
          switch (riveError.type) {
            case RNRiveErrorType.IncorrectRiveFileUrl: {
              console.log(`${riveError.message}`);
              return;
            }
            case RNRiveErrorType.MalformedFile: {
              console.log("Malformed File");
              return;
            }
            case RNRiveErrorType.FileNotFound: {
              console.log("File not found");
              return;
            }
            case RNRiveErrorType.IncorrectArtboardName: {
              console.log("IncorrectAnimationName");
              return;
            }
            case RNRiveErrorType.UnsupportedRuntimeVersion: {
              console.log("Runtime version unsupported");
              return;
            }
            case RNRiveErrorType.IncorrectStateMachineName: {
              console.log(`${riveError.message}`);
              return;
            }
            case RNRiveErrorType.IncorrectStateMachineInput: {
              console.log(`${riveError.message}`);
              return;
            }
            default:
              return;
          }
        }}
      />
  );
}

Repository

To reproduce, I created a rive playground: https://github.com/guval-gh/rive-playground And the last example (Example 7) crash: https://github.com/guval-gh/rive-playground/blob/main/app/example7.tsx

Expected behavior

I expect my log to be displayed in the case of onError:

case RNRiveErrorType.MalformedFile: {
    console.log(“Malformed File”);
    return;
}

I expect that all the error cases that can be handled via onError won't cause the app to crash.

Screenshots

As soon as I try to go to the screen of the previous example, the app crashes:

https://github.com/user-attachments/assets/80479365-6d88-4dde-8e45-202f42ae766e

Device

• (Screenrecord): iOS Simulator - iOS 18.1
• Crash on iOS Simulator and Android Emulator

Additional context

Crash appear on:

"expo": "^52.0.11",
"react-native": "0.76.3",
"rive-react-native": "^8.2.0",

Also tested on rive-react-native versions: 8.0.0 and 8.1.0

[markcruz389]

Any update on this? Experiencing the same issue.

[guval-gh]

@markcruz389 Nothing new on my side and I'm still trying to find a solution.

[weizhe412]

I think it's because the current version of rive-react-native does not support the new architecture in Expo 52. If you're still using Expo, please go to app.json and set newArchEnabled to false. It worked for me

[guval-gh]

Thanks for your answer @weizhe412 👍

The problem is SDK 52 change so much things (in the right way) that I can't reject it and set newArchEnabled to false.

So we need to wait for new architecture support to use rive-react-native in updated project 😞

[AdamTyler]

I'm on expo SDK 51 and I also see this crash if I put in an invalid url

[vishant101]

Hi, I'm on expo SDK 52 without new architecture enabled and I experience this issue

[BakkerTom]

I’ve encountered the same issue. Some crashes, such as when passing a corrupt or non-existent source, originate from the upstream RiveRuntime package. However, other crashes—like when setting a text run value—appear to be caused by a bug in the mapToRNRiveError(riveError:) function, which leads to an app-wide crash.

Could someone look into these issues? Beyond the fact that the documented behavior isn’t functioning as expected, this also introduces a significant risk when using Rive animations from a CDN. If a resource returns a 404, our entire app crashes, which is a risk I’m hesitant to take.

[bassrock]

Encountered same issue as @BakkerTom as well, setting newArchEnabled to false solved it here.

[JerryBels]

@bassrock we can't really expect people to not enable the new arch. It brings so much, and... It's been cooking for YEARS and became the default only recently - the package should be updated by now, honestly.

[K123Ritesh]

Any other Solution @JerryBels @bassrock

[kizitech]

Hey all 👋🏽 just wanted to share what I’m seeing as well.

I ran into a similar issue using rive-react-native with Expo (SDK 54 + EAS dev build). In my case, trying to load a local .riv file using resourceName caused either an instant crash or a blank render with no errors. This happened even when the asset was bundled and Metro was configured to recognize .riv.

What worked reliably for me was switching to the url prop and hosting the .riv file remotely (GitHub raw in my case). As soon as I did that, the animation rendered correctly and stopped crashing.

So for now, at least in Expo-managed projects, it seems like:

resourceName + local .riv → crash or blank view

url + hosted .riv → works fine

Not ideal since it forces a network dependency, but it’s been a stable workaround on my end. Sharing in case it helps anyone else stuck on this 🙏🏽