Implementing Twitter's App Loading Animation In React Native
Article Summary
Ever wonder how Twitter's delightful logo-to-app loading animation actually works? Eli White reverse-engineered it and the solution is counterintuitive.
This React Native tutorial breaks down Twitter's iOS app loading animation where the bird logo expands to reveal the app underneath. White walks through the wrong assumptions developers typically make, then explains the layering trick that makes it work using MaskedViewIOS and the Animated API.
Key Takeaways
- Animation uses 3 layers: blue background, white layer, and app (not overlay approach)
- MaskedViewIOS with Twitter logo masks both white and app layers simultaneously
- Single Animated.Value from 0-100 drives all timing with interpolated transforms
- useNativeDriver flag enables smooth 60fps animation without JavaScript thread jank
- Published as react-native-mask-loader npm package with full source code
The key insight is using the logo as a mask for multiple layers rather than treating it as a transparent overlay, all driven by native animations for jank-free performance.
About This Article
Developers first thought the Twitter bird and blue background were separate layers that could fade away to show the app underneath. That didn't work because making them transparent would just reveal the blue layer, not the app.
Eli White built the animation differently using MaskedViewIOS with three layers. He put the blue background in back, a white layer in the middle, and the app in front. The Twitter logo acted as a mask for both the white and app layers at the same time.
The animation runs at 60fps smoothly because it uses React Native's useNativeDriver flag with a single Animated.Value from 0 to 100. This keeps the JavaScript thread from getting bogged down since the animation runs on the native side instead.