An Animation Showcase: RN App Can Ce Beautiful

Alex contrasts websites, where animation can feel like extra weight, with mobile apps, where people expect gestures, loading states, pull-to-refresh, and swiping. She describes three contexts for animation: gestures, general motion, and micro-interactions. Motion can give feedback, add character, guide actions, and help people understand transitions.

Alex highlights animations in Uber Eats, Wix, Shine, SoundCloud Pulse, Shopify’s Shop app, and KFC’s app. She points to details such as Shine’s animated splash screen, subtle onboarding effects in SoundCloud Pulse, and KFC’s opening video and Colonel Sanders animation. She says these examples show that React Native apps can combine animation with usability.

Alex suggests inspecting Android APKs in Android Studio to identify libraries used by apps that inspire you. She recommends Airbnb Lottie for animations exported from After Effects with Bodymovin, Reanimated for performance-focused animation, and Fluid Transitions for connected screen changes. She also mentions MotionPose, whose documentation she liked but had not used herself.

Alex describes making Pusha, an animated dog in React Native, drawing on a Dribbble design and a Codrops article. To keep the dog’s proportions consistent across different screen sizes, she created relative width and height units and used them to position elements. The project uses React Native’s Animated API, and its code is public.

Alex says she wants to turn the animated dog into a weather app, with temperature and animations for sun, clouds, rain, and possibly snow. She also hopes to let users choose other animals and eventually add Google Actions so her child could ask Pusha about the weather.