[Course] Creating a React Native Animated Number Ticker
In this lesson we’ll walk through the effects of overflow: "hidden". With onLayout we can measure elements even though they are hidden with opacity. Finally we'll show how we can render hidden elements and control what is visible with a translate.
Measuring and Creating Hidden Elements with Translate Offsets in React Native
In this lesson we’ll walk through the effects of overflow: "hidden". With onLayout we can measure elements even though they are hidden with opacity. Finally we'll show how we can render hidden elements and control what is visible with a translate.
Abstract Logic to a Reusable Component and Understand Component Reuse in React Native
In this lesson we’ll abstract our code into a reusable Tick component. We’ll explore how React will update existing component instances and give us access to necessary data.
Animating Offsets when Values Change in React Native
In this lesson we’ll see how we can use the componentDidUpdate lifecycle method combined with an animation to create the rotating number effect.
Originally published at codedaily.io on February 6, 2018.
Closing Notes:
I publish articles and screencasts weekly on React, React Native, and everything else related to web development. Be sure and follow me on Twitter.
Join our Newsletter to get the latest and greatest content to make you a better developer.
Check out my course and you too can master React Native Animations! Use the coupon code: codedaily for 60% off!
