Delay is working like duration

[elmcapp]

For some reason the delay works like duration and duration does not work at all. What I am hoping to do is wait for 10 seconds then allow the colors to alternate. I would also like to make the color change duration 1 second if possible. I'm not sure but if this is coded right I think it may be a bug

const bgStyle = useSpring({ to: {backgroundColor: 'transparent', ...props.containerStyle}, from: {backgroundColor: '#ff6347', ...props.containerStyle}, reset: false, loop: true, config: { duration: 1000, delay: 10000, }, //config: config.molasses, //onRest: () => set(!flip), });

return <AnimatedView style={bgStyle}>{props.children}</AnimatedView>;

I have also tried

const bgStyle = useSpring({ to: {backgroundColor: 'transparent', ...props.containerStyle}, from: {backgroundColor: '#ff6347', ...props.containerStyle}, reset: false, loop: true, duration: 1000, delay: 10000, });

return <AnimatedView style={bgStyle}>{props.children}</AnimatedView>;

"react-spring": "^9.3.0", "react-native": "0.65.1",

[joshuaellis]

Please provide a code sandbox demonstrating the issue ☺️

[elmcapp]

https://codesandbox.io/embed/react-spring-react-native-web-svg-forked-o6xrp?fontsize=14&hidenavigation=1&theme=dark

I did edit the code a little so not I am not sure if its a bug or wrong usage case. Here is the expected behavior (what I am hoping to do).

I have 2 colors which are red and green. when the component mounts I want it to wait for 5 seconds before the animation starts. After the animation starts I want it to start looping between the colors with a duration of 1 second between colors.

The issue now is that it starts the animation within 5 seconds and it's looping however there is a 5 second delay between each color change and it keep looping.

[joshuaellis]

Thank you for your patience in receiving a response to this issue.

This is by design, you can pass a function to delay so then you could use a ref to signify that you have finished the initial delay:

delay: () => {
	if(!initial.current){
		initial.current = true
		return 2000
	}
	
	return 0
}