lottie-react-native / lottie-react-native

Lottie wrapper for React Native.
https://airbnb.io/lottie/#/react-native
Apache License 2.0
16.67k stars 1.77k forks source link

Cannot restart playing animation from the beginning until it's finished (on IOS) #1004

Open valeriiamykhalova opened 1 year ago

valeriiamykhalova commented 1 year ago

Description

Animation does not restart immediately on calling animationRef.current?.play(). It works as expected on Android, but not on IOS

Steps to Reproduce

  1. Download free animation https://lottiefiles.com/141221-egg-roll
  2. Copy&paste the following component:
import { useRef, useState } from 'react'
import { View, StyleSheet, Button, Text } from 'react-native'
import LottieView from 'lottie-react-native'

export function Animation() {
  const [counter, setCounter] = useState(0)
  const animationRef = useRef()

  function playAnimation() {
    animationRef.current?.play()
    setCounter(counter + 1)
  }

  return (
    <View style={styles.container}>
      <LottieView
        ref={animationRef}
        style={styles.animation}
        loop={false}
        autoPlay={false}
        source={require('assets/animations/egg.json')}
      />

      <View style={styles.buttonContainer}>
        <Button title="Play" onPress={playAnimation} />

        <Text style={styles.text}>Pressed {counter} times</Text>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'pink',
  },
  animation: {
    flex: 1,
  },
  buttonContainer: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 200,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    paddingTop: 24,
    fontWeight: '500',
  },
})

Expected behavior: I expect the animation to restart immediately after pressing the "Play" button. It works as expected on Android

https://user-images.githubusercontent.com/29245376/229546563-2fea8a8b-4e1c-4c3d-9bcc-d21001967d52.mp4

Actual behavior: Animation does not restart until it reaches the last frame

https://user-images.githubusercontent.com/29245376/229546773-5853d83b-7b95-4853-a874-56b6fe09e096.mp4

Versions

"lottie-ios": "3.4.0" "lottie-react-native": "^5.1.5" "react-native": "0.69.5"

TheRogue76 commented 7 months ago

I feel like the Android API is not working correctly in this case. We have a method called reset which should be used for these cases. play should simply continue playing, not reset anything. @matinzd ?