changing steps or repeat on a sprite doesn't work

[joe-lloyd]

Hey Im changing the steps and repeat with key presses on a Sprite. I see the state change in the react dev tools but it does not change the way the sprite behaves.

<Sprite repeat={this.state.repeat}
         scale={0.1}
         offset={[0, 10]}
         state={this.state.facing}
         steps={this.state.steps}
         tileHeight={2400/4}
         tileWidth={1841/4}
         src="./sprites/test2.png" />

Like this, handing state to the sprite. It works when i make my first key press but not on release

checkKeys = () => {
	const { keys } = this.props;
	let { facing, repeat, steps } = this.state;

	if (keys.isDown(keys.DOWN)) {
		facing = 0;
		repeat = true;
		steps = [3, 3, 3, 3];
	}

	if (keys.isDown(keys.LEFT)) {
		facing = 2;
		steps = [3, 3, 3, 3];
		repeat = true;
	}

	if (keys.isDown(keys.RIGHT)) {
		facing = 1;
		steps = [3, 3, 3, 3];
		repeat = true;
	}

	if (keys.isDown(keys.UP)) {
		facing = 3;
		steps = [3, 3, 3, 3];
		repeat = true;
	}

	if (!keys.isDown(keys.UP) && !keys.isDown(keys.RIGHT) && !keys.isDown(keys.LEFT) && !keys.isDown(keys.DOWN)) {
		steps = [0, 0, 0, 0];
		repeat = false
	}

	this.setState({facing: facing, repeat: repeat, steps: steps});
}

This is my check keys function

[kenwheeler]

So the steps aren't changing from 3 to 0 when you let go of the key?

[markbiek]

I'm seeing similar behavior with react-native.

If I manually set steps to something like steps={[20]}, my Sprite will step through all of the frames of the sprite sheet.

But if I set steps dynamically based on a state change, nothing happens. Maybe my sprite sheet is wrong? Or I'm misunderstanding something else?

I've included a gist with my component and the sprite sheet in question.

https://gist.github.com/markbiek/4c203d9e8956f05e536a226b2671eccb