Animated GIF/WebP Player For React Native

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:

Animated GIF WebP Player For React Native

Add Comment