[Android | Expo 50 | RN 0.73.4] Memory is not freed on unmount

[robertmunceanu]

Description

On Android device, when I am rendering a with a .json animation as source, on unmount, the allocated memory isn't freed. I tried to use the "cacheComposition={false}" property, but the outcome is the same. I am using Expo 50 and RN 0.73.4

On iOS device the memory is freed upon unmounting the component.

Expected behavior:

The memory should free on unmount

Actual behavior:

The memory is NOT being freed on unmount

Minimal reproduction

React Native Environment

System:
OS: macOS 14.3
CPU: (10) x64 Apple M1 Pro
Memory: 32.47 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 18.16.0
path: ~/.nvm/versions/node/v18.16.0/bin/node
Yarn:
version: 1.22.11
path: /usr/local/bin/yarn
npm:
version: 9.5.1
path: ~/.nvm/versions/node/v18.16.0/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.15.2
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.2
- iOS 17.2
- macOS 14.2
- tvOS 17.2
- visionOS 1.0
- watchOS 10.2
Android SDK: Not Found
IDEs:
Android Studio: 2023.2 AI-232.10227.8.2321.11479570
Xcode:
version: 15.2/15C500b
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.10
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.73.4
wanted: 0.73.4
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Lottie Version

Version: 6.7.0

[matinzd]

Hey!

Thanks for your detailed issue.
Can you give us a reproducible and let us know how you are unmounting the view?
This was usually an issue on iOS and I tested this on Android a while back and memory was being freed upon unmounting.

[robertmunceanu]

From a screen with a <LottieView/> I navigate back to the main screen (pop).
The memory should free itself, but it doesn't. The issue is on Android. On iOS it works just fine.

Hey!

Thanks for your detailed issue. Can you give us a reproducible and let us know how you are unmounting the view? This was usually an issue on iOS and I tested this on Android a while back and memory was being freed upon unmounting.

[IndySpaan]

@robertmunceanu We saw the same in our app, using the profiler for 45 minutes.

Our app uses a lot of deeplinking from and to the app. We saw a huge increase in BitMap which seemed to come from Lottie, our app went from using 240mb to 980mb of memory.. After disabling Lottie it went away.

What we tried:

We turned off autoplay and added a ref.
const lottieViewRef = useRef<LottieView | null>(null);
<Lottie ref={lottieViewRef} progress={1} source={animation} autoPlay={false} loop style={[{ aspectRatio: lottieAspectRatio }, styles.h100]} />

Then when we render the animation we need to play it manually call play.
lottieViewRef?.current?.play();

What fixed the issue for us

was manually pausing before unmounting. Somehow then the memory gets freed.
lottieViewRef?.current?.pause();