I've created an icon that are supposed to pulsate continuously in my app. Sometimes there will also be multiple "live" icons on the same screen, indicating that something is live.

The problem is that when the icon is animating, this results in a CPU rise to over 500% for the Android Emulator (qemu-system-x86_64) and it is not getting any lower as long as the icon is animating.
For iOS it seems like it working out quite nice.
Here is my code:
class AnimatedRealtimeIcon extends React.Component<Props> {
animationPulse: new Animated.Value(0)
componentDidMount() {
Animated.loop(Animated.timing(this.animationPulse, {
toValue: 1,
duration: 2500,
useNativeDriver: true,
isInteraction: false,
})).start()
}
interpolateTo = outputRange => this.animationPulse.interpolate({
inputRange: [0, 1],
outputRange,
})
render() {
return (<View style={ styles.dotContainer }>
<View style={
[styles.dot,
{
position: 'absolute',
}
]}
/>
<Animated.View style={
[styles.dot, {
transform: [ {
scale: this.interpolateTo([0.5, 3]),
}],
position: 'absolute',
opacity: this.interpolateTo([1, 0]),
}]}
/>
</View>)
}
}
const styles = StyleSheet.create({
dotContainer: {
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 4,
},
dot: {
backgroundColor: '#9BA4D2',
alignItems: 'center',
justifyContent: 'center',
height: 6,
width: 6,
borderRadius: 4
},
})
Does anyone out there have any suggestion on how to optimize a view that will be continuously animated in React Native? I tried using a gif as well, but it seems like that also resulted in a very high CPU usage.
I just upgraded to react-native: 0.57.0 and react: 16.6.0 but that did not help.
Thanks in advance for any help