1.2.1 react-native-elements#2080

thandhla · Sep 20, 2019 · e1bc867 · e1bc867
2 parents 3bb4ecf + 8fe40c2
commit e1bc867
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 84 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-elements",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "React Native Elements & UI Toolkit",
   "main": "src/index.js",
   "types": "src/index.d.ts",

diff --git a/src/avatar/__tests__/__snapshots__/Avatar.js.snap b/src/avatar/__tests__/__snapshots__/Avatar.js.snap
@@ -10,7 +10,7 @@ exports[`Avatar Component Edit button android 1`] = `
     }
   }
 >
-  <Themed.Image
+  <ForwardRef(Themed.Image)
     ImageComponent={[Function]}
     containerStyle={
       Object {
@@ -81,7 +81,7 @@ exports[`Avatar Component Edit button ios 1`] = `
     }
   }
 >
-  <Themed.Image
+  <ForwardRef(Themed.Image)
     ImageComponent={[Function]}
     containerStyle={
       Object {
@@ -152,7 +152,7 @@ exports[`Avatar Component Placeholders renders using icon prop 1`] = `
     }
   }
 >
-  <Themed.Image
+  <ForwardRef(Themed.Image)
     ImageComponent={[Function]}
     PlaceholderContent={
       <Themed.Icon
@@ -200,7 +200,7 @@ exports[`Avatar Component Placeholders renders using icon with defaults 1`] = `
     }
   }
 >
-  <Themed.Image
+  <ForwardRef(Themed.Image)
     ImageComponent={[Function]}
     PlaceholderContent={
       <Themed.Icon
@@ -247,7 +247,7 @@ exports[`Avatar Component Placeholders shouldn't show placeholder if not using s
     }
   }
 >
-  <Themed.Image
+  <ForwardRef(Themed.Image)
     ImageComponent={[Function]}
     PlaceholderContent={
       <Text
@@ -295,7 +295,7 @@ exports[`Avatar Component Sizes accepts a number 1`] = `
     }
   }
 >
-  <Themed.Image
+  <ForwardRef(Themed.Image)
     ImageComponent={[Function]}
     containerStyle={
       Object {
@@ -330,7 +330,7 @@ exports[`Avatar Component Sizes accepts large 1`] = `
     }
   }
 >
-  <Themed.Image
+  <ForwardRef(Themed.Image)
     ImageComponent={[Function]}
     containerStyle={
       Object {
@@ -365,7 +365,7 @@ exports[`Avatar Component Sizes accepts medium 1`] = `
     }
   }
 >
-  <Themed.Image
+  <ForwardRef(Themed.Image)
     ImageComponent={[Function]}
     containerStyle={
       Object {
@@ -400,7 +400,7 @@ exports[`Avatar Component Sizes accepts small 1`] = `
     }
   }
 >
-  <Themed.Image
+  <ForwardRef(Themed.Image)
     ImageComponent={[Function]}
     containerStyle={
       Object {
@@ -435,7 +435,7 @@ exports[`Avatar Component Sizes accepts xlarge 1`] = `
     }
   }
 >
-  <Themed.Image
+  <ForwardRef(Themed.Image)
     ImageComponent={[Function]}
     containerStyle={
       Object {
@@ -470,7 +470,7 @@ exports[`Avatar Component Sizes defaults to small if invalid string given 1`] =
     }
   }
 >
-  <Themed.Image
+  <ForwardRef(Themed.Image)
     ImageComponent={[Function]}
     containerStyle={
       Object {
@@ -505,7 +505,7 @@ exports[`Avatar Component allows custom imageProps 1`] = `
     }
   }
 >
-  <Themed.Image
+  <ForwardRef(Themed.Image)
     ImageComponent={[Function]}
     containerStyle={
       Object {
@@ -542,7 +542,7 @@ exports[`Avatar Component renders rounded 1`] = `
     }
   }
 >
-  <Themed.Image
+  <ForwardRef(Themed.Image)
     ImageComponent={[Function]}
     containerStyle={
       Object {
@@ -581,7 +581,7 @@ exports[`Avatar Component renders touchable if onPress given 1`] = `
     }
   }
 >
-  <Themed.Image
+  <ForwardRef(Themed.Image)
     ImageComponent={[Function]}
     containerStyle={
       Object {
@@ -790,7 +790,7 @@ exports[`Avatar Component should render without issues 1`] = `
     }
   }
 >
