by Pritish Vaidya

# How to build a flip timer in React Native

### Introduction

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 a *Flip Timer* in React Native using its exposed APIs and no additional dependencies.

### Challenges to overcome

- Implement
`transform-origin`

property using yourmatrices 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.*College Math Course* - Implementation of Flip Number component.
- Overcome
`overflow: hidden`

issue in android since it doesn’t work with absolute positioned elements.

### Contents

**Implement Flip Number Component****Implement FoldView**

- Basic Layout
- Overcoming the Challenge
- Adding the Transformations
- Adding the Animations

3. **Update Timer Component**

4. **Final Result**

5. **Links**

### Implement Flip Number Component

#### Basic Layout

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).

### Implement FoldView

#### Basic Layout

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 used while applying flip animation.

**Challenge (Part 2 and Part 3)**: `overflow: hidden`

with absolute positioning has major issues in *android. *Using* *this StackOverflow post, it can be solved by using an *overflow container* inside the absolute positioned element.

#### Final Result

#### 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.

Fortunately, there is one way to overcome this issue. According to this awesome article and reading the MDN docs for the transform-origin property, it can be implemented using **matrices.**

**Utils**

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 4*4 matrices`a`

and`b`

supplied as input.

**Rotate Matrix:**It is a custom utility method that will take a 4*4 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 4*4 matrix.

**Translate Matrix:**This utility method will translate the origin and modify the original 4*4 matrix

**Un-Translate Matrix:**This utility method will un-translate the origin and modify the original 4*4 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, `transform-origin`

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.

#### Timer Component

The timer component will call **Time Util **and update the component based on hours, minutes, seconds

#### Flip Number Component

This component just splits the number into two parts based on their digit placement and calls **NumberCard **component .

### Final Result

### Links

I’ve published a package for it that contains more customizable properties.

- npm : react-native-flip-timer
- GitHub: react-native-flip-timer

More of the cool stuff can be found on my ** StackOverflow** and

*GitHub***profiles.**

Follow me on ** LinkedIn**,

**,**

*Medium***for further update new articles.***Twitter*

**One clap, two claps, three claps, forty?**

*Originally published at blog.pritishvaidya.com on March 2, 2019.*