Related
I have a React Native component rendering a notification text. I want the text to fade in and fade out after a small delay. When a new notification text is set, I want to restart the same animation.
I have the following code:
export default function Notification({ notification }) {
if (!notification) {
return null;
}
const [fadeAnimation] = useState(new Animated.Value(0));
useEffect(() => {
Animated.sequence([
Animated.timing(fadeAnimation, {
toValue: 1,
duration: 500,
useNativeDriver: true,
}),
Animated.delay(3000),
Animated.timing(fadeAnimation, {
toValue: 0,
duration: 500,
useNativeDriver: true,
})]).start()
}, []);
return (
<Animated.View style={{ opacity: fadeAnimation, }}>
<View style={styles.notificaton}>
<Text style={styles.text}>{notification}</Text>
</View>
</Animated.View >
)
}
I read that I should be able to reset the animation with setValue(0) again, however I do not know where and when to call it.
work for me
import React, { Component } from 'react';
import { Animated, View } from 'react-native';
class Testing extends Component {
constructor(props) {
super(props);
this.animatedValue = new Animated.Value(0);
}
componentDidUpdate(prevProps) {
if (prevProps.myProp !== this.props.myProp) {
this.startAnimation();
}
}
startAnimation() {
this.animatedValue.setValue(0);
Animated.timing(this.animatedValue, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}).start();
}
render() {
const { myProp } = this.props;
const opacity = this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
});
return (
<View>
<Animated.Text style={{ opacity }}>
My prop val : {myProp}
</Animated.Text>
</View>
);
}
}
export default Testing;
Rotation is a style transform and in RN, you can rotate things like this
render() {
return (
<View style={{transform:[{rotate: '10 deg'}]}}>
<Image source={require('./logo.png')} />
</View>
);
}
However, to animate things in RN, you have to use numbers, not strings. Can you still animate transforms in RN or do I have to come up with some kind of sprite sheet and change the Image src at some fps?
You can actually animate strings using the interpolate method. interpolate takes a range of values, typically 0 to 1 works well for most things, and interpolates them into a range of values (these could be strings, numbers, even functions that return a value).
What you would do is take an existing Animated value and pass it through the interpolate function like this:
spinValue = new Animated.Value(0);
// First set up animation
Animated.timing(
this.spinValue,
{
toValue: 1,
duration: 3000,
easing: Easing.linear, // Easing is an additional import from react-native
useNativeDriver: true // To make use of native driver for performance
}
).start()
// Next, interpolate beginning and end values (in this case 0 and 1)
const spin = this.spinValue.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg']
})
Then use it in your component like this:
<Animated.Image
style={{transform: [{rotate: spin}] }}
source={{uri: 'somesource.png'}} />
In case if you want to do the rotation in loop, then add the Animated.timing in the Animated.loop
Animated.loop(
Animated.timing(
this.spinValue,
{
toValue: 1,
duration: 3000,
easing: Easing.linear,
useNativeDriver: true
}
)
).start();
Don't forget to add property useNativeDriver to ensure that you get the best performance out of this animation:
// First set up animation
Animated.timing(
this.state.spinValue,
{
toValue: 1,
duration: 3000,
easing: Easing.linear,
useNativeDriver: true
}
).start();
A note for the newbies like me:
For animating something else you need to wrap it in <Animated.SOMETHING> for this to work. Or else the compiler will panic on that transform property:
import {Animated} from 'react-native';
...
//animation code above
...
<Animated.View style={{transform: [{rotate: spinValue}] }} >
<YourComponent />
</Animated.View>
BUT for an image (Animated.Image), the example above is 100% goodness and correct.
Since most of the answers are functions & hooks based, herewith a complete example of class based Animation of Image.
import React from 'react';
import {
SafeAreaView,
View,
Animated,
Easing,
TouchableHighlight,
Text,
} from 'react-native';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
rotateValueHolder: new Animated.Value(0)
};
}
componentDidMount = () => {
this.startImageRotateFunction();
}
startImageRotateFunction = () => {
Animated.loop(Animated.timing(this.state.rotateValueHolder, {
toValue: 1,
duration: 3000,
easing: Easing.linear,
useNativeDriver: false,
})).start();
};
render(){
return(
<SafeAreaView>
<View>
<Animated.Image
style={{
width: 200,
height: 200,
alignSelf:"center",
transform:
[
{
rotate: this.state.rotateValueHolder.interpolate(
{
inputRange: [0, 1],
outputRange: ['0deg', '360deg'],
}
)
}
],
}}
source={{uri:'https://raw.githubusercontent.com/AboutReact/sampleresource/master/old_logo.png',}}
/>
<TouchableHighlight
onPress={() => this.startImageRotateFunction()}>
<Text style={{textAlign:"center"}}>
CLICK HERE
</Text>
</TouchableHighlight>
</View>
</SafeAreaView>
);
}
}
Just gonna drop the solution I solved by stitching together parts from the answers here.
import { Feather } from '#expo/vector-icons'
import * as React from 'react'
import { TextStyle, Animated, Easing } from 'react-native'
import { Colors, FontSize } from '~/constants/Theme'
export const LoadingSpinner = React.memo(
({ color = Colors['sand'], size = FontSize['md'] - 1, fadeInDelay = 1000, ...props }: Props) => {
const fadeInValue = new Animated.Value(0)
const spinValue = new Animated.Value(0)
Animated.sequence([
Animated.delay(fadeInDelay),
Animated.timing(fadeInValue, {
toValue: 1,
duration: 1500,
easing: Easing.linear,
useNativeDriver: true,
}),
]).start()
Animated.loop(
Animated.timing(spinValue, {
toValue: 360,
duration: 300000,
easing: Easing.linear,
useNativeDriver: true,
})
).start()
return (
<Animated.View
style={{
opacity: fadeInValue,
transform: [{ rotate: spinValue }],
}}
>
<Feather
name="loader"
size={size}
style={{
color,
alignSelf: 'center',
}}
{...props.featherProps}
/>
</Animated.View>
)
}
)
type Props = {
color?: TextStyle['color']
size?: number
featherProps?: Partial<Omit<React.ComponentProps<typeof Feather>, 'style'>>
fadeInDelay?: number
}
Hope it helps 👍
I want to shake the below View when my password is wrong.
for example:
it should be translateX from place 10, to place 20 for 4 time and 1 second.
then should be stopped in place 10.
place 10 (I mean the X position of View)
startShake = () => {
Animated.loop(
Animated.sequence([
Animated.timing(this.animatedValue, {toValue: 1, duration: 150, easing: Easing.linear, useNativeDriver: true}),
Animated.timing(this.animatedValue, {toValue: -1, duration: 300, easing: Easing.linear, useNativeDriver: true}),
Animated.timing(this.animatedValue, {toValue: 0, duration: 150, easing: Easing.linear, useNativeDriver: true}),
])
).start();
}
<Animated.View style={{transform: [{
translateX: this.animatedValue.interpolate({
inputRange: [0, 0],
outputRange: [0, 0]
})
}]
}}>
</Animated.View>
Thank you for all answers.
I just solved editing my code with the following code
constructor(props) {
super(props)
this.shakeAnimation = new Animated.Value(0);
}
startShake = () => {
Animated.sequence([
Animated.timing(this.shakeAnimation, { toValue: 10, duration: 100, useNativeDriver: true }),
Animated.timing(this.shakeAnimation, { toValue: -10, duration: 100, useNativeDriver: true }),
Animated.timing(this.shakeAnimation, { toValue: 10, duration: 100, useNativeDriver: true }),
Animated.timing(this.shakeAnimation, { toValue: 0, duration: 100, useNativeDriver: true })
]).start();
}
<Animated.View style={{ transform: [{translateX: this.shakeAnimation}] }}>
</Animated.View>
Here is the shake animation for Image component in react native, you can check it-
const bgImage = require('./components/images/ex.jpg')
class App extends Component {
constructor(props) {
super(props)
this.animatedValue = new Animated.Value(0)
}
handleAnimation = () => {
// A loop is needed for continuous animation
Animated.loop(
// Animation consists of a sequence of steps
Animated.sequence([
// start rotation in one direction (only half the time is needed)
Animated.timing(this.animatedValue, {toValue: 1.0, duration: 150, easing: Easing.linear, useNativeDriver: true}),
// rotate in other direction, to minimum value (= twice the duration of above)
Animated.timing(this.animatedValue, {toValue: -1.0, duration: 300, easing: Easing.linear, useNativeDriver: true}),
// return to begin position
Animated.timing(this.animatedValue, {toValue: 0.0, duration: 150, easing: Easing.linear, useNativeDriver: true})
])
).start();
}
}
To add this Animation to Image Component-
<Animated.Image
source={bgImage}
resizeMode='contain'
style={{
transform: [{
rotate: this.animatedValue.interpolate({
inputRange: [-1, 1],
outputRange: ['-0.1rad', '0.1rad']
})
}]
}}
/>
There is a library : react-native-animitable
You can do wonders using this library and is really very easy to use with least codes.
You can do this without loop.
startShake = () => {
this.animatedValue.setValue(0);
Animated.timing(this.animatedValue,
{
toValue: 1,
duration: 150,
easing: Easing.linear,
useNativeDriver: true
}
).start()
}
<Animated.View style={{transform: [{
translateX: this.animatedValue.interpolate({
inputRange: [0, 0.25, 0.50, 0.75, 1],
outputRange: [10, 20, 10, 20, 10]
})
}]
}}>
</Animated.View>
It might some help you to get your required animation
class App extends Component {
constructor(props) {
super(props)
this.animatedValue = new Animated.Value(0)
}
handleAnimation = () => {
// A loop is needed for continuous animation
Animated.loop(
// Animation consists of a sequence of steps
Animated.sequence([
// start rotation in one direction (only half the time is needed)
Animated.timing(this.animatedValue, {toValue: 1.0, duration: 150, easing: Easing.linear, useNativeDriver: true}),
// rotate in other direction, to minimum value (= twice the duration of above)
Animated.timing(this.animatedValue, {toValue: -1.0, duration: 300, easing: Easing.linear, useNativeDriver: true}),
// return to begin position
Animated.timing(this.animatedValue, {toValue: 0.0, duration: 150, easing: Easing.linear, useNativeDriver: true})
])
).start();
}
}
<Animated.View
style={{
transform: [{
rotate: this.animatedValue.interpolate({
inputRange: [-1, 1],
outputRange: ['-0.1rad', '0.1rad']
})
}]
}}
/>
It can be a good solution with two axes:
import React, { useState } from "react";
import { StyleSheet, View, Animated, TouchableWithoutFeedback, Easing } from "react-native";
const Shake = () => {
const [animation] = useState(new Animated.Value(0));
const startAnimation = () => {
animation.setValue(0);
Animated.timing(animation, {
toValue: 1,
duration: 1500,
easing: Easing.linear,
useNativeDriver: true
}).start(()=>{
animation.setValue(0)
});
}
const animatedStyles = {
transform: [
{
translateX: animation.interpolate({
inputRange: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
outputRange: [0, 10, -10, 10, -10, 0, 0, 0, 0, 0, 0]
})
},
{
translateY: animation.interpolate({
inputRange: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
outputRange: [0, 0, 0, 0, 0, 0, 10, -10, 10, -10, 0]
})
}
]
}
return <View style={styles.container}>
<TouchableWithoutFeedback onPress={startAnimation}>
<Animated.View style={[styles.box, animatedStyles]} />
</TouchableWithoutFeedback>
</View>
}
const styles = StyleSheet.create({
container: {
flex: 1,
height: 600,
alignItems: "center",
justifyContent: "center",
},
box: {
backgroundColor: "tomato",
width:150,
height:150
}
});
export default Shake
// #flow
import React, { useCallback, useEffect, useRef } from 'react'
import { Image, Animated } from 'react-native'
// Constants
const DEFAULT_STEP_TIME = 1000
interface Props {
source: string | number;
intensity?: number;
stepTime?: number;
iterations?: number;
containerStyle?: any;
style?: any;
}
const ShakingIcon = ({
source,
intensity = 2,
stepTime,
iterations = 2,
containerStyle,
style,
}: Props) => {
const interval = useRef(null)
const animation = useRef(new Animated.Value(0))
const shakeAnimation = useCallback(() => {
Animated.loop(
Animated.sequence([
Animated.timing(animation.current, {
toValue: -intensity,
duration: 50,
useNativeDriver: true,
}),
Animated.timing(animation.current, {
toValue: intensity,
duration: 50,
useNativeDriver: true,
}),
Animated.timing(animation.current, {
toValue: 0,
duration: 50,
useNativeDriver: true,
}),
]),
{ iterations },
).start()
}, [])
const runAnimation = useCallback(async () => {
interval.current = setInterval(
() => shakeAnimation(),
stepTime || DEFAULT_STEP_TIME,
)
}, [])
useEffect(() => {
runAnimation()
return () => clearInterval(interval.current)
}, [])
return (
<Animated.View
style={[
containerStyle,
{ transform: [{ translateX: animation.current }] },
]}
>
<Image source={source} style={style} />
</Animated.View>
)
}
export default ShakingIcon
based on https://snack.expo.dev/embedded/#ananthu.kanive/shake?iframeId=t099o2svbu&preview=true&platform=web&theme=light
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,
},
});
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 !
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>
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,
},
});
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.
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>
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>
I have the following animation.
componentWillMount(){
this.animatedValue = new Animated.Value(300);
}
componentDidMount(){
Animated.timing( this.animatedValue , {
toValue: -100,
duration: 3000,
} ).start();
}
render() {
const animatedStyle = { marginLeft: this.animatedValue, marginRight: - this.animatedValue };
return (
<View style={{flexDirection: 'row', height: 100,}}>
<Animated.View style={[ animatedStyle,{backgroundColor: 'blue', width:100}]} />
</View>
);
}
I would like to repeat endless times. Anyone have any suggestions?
2019 solution:
Animated.loop(Animated.timing(this.animatedValue , {
toValue: -100,
duration: 3000,
})).start();
Pass a callback to Animated.start() that resets the Animated value and starts the animation again. For example:
componentDidMount(){
this.runAnimation();
}
runAnimation() {
this.animatedValue.setValue(300);
Animated.timing(this.animatedValue, {
toValue: -100,
duration: 3000,
}).start(() => this.runAnimation());
}
If you need to stop the animation at any point, take a look at this question/answer.