hide overflow for gif images on Android (#589)

Author: ethanshar

android/app/build.gradle

@@ -78,7 +78,8 @@ dependencies {
     implementation "com.facebook.react:react-native:+"  // From node_modules
     implementation project(':react-native-navigation')
     implementation project(':react-native-ui-lib')
-
+    implementation 'com.facebook.fresco:fresco:2.0.0'
+    implementation 'com.facebook.fresco:animated-gif:2.0.0'
 
     if (enableHermes) {
         def hermesPath = "../../node_modules/hermes-engine/android/";

demo/src/screens/componentScreens/AvatarsScreen.js

@@ -70,6 +70,13 @@ const examples = [
       iconStyle: {backgroundColor: Colors.yellow20},
     },
   },
+  {
+    title: 'GIF',
+    size: 48, 
+    imageSource: {
+      uri: 'https://media.giphy.com/media/3oEdv8elIVRa3daNl6/giphy.gif'
+    }
+  },
   {
     title: 'Invalid Gravatar (see logs)',
     label: '🤦',

src/components/image/index.js

@@ -46,7 +46,7 @@ class Image extends PureBaseComponent {
      */
     aspectRatio: PropTypes.number,
     /**
-     * The type of overly to place on top of the image. Note: the image MUST have proper size, see examples in: 
+     * The type of overly to place on top of the image. Note: the image MUST have proper size, see examples in:
      * https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/OverlaysScreen.js
      */
     overlayType: Overlay.propTypes.type
@@ -64,6 +64,20 @@ class Image extends PureBaseComponent {
     this.sourceTransformer = this.getThemeProps().sourceTransformer;
   }
 
+  isGif() {
+    if (Constants.isAndroid) {
+      const {source} = this.props;
+      const url = _.get(source, 'uri');
+      const isGif = /(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|gif|png)/.test(url);
+      return isGif;
+    }
+  }
+
+  shouldUseImageBackground() {
+    const {overlayType} = this.props;
+    return !!overlayType || this.isGif();
+  }
+
   getImageSource() {
     const {assetName, assetGroup} = this.props;
     if (!_.isUndefined(assetName)) {
@@ -86,14 +100,15 @@ class Image extends PureBaseComponent {
     const source = this.getImageSource();
     const {tintColor, style, supportRTL, cover, aspectRatio, overlayType, ...others} = this.getThemeProps();
     const shouldFlipRTL = supportRTL && Constants.isRTL;
-    const ImageView = overlayType ? ImageBackground : RNImage;
+    const ImageView = this.shouldUseImageBackground() ? ImageBackground : RNImage;
 
     return (
       <ImageView
         style={[
           {tintColor},
           shouldFlipRTL && styles.rtlFlipped,
           cover && styles.coverImage,
+          this.isGif() && styles.gifImage,
           aspectRatio && {aspectRatio},
           style
         ]}
@@ -115,6 +130,9 @@ const styles = StyleSheet.create({
   coverImage: {
     width: Constants.screenWidth,
     aspectRatio: 16 / 8
+  }, 
+  gifImage: {
+    overflow: 'hidden'
   }
 });