How to have a heart beat animation with React native? - 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,
},
});

Answer 1

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 !

Answer 2

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>

Answer 3

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,
},
});

Answer 4

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.

Answer 5

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>

Answer 6

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>