HomeOur TeamContact

Pulse Loader

By Utkarsh Lubal
Published in UI
May 06, 2023
1 min read
Pulse Loader

Table Of Contents

01
Introduction
02
Installation
03
Example
04
Tutorial

Introduction

React Native Pulse Loader is a library that provides animated pulse loaders for React Native applications. It is a simple and lightweight library that helps developers create loading animations that can be used to improve user experience.

In this blog post, we will discuss how to use React Native Pulse Loader in your application. We will cover installation, usage, and customization of the library.

Here are the props available for the react-native-pulse-loader component:

  1. size: (required) A number representing the size of the pulse.
  2. pulseMaxSize: A number representing the maximum size of the pulse.
  3. interval: A number representing the interval between each pulse.
  4. pulseStyle: An object that defines the styles for each pulse.
  5. avatar: An object that contains the image source and size to be displayed at the center of the pulse.
  6. backgroundColor: A string representing the background color of the pulse.
  7. color: A string representing the color of the pulse.
  8. numPulses: A number representing the number of pulses to be displayed.
  9. speed: A number representing the speed at which the pulses expand and contract.
  10. duration: A number representing the duration of the animation.
  11. initialDiameter: A number representing the initial diameter of the pulse.
  12. useNativeDriver: A boolean that specifies whether to use the native driver for the animation. By using these props, you can customize the appearance and behavior of the react-native-pulse-loader component to fit your specific needs.

API

PropertyTypeDefaultDescription
intervalnumber2000action buttons visible or not
sizenumber100width and height of the avatar
pulseMaxSizenumber250maximum size of the pulse in the background
avatarstringundefinedrequired avatar url to display
pressInValuenumber0.8should be between 0 and 1. scale of the avatar, when pressed in
pressDurationnumber150duration of the scale animation
pressInEasingEasingEasing.ineasing type of the press in animation
pressOutEasingEasingEasing.outeasing type of the press out animation
borderColorstring‘#D8335B’border color of the pulse
backgroundColorstring‘#ED225B55’background color of the pulse
getStylefunctionundefinedoverride the styling of the pulse. gets as parameter the Animated variable. e.g. (anim) => ({ backgroundColor: ‘yellow’ })

Installation

npm install react-native-pulse-loader

Or

yarn add react-native-pulse-loader

Example

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Animated, Image } from 'react-native';
import Pulse from 'react-native-pulse';

const App = () => {
  const [pulseScale, setPulseScale] = useState(new Animated.Value(1));
  const [pulseOpacity, setPulseOpacity] = useState(new Animated.Value(1));

  useEffect(() => {
    const pulseAnimation = Animated.loop(
      Animated.parallel([
        Animated.timing(pulseScale, {
          toValue: 3,
          duration: 3000,
          useNativeDriver: false,
        }),
        Animated.timing(pulseOpacity, {
          toValue: 0,
          duration: 3000,
          useNativeDriver: false,
        }),
      ]),
    );
    pulseAnimation.start();

    return () => {
      pulseAnimation.stop();
    };
  }, [pulseScale, pulseOpacity]);

  return (
    <View style={styles.container}>
      <Pulse
        color="#8e44ad"
        avatar={'https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e35/11429705_386886401514376_550879228_n.jpg'}
        numPulses={3}
        diameter={400}
        speed={8}
        duration={2000}
        {...{ pulseScale, pulseOpacity }}
      />
      <Image
          source={{ uri: 'https://img.freepik.com/premium-vector/cute-cat-spilled-coffee-cup-cartoon-vector-icon-illustration-animal-drink-icon-concept-isolated_138676-5400.jpg?w=740' }}
          style={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: [{ translateX: -50 }, { translateY: -50 }],
            width: 100,
            height: 100,
            borderRadius: 50,
            borderWidth: 5,
            borderColor: '#fff',
          }}
        />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ecf0f1',
  }
});

export default App;

Tutorial

Coming Soon…


Previous Article
Radial Menu
Utkarsh Lubal

Utkarsh Lubal

Full Stack Developer

Related Posts

Vertical Step indicator
Vertical Step indicator
May 06, 2023
1 min

Quick Links

Advertise with usAbout UsContact Us

Social Media