Memory leak when one file with multiple artboard

[AChevallier]

Description

Hello !
I created a component which looks like a instagram story so I've got one file rive with 6 artboards.

Provide a Repro

Artboard are changed when we tap on the right part of the screen or when the current artboard stops

return (
    <View tw="flex-1">
      <StatusBar hidden={!smh} />
      <ArtboardAnimation
        artboard={artboards[artboardIndex]}
        onBeginPlaying={handleBeganPlaying}
        onNextArtboard={handleNextPage}
        play={true}
        url={rivData?.url ?? ''}
      />
      <View tw={clsx('w-full absolute left-0', smh ? 'top-16' : 'top-4')}>
        <InstaProgressBar
          artboards={artboards}
          artboardIndex={artboardIndex}
          beganPlaying={beganPlaying}
        />
      </View>
      <View
        tw={clsx(
          'flex flex-row w-full absolute bottom-0 top-0 left-0 right-0',
          `h-${height}px`
        )}
      >
        <Pressable onPress={handlePreviousPage} tw="w-30%" />
        <Pressable onPress={handleNextPage} tw="w-70%" />
      </View>
    </View>
  )

const ArtboardAnimation: FC<ArtboardAnimationProps> = ({
  artboard,
  onNextArtboard,
  onBeginPlaying,
  play,
  url,
  ...otherProps
}) => {
  const riveRef = useRef<RiveRef>(null)

  return (
    <View tw="flex-1" {...otherProps}>
      <Rive
        ref={riveRef}
        url={url}
        autoplay={play}
        artboardName={artboard?.name}
        alignment={Alignment.Center}
        animationName={'enter'}
        fit={Fit.FitWidth}
        onPlay={(animationName: string, isStateMachine: boolean) => {
          onBeginPlaying()
        }}

        onStop={(animationName: string, isStateMachine: boolean) => {
          onNextArtboard()
        }}
      />
    </View>
  )
}

Source .riv/.rev file

I can share the file privately

Expected behavior

No memory leak

Device & Versions (please complete the following information)

• Device: iOS Simulator
• OS: iOS 16.2
• NPM Version: 8.3.1

https://user-images.githubusercontent.com/10862109/224369763-7a734cc8-c0b4-4cf5-8f66-4ac82b24c4ee.mp4

This happen until to be "out of memory". And There is no solution to clean the memory except restart the app.

[AChevallier]

I tried to find why with the xcode instruments for "Leaks"

Here what I found

[thomas-coldwell]

I was having the same memory leaks on v3.0.14

Could you try with the latest version of rive-react-native@4.0.0? This was released ~2 days ago at the time of writing and I no longer see any of these memory leaks 😃

[HayesGordon]

Version 4 bumps the underlying iOS and Android runtimes, and the above should be fixed. @AChevallier let us know if you're still seeing this issue.

[AChevallier]

Hello, @thomas-coldwell @HayesGordon thanks for the replies.

Actually it did not fixed it.

Multiple question :

• Our rive file is quite heavy (3MB), is it a problem ? (each artboard add 70mo in the RAM)
• When the component Rive dismount, the memory is NOT cleaned. Am I right ?
• We, dynamically, change the artboard using a state index, is it OK ? (or should I load every artboard in a ViewPager for example?)

But the biggest problem is that when the Component Rive dismount, it should be remove for the RAM.

UPDATE :

Our riv file contains image, could it bring problems ?

I am trying to reproduce using the example folder

[AChevallier]

@HayesGordon @thomas-coldwell Big news !

I found the problem !
I tried a lot of things using your examples/ folder.

Using our .riv file, I can see the memory leak using url compare using the props resourceName
You can see here a video :

Simulator.Screen.Recording.-.iPhone.13.-.2023-03-17.at.17.16.53_compressed.mp4

Do you want to have access to my example ?

[mjtalbot]

Hi @AChevallier, thank you for reporting this issue! We are able to reproduce a leak on rive-ios directly & hoping to get that patched shortly. It'll need to make its way to rive-react-native to apply for this build then.

It would still be great to have access to your example as this might be a different underlying issue, what we have reproduced does not get recorded as a "leak" in xcode's profiler.

[mjtalbot]

Hi again @AChevallier , we've gotten an update out to address some issues raised here.

The update includes a rework of how we share our Skia graphics context, & addresses a couple of memory leaks. Critically for this issue: we had a circular reference that kept old riveViews alive when loading rive files via urls.

Thank you for pointing is right at this as the source of the issue! We were able to reproduce a leak with a much simplified version of your example.

We'd love for you to give 4.0.2 a try. If an additional issue exists it would be helpful to get access to your example

[AChevallier]

Hi @mjtalbot ,
You're welcome, Rive is an amazing project so I hope i could help.
I just tried 4.0.3 and it fixed the problem, thank you.

I will try to provide you the example but I am very busy, so it could take times.

[mjtalbot]

Great to hear! And I'm glad its fixed, if its all working we don't need to see the example.

Of course if you want to share what you're working on, you can always post something on our discord or twitter. We love checking out what people do with Rive 🙌

[AChevallier]

I would be happy to share our work (of my team) but we still have an error on android.
following this issue : #170

[minhchienwikipedia]

I'm still getting this issue when using version "rive-react-native": "^6.1.1", any update?