Automatically Stop

[timothyerwin]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

Is there a way to automatically stop playing the Giphy after a certain number of times? Like WhatsApp does? I don't want the giphy playing endlessly

Motivation 🔦

Save energy...save the planet...and save our eyes

[ALexanderLonsky]

Hey @timothyerwin, thanks for flagging this. I've passed this on to my team.

[efstathiosntonas]

@ALexanderLonsky any news on this one? thanks!

[cgmaier]

hi @efstathiosntonas @timothyerwin, thanks for the feedback

we'll take a look at the WhatsApp experience. is there is any additional context or rationale for this request you can provide?

feature requests like this have to be considered not only for this React Native package but for the native Android and iOS GIPHY SDKs it depends on, as we want to ensure consistent behavior and interface definitions across the projects.

it's unlikely we will add this capability to the gif view out of the box anytime soon. however, you're more than welcome to build your own custom view to display a gif url following its selection from the grid.

[timothyerwin]

@cgmaier @efstathiosntonas I created a simple component that basically does the same thing...here is a rough outline

import React, {useState, useEffect, useRef} from 'react';

import {
  ScrollView,
  Dimensions,
  TouchableOpacity,
  View,
  Text,
} from 'react-native';

import {Image} from 'expo-image';

import {normalize} from 'util';

const GifPlayer = ({url, aspectRatio, autoplay = true}) => {
  const [showPlayButton, setShowPlayButton] = useState(!autoplay);
  const imageRef = useRef(null);

  const seconds = 6 * 1000;

  const stopAnimating = () => {
    setTimeout(() => {
      imageRef.current && imageRef.current.stopAnimating();
      setShowPlayButton(true);
    }, seconds);
  };

  useEffect(() => {
    let timeoutId = stopAnimating();

    return () => clearTimeout(timeoutId);
  }, []);

  const handlePress = () => {
    imageRef.current && imageRef.current.startAnimating();
    setShowPlayButton(false);

    stopAnimating();
  };

  return (
    <TouchableOpacity activeOpacity={1} onPress={handlePress}>
      <Image
        ref={imageRef}
        source={url}
        style={{aspectRatio}}
        autoplay={autoplay}
      />
      {showPlayButton && (
        <View
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <View
            style={{
              backgroundColor: '#fffc',
              borderRadius: normalize(100),
              width: normalize(45),
              height: normalize(45),
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontSize: normalize(12),
                color: '#333',
                fontWeight: '600',
              }}>
              GIF
            </Text>
          </View>
        </View>
      )}
    </TouchableOpacity>
  );
};

[timothyerwin]

[timothyerwin]

We are using this in Icychat

[timothyerwin]

we'll take a look at the WhatsApp experience. is there is any additional context or rationale for this request you can provide?

Yes.

1. In a chat app with multiple GIF messages it's resource intensive to be playing them all over and over when the user really only cares about the most recent one.
2. It's dizzying to see the same animation playing over and over...I would guess most people want it to stop after say 3 repeats.