Closed timothyerwin closed 7 months ago
Hey @timothyerwin, thanks for flagging this. I've passed this on to my team.
@ALexanderLonsky any news on this one? thanks!
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.
@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>
);
};
We are using this in Icychat
we'll take a look at the WhatsApp experience. is there is any additional context or rationale for this request you can provide?
Yes.
Duplicates
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