React Native Gif/Animated WebP View Component.
These buttons are only for the "example app", not inside the library, react-native-gif-player is just a view component
React Native's Image component can display GIFs but lacks a stop feature. react-native-gif-player comes with a stop feature and additional capabilities.
react-native-gif-player is a wrapper around UIImage(iOS) and Fresco (Android).
- [x] STOP
- [x] Local/Remote GIF Support.
- [x] Local/Remote Image Support.
- [x] Local/Remote Animated WebP Support (iOS has a performance issue with long animated WebP)..
- [x] Watching Frames
- [x] Jump to Frame
- [x] Loop Count (if you want infinite loop, you can assign 0 to loopCount prop)
- [x] Old/New Architecture Support
yarn add react-native-gif-player
cd ios && pod installimport { GifPlayerView } from 'react-native-gif-player';
const App = () => {
const handleOnFrame = (event: any) => {
const { frameNumber } = event?.nativeEvent || {};
};
const handleOnError = (event: any) => {
setState({ loading: false, error: event?.nativeEvent?.error });
};
const handleLoad = (event: any) => {
const { duration, frameCount } = event?.nativeEvent || {};
};
const jumpToFrame = () => {
gifPlayerRef.current.jumpToFrame(0);
}
return (
<GifPlayerView
ref={gifPlayerRef}
style={styles.box}
source={{ uri: gifSource }}
paused={paused}
loopCount={loopCount}
onStart={handleStart}
onStop={handleStop}
onEnd={handleEnd}
onFrame={handleOnFrame}
onError={handleOnError}
onLoad={handleLoad}
/>
...
<View style={styles.footerBottom}>
<IconButton
width={40}
height={33}
icon={ResetIcon}
onPress={() => {
if (gifPlayerRef.current !== null) {
gifPlayerRef.current.jumpToFrame(0);
}
}}
/>
<IconButton
width={60}
height={60}
icon={paused ? PauseIcon : PlayIcon}
onPress={() => {
setState({ paused: !paused });
}}
/>
<IconButton
width={40}
height={37}
icon={NextIcon}
onPress={async () => {
setState({ loading: true });
await randomGif();
setState({ paused: false });
}}
/>
<IconButton
width={40}
height={40}
icon={LoopIcon}
tintColor={loopCount === 0 ? '#388e3c' : 'white'}
onPress={() => {
setState({ loopCount: loopCount === 0 ? 1 : 0 });
}}
/>
</View>
...
);
};See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library