export progressiveImage component (#3213)

Author: adids1221

src/components/index.js

@@ -134,6 +134,9 @@ export default {
   get ProgressBar() {
     return require('./progressBar').default;
   },
+  get ProgressiveImage() {
+    return require('./progressiveImage').default;
+  },
   get StateScreen() {
     return require('./stateScreen').default;
   },

src/components/progressiveImage/index.js renamed to src/components/progressiveImage/index.tsx

@@ -1,46 +1,37 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {View, StyleSheet, Animated} from 'react-native';
-import AnimatedImage from '../animatedImage';
+import AnimatedImage, {AnimatedImageProps} from '../animatedImage';
 import {Colors} from '../../style';
 
 /**
- * @description: Image component that loads first a small thumbnail of the images, 
+ * @description: Image component that loads first a small thumbnail of the images,
  *               and fades-in the full-sized image with animation once it's loaded
  * @extends: AnimatedImage
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ProgressiveImageScreen.js
  */
-class ProgressiveImage extends React.Component {
+
+export type ProgressiveImageProps = {
+  /**
+   * small thumbnail source to display while the full-size image is loading
+   */
+  thumbnailSource: AnimatedImageProps['source'];
+};
+
+class ProgressiveImage extends React.Component<ProgressiveImageProps, {}> {
   static displayName = 'ProgressiveImage';
-  static propTypes = {
-    /**
-     * small thumbnail source to display while the full-size image is loading
-     */
-    thumbnailSource: PropTypes.object
-  };
 
   thumbnailAnimated = new Animated.Value(0);
   imageAnimated = new Animated.Value(0);
 
   getThumbnail = () => {
     const {thumbnailSource, ...props} = this.props;
 
-    return (
-      <AnimatedImage                
-        {...props}
-        source={thumbnailSource}
-        loader={<View style={styles.container}/>}        
-      />
-    );
+    return <AnimatedImage {...props} source={thumbnailSource} loader={<View style={styles.container}/>}/>;
   };
 
-  render() {    
-    return (
-      <AnimatedImage        
-        {...this.props}
-        loader={this.getThumbnail()}
-      />
-    );
+  render() {
+    //@ts-ignore
+    return <AnimatedImage {...this.props} loader={this.getThumbnail()}/>;
   }
 }
 
@@ -50,5 +41,4 @@ const styles = StyleSheet.create({
   }
 });
 
-
 export default ProgressiveImage;

src/index.ts

@@ -124,6 +124,7 @@ export {
   PickerMethods
 } from './components/picker';
 export {default as ProgressBar, ProgressBarProps} from './components/progressBar';
+export {default as ProgressiveImage, ProgressiveImageProps} from './components/progressiveImage';
 export {default as RadioButton, RadioButtonProps} from './components/radioButton';
 export {default as RadioGroup, RadioGroupProps} from './components/radioGroup';
 export type {RecorderProps} from './typings/recorderTypes';