rive-app / rive-app/rive-react-native
React Native app crashes when calling Rive Ref Methods
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:
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 theuseEffectruns- 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
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
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