Turn on JavaScript
Pritish Vaidya

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
React Native

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
Javascript

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
React Native

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
React Native

How to monitor network changes using Redux Saga in React Native

medium.freecodecamp.org

What is an Event Channel? Redux Saga consists of eventChannels to communicate between external events and sagas as a factory function. The events are from the event sources other than the redux store . Here’s a basic example from the docs : Things to note: The first argument of the eventChannel is a listener function. The return method is the unregister listener function. Emitter initializes the listener once _after which all the events from the listener are _passed to the emitter function by invoking it. How should I hook up Redux Saga’s Event Channel with React Native’s Network…

Show more
React Native