Description:
This is an image player that allows you to play & pause animated GIF & WebP images in React Native-powered apps.
How to use it:
1. Install and import the component.
# NPM $ npm install react-native-gif-player
import { GifPlayerView } from 'react-native-gif-player';2. Basic usages:
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>
);
};3. Source props.
interface SourceProps {
uri?: string;
type?: string;
local?: boolean;
}4. View props.
nterface NativeProps extends ViewProps {
source?: SourceProps;
paused: boolean;
loopCount?: Int32;
onLoad?: DirectEventHandler<
Readonly<{ duration: Double; frameCount: Int32 }>
>;
onStart?: DirectEventHandler<null>;
onStop?: DirectEventHandler<null>;
onEnd?: DirectEventHandler<null>;
onFrame?: DirectEventHandler<Readonly<{ frameNumber: Int32 }>>;
onError?: DirectEventHandler<Readonly<{ error: string }>>;
}Preview:
