React Native spawn multiple Animated.View with a time delay - react-native

Question

I have a Wave component that unmounts as soon as it goes out of bounds.
This is my result so far: https://streamable.com/hmjo6k
I would like to have multiple Waves spawn every 300ms, I've tried implementing this using setInterval inside useEffect, but nothing behaves like expected and app crashes
const Wave = ({ initialDiameter, onOutOfBounds }) => {
const scaleFactor = useRef(new Animated.Value(1)).current,
opacity = useRef(new Animated.Value(1)).current
useEffect(() => {
Animated.parallel(
[
Animated.timing(scaleFactor, {
toValue: 8,
duration: DURATION,
useNativeDriver: true
}),
Animated.timing(opacity, {
toValue: 0.3,
duration: DURATION,
useNativeDriver: true
})
]
).start(onOutOfBounds)
})
return (
<Animated.View
style={
{
opacity,
backgroundColor: 'white',
width: initialDiameter,
height: initialDiameter,
borderRadius: initialDiameter/2,
transform: [{scale: scaleFactor}]
}
}
/>
)
}
export default Wave
const INITIAL_WAVES_STATE = [
{ active: true },
]
const Waves = () => {
const [waves, setWaves] = useState(INITIAL_WAVES_STATE),
/* When out of bounds, a Wave will set itself to inactive
and a new one is registered in the state.
Instead, I'd like to spawn a new Wave every 500ms */
onWaveOutOfBounds = index => () => {
let newState = waves.slice()
newState[index].active = false
newState.push({ active: true })
setWaves(newState)
}
return (
<View style={style}>
{
waves.map(({ active }, index) => {
if (active) return (
<Wave
key={index}
initialDiameter={BUTTON_DIAMETER}
onOutOfBounds={onWaveOutOfBounds(index)}
/>
)
else return null
})
}
</View>
)
}
export default Waves

Answer 1

I think the useEffect cause the app crashed. Try to add dependencies for the useEffect
useEffect(() => {
Animated.parallel(
[
Animated.timing(scaleFactor, {
toValue: 8,
duration: DURATION,
useNativeDriver: true
}),
Animated.timing(opacity, {
toValue: 0.3,
duration: DURATION,
useNativeDriver: true
})
]
).start(onOutOfBounds)
}, [])