【Android only】To load local Animated webp, last animation frame is kept.

[lchenfox]

Describe the bug I'm using the "react-native-fast-image": "^8.6.3" to load Animated Webp image animation. It works normally on iOS. But it always keeps and continues the last animation frame on Android.

To Reproduce Steps to reproduce the behavior if possible, or a link to a reproduction repo:

1. import FastImage to load a local animated webp.
2. Sets a state(loading) value to true to load(render) an Animated Webp to start animation.
3. Sets a state(loading) to false stop(not render) the FastImage to stop animation.
4. Resets a state(loading) value to true to load(render) an Animated Webp to start animation.

Code snippets:

  _renderAnimation = () => {
        if (!this.state.loading) return null;
        return <View style={{position: 'absolute', width: '100%', height: '100%', justifyContent: 'center',  alignItems: 'center', backgroundColor: 'rgba(255, 255, 255, 0.45)'}}>
            <FastImage style={{width: 88, height: 88}} source={require('../Source/Common/animated.webp')}/>
        </View>; 
    };

Expected behavior

Load Animated webp normally from the first frame on Android.

Actual behavior

Actually, it starts and continues the animation from the last image frame on step 3. For example, if the animated webp animation duration is 5s, the first time it plays to 3s, secondly, sets the loading to false to stop the animation. Thirdly, sets the loading to true to rerender the webp animation that causes to continue the last animation frame(from 3s on first time). Should it start animation from the first animation frame when rendering again each time?

Dependency versions

npx react-native info:

info Fetching system and libraries information...
System:
    OS: macOS 12.5
    CPU: (8) arm64 Apple M2
    Memory: 95.80 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.1.0 - /opt/homebrew/bin/node
    Yarn: Not Found
    npm: 8.19.3 - /opt/homebrew/bin/npm
    Watchman: 2022.11.28.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9123335
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.17 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.1 => 0.71.1 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Please let me know if I miss something else or the step above is incorrect. Thanks in advance.

[lchenfox]

Sorry. Finally, it's solved by the following codes:

  _renderAnimation = () => {
        if (!this.state.loading) return null;
        const localSource = require('../Source/Common/animated.webp');
        const uri = Image.resolveAssetSource(localSource).uri;
        return <View style={{position: 'absolute', width: '100%', height: '100%', justifyContent: 'center',  alignItems: 'center', backgroundColor: 'rgba(255, 255, 255, 0.45)'}}>
            <FastImage style={{width: 88, height: 88}} source={{uri: uri, cache: 'web'}}/>
        </View>; 
    };

Closing this issue.