React Native Gif/Animated WebP 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).

Features

• [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

Usage

yarn add react-native-gif-player
cd ios && pod install

import { 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>
    ...

  );
};

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library