Second render doesn't trigger animation
I'm trying to use 2 animations.
- An animation of a photo that appears first time when a specific event happens (poppedPhoto)
- An animation of a photo that appears at the beginning without animation and when a specific event happens it shakes (first).
The first animation i described works. The second doesn't even that it was configured the same as the first, the only difference is that it occurs not at the first render.
Another problem i found is that enabled prop is not default configured to true when i create a display and even when i set it to true it only appears when i set it from a this.state.var
render() {
let firstImage;
if (this.state.first) {
console.log('first');
firstImage =
(<Display
enable={this.state.first}
enterDuration={3000}
enter='wobble'
>
<Image
source={src}
style={{ width: 140, height: 140 }}
/>
</Display>);
} else {
console.log('second');
firstImage =
(<Image
source={src}
style={{ width: 140, height: 140 }}
/>);
}`
const poppedPhoto = this.state.uri !== '' ?
(
<View>
<Display
enable={this.state.poppedPhoto}
enterDuration={10000}
keepAlive
enter="zoomInDown"
>
<Image
onLoad={() => this.setState({
uri: this.state.uri,
poppedPhoto: true,
first: true
})}
style={{ width: 200, height: 200 }}
source={{ uri: this.state.uri }}
/>
</Display>
</View>
) : null;
return (
<View style={styles.container}>
<View style={{ flexDirection: 'row' }}>
{firstImage}
</View>
{poppedPhoto}
</View>
);
}
A sample code of the animation shown at the top of the readme could be helpful
I managed to animate first image by making animation on exit. but then the image vanishes. how can i trigger an animation without hiding the image like in the example of animatable's wobble animation?
I fixed the second problem by setting a timer after the same time of the animation duration like this:
render() { if (this.state.firstImage=== false) { Timer.setTimeout('xxx', () => this.setState({ ...this.state, firstImage: true }), 3000); }
But the hack i did before doesn't work on an actual android device. Is there a way to retrigger an animation without hiding the image?