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

React Native app crashes when calling Rive Ref Methods

Open
#148 4 comments 3 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 calling the ref functions (.play(), .reset(), etc.), it causes a crash. The crash consistently happened whether I was calling these functions from inside a useEffect, a handler function, or wherever else in the React lifecycle. It seems like there's something funky with the ref happening where the underlying Swift code is trying to do an operation on a null object or something.

The specific error is:
Thread 1: EXC_BAD_ACCESS (code=1, address=0x0)

and it gets thrown by this line:

https://github.com/rive-app/rive-react-native/blob/f6432c82384aab7b4e397f819f12ff51c0c4540b/ios/RiveReactNativeView.swift#L132

Provide a Repro

Here's a code snippet that was consistently crashing the app when switching between dark and light mode in the iOS Simulator:

  const isDarkMode = useColorScheme() === 'dark'
  const animationRef = useRef<RiveRef>(null)

  useEffect(() => {
    animationRef.current?.play("Intro", LoopMode.Loop)
  }, [isDarkMode])

  return (
    <Rive
      ref={animationRef}
      alignment={Alignment.TopCenter}
      animationName="Intro"
      artboardName="Unified"
      fit={Fit.FitHeight}
      resourceName={isDarkMode ? 'OnboardingDark' : 'OnboardingLight'}
      stateMachineName="State Machine 1"
      style={animationStyles}
    />
  )

it would also crash consistently when I would navigate away from the app and back again multiple times in a row.

I tried some combination of:

  • cleanup function in useEffect to .stop() or .reset() the animation
  • .stop() or .reset() the animation each time the useEffect runs
  • calling .stop() or .reset() when the screen has focus

and eventually settled on just unmounting the component when this screen lost focus and remounting it when it gained focus again.

Source .riv/.rev file

Unfortunately I can't share the .riv file as it's from a private project. But I'm almost certain it's not specific to the Rive file since we've seen the same behavior with many different files.

Expected behavior

Rive would run the ref function(s) I call on it without crashing the app.

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

Read ios/RiveReactNativeView.swift around line 132 and reproduce with the provided React Native ref snippet, especially during resource changes or navigation remounts. Done means the ref methods no longer produce EXC_BAD_ACCESS in those scenarios; the issue provides no named test or shareable .riv asset, so validation will need an available reproduction.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, swift, typescript
Domain
mobile-dev
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.