Building a Flip Timer in React Native
A Flip Timer is a digital time keeping device with the time indicated by numbers that are sequentially revealed by a split-flap display. This article will demonstrate the building of the Flip Timer in React Native using its exposed api’s and no additional dependencies.
Challenges to overcome
transform-originproperty using your College Math Course matrices techniques since it is not supported in React Native. Rotation around the centered origin (by default) is easy, but we need to translate origin and rotate around the edges.
- Implementation of Flip Number component.
overflow: hiddenissue in android since it doesn’t work with absolute positioned elements.
1 Implement Flip Number Component
2 Implement FoldView
- Basic Layout
- Overcoming the Challenge
- Adding the Transformations
- Adding the Animations
3 Update Timer Component
4 Final Result
Implement Flip Number Component
The Basic Layout consists of two cards - upper and lower joined together so that the view looks like a Flip Timer.
- Number Card
It is a basic layout consisting of a wrapper and two cards — lower , upper.
Note: Lower Card has the previous number added to it. Its use will be revealed once we reach the FoldView implementation.
- ** Card**
The wrapper of the card has
overflow: hidden and we’re translating its items
(number) based on the type of the card (upper or lower).
To build FoldView we need two FlipCards similar to NumberCards but with absolute positioning so that they are above the NumberCards when flip animations are applied.
- Number Card
Adding FlipCard component to the NumberCard component.
- ** Flip Card**
The FlipCard component is an animated wrapper with absolute positioning useful while applying flip animation.
Challenge (Part 2 and Part 3):
overflow: hidden with absolute positioning
has major issues in android. *With the help of this
StackOverflow post, it can be
solved by using an *overflow container inside the absolute positioned element.
Overcoming the Challenge
Now comes the hard part. We need to add fold the FlipCard component along the edges.
Since React Native doesn’t support
transform-origin property, we need to find
some other way to shift the rotation origin on the bottom edge.
React Native exposes several matrix operations in the MatrixMath.js. The important ones that we require are
- **Identity Matrix: **It returns a 4 * 4 identity matrix
[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]
- **Multiply Matrix: *This utility method generates output based on the
multiplication of 44 matrices
bsupplied as input.
- **Rotate Matrix: *It is a custom utility method that will take a 44 matrix and degree to which it will be rotated to then multiply it to the original matrix to return the generated result.
- **Perspective Matrix: *This utility method will allow us to use the perspective style to React Native and then multiply to the original 44 matrix.
- **Translate Matrix: *This utility method will translate the origin and modify the original 44 matrix
- **Un-Translate Matrix: *This utility method will un-translate the origin and modify the original 44 matrix
Adding the Transformations
deg is the degree to be rotated and
y is the height of the component to
which it will be translated.
Challenge (Part 1): Combining the utils from the above,
is implemented successfully.
Adding the Animations
Update Timer Component
Add Time Util
This util will increment the timer by one sec and adjust hours, minutes, seconds.
The timer component will call **Time Util **and update the component based on hours, minutes, seconds
Flip Number Component
This component just splits number into two parts based on their digit placement and calls **NumberCard **component .
I’ve published a package for it that contains more customizable properties.
One clap, two claps, three claps, forty?