loadingImageComponent prop is added for more customization

Author: kuraydev

README.md

@@ -20,7 +20,7 @@
     </td>
   </tr>
  <tr>
-    <td align="center"> 
+    <td align="center">
        <img alt="React Native Progressive Fast Image"
         src="assets/Screenshots/React-Native-Progressive-Fast-Image.gif" />
     </td>
@@ -70,12 +70,30 @@ It accepts every `Image` and `FastImage` props. You can use it like you used to.
 
 useNativeDriver?: boolean;
 
-| Property        |        Type         |  Default  | Description                           |
-| --------------- | :-----------------: | :-------: | ------------------------------------- |
-| source          |       Source        | undefined | set the main source of the image      |
-| thumbnailSource | ImageSourcePropType | undefined | set the thumbnail source of the image |
-| loadingSource   | ImageSourcePropType | undefined | set the error source of the image     |
-| errorSource     | ImageSourcePropType | undefined | set the loading source of the image   |
+| Property              |        Type         |  Default  | Description                           |
+| --------------------- | :-----------------: | :-------: | ------------------------------------- |
+| source                |       Source        | undefined | set the main source of the image      |
+| thumbnailSource       | ImageSourcePropType | undefined | set the thumbnail source of the image |
+| loadingSource         | ImageSourcePropType | undefined | set the error source of the image     |
+| errorSource           | ImageSourcePropType | undefined | set the loading source of the image   |
+| loadingImageComponent |      Component      |  default  | WARNING: Read the below!              |
+
+### `loadingImageComponent` Usage
+
+If you want to set your own component for the loading image, you should set this **style** for the top of the component
+
+```javascript
+{
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  position: "absolute",
+  alignItems: "center",
+  alignSelf: "center",
+  justifyContent: "center",
+}
+```
 
 ## Customization Props
 
@@ -98,10 +116,10 @@ useNativeDriver?: boolean;
 
 **Fixes** FastImage's `source null` bug-fix.
 
-- https://github.com/DylanVann/react-native-fast-image/issues/623
-- https://github.com/DylanVann/react-native-fast-image/issues/27
-- https://github.com/DylanVann/react-native-fast-image/issues/484
-- https://github.com/DylanVann/react-native-fast-image/issues/96
+- <https://github.com/DylanVann/react-native-fast-image/issues/623>
+- <https://github.com/DylanVann/react-native-fast-image/issues/27>
+- <https://github.com/DylanVann/react-native-fast-image/issues/484>
+- <https://github.com/DylanVann/react-native-fast-image/issues/96>
 
 ## Author
 
@@ -110,3 +128,7 @@ FreakyCoder, kurayogun@gmail.com
 ## License
 
 React Native Progressive Fast Image is available under the MIT license. See the LICENSE file for more info.
+
+```
+
+```

lib/ProgressiveFastImage.tsx

@@ -24,7 +24,9 @@ export type CustomFastImageStyleProps =
   | StyleProp<FastImageStyle>
   | Array<StyleProp<FastImageStyle>>;
 
+  
 interface IProps {
+  loadingImageComponent?: React.ReactNode;
   source: Source;
   errorSource?: Source;
   loadingSource?: ImageSourcePropType;
@@ -116,13 +118,14 @@ class ProgressiveImage extends React.Component<IProps, IState> {
       source,
       loadingSource,
       thumbnailSource,
+      loadingImageComponent,
       loadingImageStyle = this.props.style,
       ...props
     } = this.props;
 
     return (
       <View style={styles.container}>
-        {loadingSource && !this.state.imageLoaded && (
+        {loadingImageComponent || loadingSource && !this.state.imageLoaded && (
           <View style={[styles.loadingImageStyle, style]}>
             <AnimatedFastImage
               resizeMode="contain"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@freakycoder/react-native-progressive-fast-image",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Customizable progressive image for React Native with FastImage",
   "main": "./build/dist/ProgressiveFastImage.js",
   "repository": "git@github.com:WrathChaos/react-native-progressive-fast-image.git",