Turn on JavaScript
Pritish Vaidya
Technology

Building a Flip Timer in React Native

medium.com

Challenges to overcome Implement transform-origin property 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. Overcome overflow: hidden issue in android since it doesn’t work with absolute positioned elements. Contents 1 Implement Flip Number Component 2 Implement FoldView Basic Layout Overcoming the Challenge Adding the Transformations Adding the Animations 3 Update Timer Component…

Show more

A simple and more accurate estimation of Read Time for Medium articles in JavaScript

medium.freecodecamp.org

Introduction As explained in the New Yorker The more we know about something — including precisely how much time it will consume — the greater the chance we will commit to it. Knowing in advance how long an article helps with better time management by allowing us to plan further ahead. Why should I use a new script? Yes, there are many open source libraries available on npm * *but they contain several flaws. Before that, let's take a look at these two articles on Medium. Read Time — Medium Support Read Time and You The above two articles have the following key features Average Read Time…

Show more

Building a Lightweight Speedometer in React Native

medium.com

Contents Basic Requirements Default Props Overview Utils Integrating into the Component Usage Links Basic Requirements The only external dependency required is the prop-types package for Type Checking or Prop Validation . Other than that, we need one custom speedometer needle image. Default Props Overview value : Current value defaultValue : Initial value minValue : Minimum limit maxValue : Maximum limit easeDuration : Ease duration of the needle animation labels : List of labels with color needleImage : Absolute path to the needle image Utils There are three types of Utility functions…

Show more

How to make realtime SoundCloud Waveforms in React Native

medium.freecodecamp.org

Why Should I use SoundCloud’s Waveforms? The SoundCloud’s waveform looks more impressive than the old boring way of showing the progress bar. The pre-loaded waveform will give the user an idea of the different frequencies present in the song. It is also much easier to show the buffered track percentage on a waveform rather than showing it on a blank progress bar. Let’s learn more about SoundCloud’s Waveforms The SoundCloud provides a waveformurl in its tracks API. Each track has its own unique waveformurl . The waveform_url contains a link to the image hoisted over the cloud…

Show more