Shripa introduces React Native Optimization Shorts and focuses on smooth animations. He says many animations can increase RAM and graphics memory use, with unexpected behavior on lower-end devices.
Boost Your Animations with Rive
Speaker
Shripa, a software engineer at Kack, demonstrates how converting a Lottie animation to Rive affects performance in a React Native app.
Shripa uses Android Studio’s Profiler to inspect the app’s Native, JavaScript, and Graphics memory categories. The example animation is stored in a JSON file and is nearly 100 kilobytes.
Shripa imports the Lottie animation into the Rive editor, creates an artboard, and checks that it plays correctly. He installs the Rive React Native package and places the animation in Android’s `android/app/src/main/res/raw` directory.
After rebuilding the app, Shripa compares its performance with Rive. He reports that the animation file is about 50 kilobytes smaller and RAM use falls from 420 to 255 megabytes. He also says the animation runs at 60 frames per second.
Shripa points viewers to Callstack’s free Ultimate Guide to React Native Optimization for more performance advice. He closes the episode by previewing FlashList as the next topic.
Takeaways
- Profile memory and frame rate before and after changing an animation format.
- For Android, place Rive animation files in `android/app/src/main/res/raw`.
- In Shripa’s example, the Rive file was about 50 KB smaller than the Lottie file.
- The reported RAM use fell from 420 MB to 255 MB after switching to Rive.
- Check animation performance on lower-end devices, where memory pressure can affect playback.
Mentioned in this talk
Search inside this talk
What was claimed 5
- works at
“I'm Shripa, a software engineer at Kack.”
YouTube Unverified1 source· Talk
- feature
Rive: Runs animations at 60 frames per second without significant memory consumption“we can run animations at 60 frames per second without significant memory consumption”
YouTube Unverified1 source· Talk
- built
“a book we wrote at Callstack about React Native optimization techniques”
3:08inAuto Memoization in React Native? React Compiler Has You CoveredYouTube Verified2 sources· Talk
- metricRive: Converted animation is 50 KB smaller than the Lottie animation
“the animation size is 50 KB smaller”
YouTube Unverified1 source· Talk
- metricRive: App RAM usage decreased from 420 MB to 255 MB
“RAM usage went from 420 to 255 megabytes”
YouTube Unverified1 source· Talk
