How to have a heart beat animation with React native?

Question

I'm learning React native and I would like to have heart beat animation

I did that but it's not the good result, I would like to have heart beat.

If someone can help me it's would be very nice thanks a lot

import React, { PureComponent } from "react";
import { Animated, StyleSheet, Text, View } from "react-native";

export class Loading extends PureComponent {
  constructor(props: any) {
    super(props);
    this.state = {
      opacity: new Animated.Value(0),
    };
  }
  public componentDidMount() {
    Animated.timing(
      this.state.opacity,
      {
        toValue: 100,
        duration: 5000,
      },
    ).start(); 
  }

  public render() {
    return (
      <View>
        <View>
          <Animated.View
        style={[styles.animation, {
        opacity: this.state.opacity,
        transform: [
        {
          scale: this.state.opacity.interpolate({ 
            inputRange: [0.5, 1],
            outputRange: [1, 0.95],
          }),
        }]},
        ]}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  animation: {
    backgroundColor: "red,
    width: 100,
    height: 100,
    borderRadius: 50,
  },
});

did you tried lottiefiles animation.. those animations are very professional and easy to use — Muhammad Iqbal, Mar 25 '19 at 13:54
Thanks for answer but I don't really t want that I only need the animation — askemeline, Mar 26 '19 at 00:46

score 8 · Answer 1 · answered Jan 26 '20 at 19:06

A bit late but here is my own heartbeat animation made with React Native's Animated module:

export const HeartbeatAnimation = (
    value: Animated.Value,
    minValue: number,
    maxValue: number
) =>
Animated.loop(
    Animated.sequence([
        Animated.timing(value, {
            toValue: maxValue,
            duration: 100
        }),
        Animated.timing(value, {
            toValue: minValue,
            duration: 100
        }),
        Animated.timing(value, {
            toValue: maxValue,
            duration: 100
        }),
        Animated.timing(value, {
            toValue: minValue,
            duration: 2000
        })
    ])
);

Try playing with the minValue and maxValue to get your favorite animation !

score 5 · Answer 2 · answered Mar 25 '19 at 17:27

5

As you say you are new to react native, I would like to suggest you use a react-native-animatable library which is very helpful with some built-in animation and custom animation.

Here is a link of GitHub https://github.com/oblador/react-native-animatable for your solution which I mentioned below.

In this page, you can find different methods for how to use animatable library for animation in react-native.

Now as per your question here is a solution you have to install react-native-animatable by

$ npm install react-native-animatable --save

Step 1:

import * as Animatable from 'react-native-animatable';

Step 2: Use this code

<Animatable.Text 
  animation="pulse" 
  easing="ease-out" 
  iterationCount="infinite" 
  style={{ textAlign: 'center' }}>
 ❤️
</Animatable.Text>

answered Mar 25 '19 at 17:27

Paras Korat

2,011
2
18
36

Hello, thanks for your reply, I try this but I search something with pulse is more bigger, this one is very small pulse :/ – askemeline Mar 25 '19 at 17:55
@askmeline you can increase the size of the pulse by adding fontSize style in the Animatable.Text component like this style={{ textAlign: 'center',fontSize:100 }}. As it is a Text you can increase the size of text by fontSize. – Paras Korat Mar 26 '19 at 04:42
I search pulse more bigger not the image more bigger but the animaton like this : https://popmotion.io/pose but with Animated :| – askemeline Mar 26 '19 at 08:45

score 3 · Answer 3 · answered Jan 08 '21 at 06:11

you can use Animated.loop like this

  useEffect(() => {
    // makes the sequence loop
    Animated.loop(
      // runs given animations in a sequence
      Animated.sequence([
        // increase size
        Animated.timing(anim.current, {
          toValue: 10, 
          duration: 2000,
        }),
        // decrease size
        Animated.timing(anim.current, {
          toValue: 1, 
          duration: 2000,
        }),
      ])
    ).start();
  }, []);

Check below the full code and Live preview in Snack.

import React, { useRef, useEffect } from 'react';
import { Text, View, StyleSheet, Animated } from 'react-native';
import { Ionicons } from '@expo/vector-icons';


export default function App() {
  const anim = useRef(new Animated.Value(1));

  useEffect(() => {
    // makes the sequence loop
    Animated.loop(
      // runs given animations in a sequence
      Animated.sequence([
        // increase size
        Animated.timing(anim.current, {
          toValue: 10, 
          duration: 2000,
        }),
        // decrease size
        Animated.timing(anim.current, {
          toValue: 1, 
          duration: 2000,
        }),
      ])
    ).start();
  }, []);

  return (
    <View style={styles.container}>
      <Animated.View style={{ transform: [{ scale: anim.current }] }}>
        <Ionicons name="md-heart" size={32} color="red" />
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgb(254, 254, 254)',
    padding: 8,
  },
});

Do I need to use `Animated.View` or can I just use `anim.current` on any element? — theonlygusti, Jan 04 '22 at 14:20

score 1 · Answer 4 · answered Mar 25 '19 at 17:58

You can give React Native Lottie a go for a more flexible and appealing animation.

To get started, install it via:

Step 1: > npm i --save lottie-react-native@2.5.11
Step 2: > react-native link lottie-react-native

Step 3 : Go to Lottie Files, which is a collection of awesome animations done by the community. Search and choose a heartanimation that suits you and download the .jsonfile associated with it. Then proceed to render it as shown below:

    import LottieView from 'lottie-react-native';

    render() {
        return (
          <LottieView
            ref={animation => {
              this.animation = animation;
            }}
            source={require('../path/to/animation.json')}
          />
        );
      }

PS: I think This heart beat animation can fit your need. You can edit it's color and speed and then proceed to download it and use it in your app.

Thanks for your answer but i search the animation not the icon :/ — askemeline, Mar 29 '19 at 15:33

score 0 · Answer 5 · answered Mar 25 '19 at 15:01

Use react-native-animatable:

<Animatable.Text 
    animation="pulse" 
    easing="ease-out" 
    iterationCount="infinite" 
    style={{ ... }}>❤️</Animatable.Text>

or...

<Animatable.View
    animation="pulse" 
    easing="ease-out" 
    iterationCount="infinite" 
    style={{ ... }}>{children}</Animatable.View>

score 0 · Answer 6 · answered Sep 24 '20 at 09:55

You can achieve that with react-native-animatable by creating your custom pulse animation:

const pulse = {
  0: {
    scale: 1,
  },
  0.5: {
    scale: 1.5
  },
  1: {
    scale: 1
  }
}

Then, in your Animatable.View

<Animatable.View
      animation={pulse}
      easing="ease-out"
      iterationCount="infinite"
    >
     <Text>PULSE ME</Text>
</Animatable.View>

How to have a heart beat animation with React native?

6 Answers6

Linked