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

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…