【Android only】To load local Animated webp, last animation frame is kept.
arlovip opened this issue · comments
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:
- import
FastImage
to load a local animated webp. - Sets a state(loading) value to true to load(render) an Animated Webp to start animation.
- Sets a state(loading) to false stop(not render) the
FastImage
to stop animation. - 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.
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.