Turn on JavaScript
Pritish Vaidya

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

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