React Native Looping Animation Performance - react-native

Question

I have a react native app and I want to have a fireworks animation playing on loop more or less indefinitely. I have implemented an animation I am happy with using the built-in react native animated library, however the performance monitor shows the UI thread down at 30 fps (and I can feel my iPhone heating up after about 10 seconds too). I can bring it back up to 60 fps by reducing the number of firework bursts or stars, but I would like to keep the amount I have if possible because it looks nicer. Are there any optimizations you see I can do to get it back to 60 fps without compromising the look of the fireworks?
import React, { useRef, useEffect, useState, useCallback } from 'react';
import { View, Animated, Easing, TouchableOpacity, Text } from 'react-native';
export default function App() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "black" }}>
<Fireworks />
</View>
);
}
const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
const NUM_BURSTS = 10;
const STAR_SIZE_MIN = 2;
const STAR_SIZE_MAX = 6;
const NUM_STARS = 200;
const NUM_OUTER_STARS = NUM_STARS / 2;
const DURATION_MIN = 1000;
const DURATION_MAX = 3000;
const BURST_SPEED = 7;
const RADIUS_MIN = 30;
const RADIUS_MAX = 100;
const Fireworks = () => {
const [bursts, setBursts] = useState([]);
useEffect(() => {
//Create all the firework bursts one time at component mount.
const newBursts = [];
for (let i = 0; i < NUM_BURSTS; i++) {
const starSize = random(STAR_SIZE_MIN, STAR_SIZE_MAX);
newBursts.push({
starSize
});
}
setBursts(newBursts);
}, []);
const renderBursts = bursts?.map((burst, index) =>
<FireworkBurst starSize={burst.starSize} key={"" + index} />
);
return (
<View style={{ position: "absolute", top: 0, left: 0, bottom: 0, right: 0 }}>
{renderBursts}
</View>
)
}
const FireworkBurst = ({ starSize }) => {
const viewRef = useRef();
const animValue = useRef(new Animated.Value(0)).current;
const [stars, setStars] = useState([]);
const loop = useRef(true);
useEffect(() => {
const radius = random(RADIUS_MIN, RADIUS_MAX);
const newStars = [];
for (let i = 0; i < NUM_STARS; i++) {
const star = generateStar(i, radius);
newStars.push(star);
}
setStars(newStars);
loop.current = true;
animate();
return () => {
loop.current = false;
}
}, []);
const generateStar = (iteration, radius) => {
const star = {
starSize
};
const end = {}
if (iteration < NUM_OUTER_STARS) {
const value = iteration / NUM_OUTER_STARS;
end.x = Math.sin(value * Math.PI * 2) * radius;
end.x += random(-10, 10);
end.y = -Math.cos(value * Math.PI * 2) * radius;
end.y += random(-10, 10);
}
else {
end.x = random(-(radius - 10), radius - 10);
end.y = random(-(radius - 10), radius - 10);
}
star.end = end;
return star;
}
const animate = useCallback(() => {
const x = random(0, 100);
const y = random(0, 100);
//set native props to avoid re-rendering
viewRef?.current?.setNativeProps({ top: `${y}%`, left: `${x}%` });
animValue.setValue(0);
Animated.timing(
animValue,
{
toValue: 1,
duration: random(DURATION_MIN, DURATION_MAX),
easing: Easing.out(Easing.poly(BURST_SPEED)),
isInteraction: false,
useNativeDriver: true
}
).start(() => {
loop.current && animate();
});
}, [animValue]);
const renderStars = stars.map((star, index) =>
<FireworkStar starSize={star.starSize} end={star.end} animValue={animValue} key={"" + index} />
);
return (
<Animated.View ref={viewRef} style={{ position: "absolute" }}>
{renderStars}
</Animated.View>
)
}
const FireworkStar = ({ starSize, end, animValue }) => {
const translateX = animValue.interpolate({
inputRange: [0, 1],
outputRange: [0, end.x]
})
const translateY = animValue.interpolate({
inputRange: [0, 1],
outputRange: [0, end.y]
})
const opacity = animValue.interpolate({
inputRange: [0, 0.9, 1],
outputRange: [1, 1, 0]
});
const hue = random(0, 255);
const color = `hsl(${hue},100%,70%)`;
return (
<Animated.View
style={{
position: "absolute", top: 0, left: 0,
height: starSize, width: starSize, borderRadius: starSize,
justifyContent: "center", alignItems: "center",
backgroundColor: color,
transform: [
{ translateX },
{ translateY }
]
}}
opacity={opacity}
>
</Animated.View>
)
}