-  <Themed.Image
+  <ForwardRef(Themed.Image)
     ImageComponent={[Function]}
     containerStyle={
       Object {

diff --git a/src/card/__tests__/__snapshots__/Card.js.snap b/src/card/__tests__/__snapshots__/Card.js.snap
@@ -148,7 +148,7 @@ exports[`Card Component should have Card title with image 1`] = `
       </Themed.Text>
     </View>
     <View>
-      <Themed.Image
+      <ForwardRef(Themed.Image)
         source={
           Object {
             "uri": "https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg",
@@ -282,7 +282,7 @@ exports[`Card Component should have Card with featured title 1`] = `
         }
       }
     >
-      <Themed.Image
+      <ForwardRef(Themed.Image)
         source={
           Object {
             "uri": "https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg",
@@ -343,7 +343,7 @@ exports[`Card Component should have Card with featured title 1`] = `
             featured sub title
           </Themed.Text>
         </View>
-      </Themed.Image>
+      </ForwardRef(Themed.Image)>
       <View
         style={
           Object {

diff --git a/src/image/Image.js b/src/image/Image.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Animated,
@@ -11,25 +11,18 @@ import {
 import { nodeType } from '../helpers';
 import { ViewPropTypes, withTheme } from '../config';
 
-const Image = ({
-  placeholderStyle,
-  PlaceholderContent,
-  containerStyle,
-  style,
-  ImageComponent,
-  children,
-  ...attributes
-}) => {
-  const [placeholderOpacity] = useState(new Animated.Value(1));
-  const hasImage = Boolean(attributes.source);
+class Image extends React.Component {
+  state = {
+    placeholderOpacity: new Animated.Value(1),
+  };
 
-  const onLoad = () => {
+  onLoad = () => {
     const minimumWait = 100;
     const staggerNonce = 200 * Math.random();
 
     setTimeout(
       () => {
-        Animated.timing(placeholderOpacity, {
+        Animated.timing(this.state.placeholderOpacity, {
           toValue: 0,
           duration: 350,
           useNativeDriver: Platform.OS === 'android' ? false : true,
@@ -39,51 +32,64 @@ const Image = ({
     );
   };
 
-  return (
-    <View
-      accessibilityIgnoresInvertColors={true}
-      style={StyleSheet.flatten([styles.container, containerStyle])}
-    >
-      <ImageComponent
-        {...attributes}
-        onLoad={onLoad}
-        style={[
-          StyleSheet.absoluteFill,
-          {
-            width: style.width,
-            height: style.height,
-          },
-        ]}
-        testID="RNE__Image"
-      />
+  render() {
+    const {
+      placeholderStyle,
+      PlaceholderContent,
+      containerStyle,
+      style,
+      ImageComponent,
+      children,
+      ...attributes
+    } = this.props;
+    const hasImage = Boolean(attributes.source);
 
-      <Animated.View
-        pointerEvents={hasImage ? 'none' : 'auto'}
-        accessibilityElementsHidden={hasImage}
-        importantForAccessibility={hasImage ? 'no-hide-descendants' : 'yes'}
-        style={[
-          styles.placeholderContainer,
-          {
-            opacity: hasImage ? placeholderOpacity : 1,
-          },
-        ]}
+    return (
+      <View
+        accessibilityIgnoresInvertColors={true}
+        style={StyleSheet.flatten([styles.container, containerStyle])}
       >
-        <View
-          testID="RNE__Image__placeholder"
-          style={StyleSheet.flatten([
-            style,
-            styles.placeholder,
-            placeholderStyle,
-          ])}
+        <ImageComponent
+          {...attributes}
+          onLoad={this.onLoad}
+          style={[
+            StyleSheet.absoluteFill,
+            {
+              width: style.width,
+              height: style.height,
+            },
+          ]}
+          testID="RNE__Image"
+        />
+
+        <Animated.View
+          pointerEvents={hasImage ? 'none' : 'auto'}
+          accessibilityElementsHidden={hasImage}
+          importantForAccessibility={hasImage ? 'no-hide-descendants' : 'yes'}
+          style={[
+            styles.placeholderContainer,
+            {
+              opacity: hasImage ? this.state.placeholderOpacity : 1,
+            },
+          ]}
         >
-          {PlaceholderContent}
-        </View>
-      </Animated.View>
+          <View
+            testID="RNE__Image__placeholder"
+            style={StyleSheet.flatten([
+              style,
+              styles.placeholder,
+              placeholderStyle,
+            ])}
+          >
+            {PlaceholderContent}
+          </View>
+        </Animated.View>
 
-      <View style={style}>{children}</View>
-    </View>
-  );
-};
+        <View style={style}>{children}</View>
+      </View>
+    );
+  }
+}
 
 const styles = {
   container: {