Implement custom component render

Author: alexvcasillas

README.md

@@ -28,20 +28,20 @@ function LoadingScreen() {
         <LoadingDots />
       </View>
     </View>
-  )
+  );
 }
 
 const styles = StyleSheet.create({
-  loadingScreen: {
+  loadingScreen: {
     flex: 1,
     display: "flex",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
   },
   dotsWrapper: {
-    width: 100
-  }
-})
+    width: 100,
+  },
+});
 ```
 
 The above code will produce the same outcome as the demo screen capture.
@@ -77,7 +77,6 @@ default 20
 
 This prop will control the size of each dot that will be displayed for the animation.
 
-
 ### borderRadius
 
 ```
@@ -93,4 +92,13 @@ This prop will control the border radius of the dots in case you want a specific
 default 20
 ```
 
-This prop will control the height of the bouncing for the loading dots. The higher the value the higher the will bounce up and down. From `0` to `bounceHeight` and from `0` to `-bounceHeight`.
+This prop will control the height of the bouncing for the loading dots. The higher the value the higher the will bounce up and down. From `0` to `bounceHeight` and from `0` to `-bounceHeight`.
+
+### components
+
+```js
+@type {React.ReactNode}
+default null
+```
+
+This prop will allow you to pass an array of the elements that you'd like to be rendered instead of the colored dots. If you pass `components` the `dots`, `colors`, `size` and `borderRadius` props will be ignored.

package.json

@@ -1,15 +1,14 @@
 {
   "name": "react-native-loading-dots",
-  "version": "1.2.0",
-  "description": "A React Native loading component with dots and smooth animation",
+  "version": "1.3.0",
+  "description": "A React Native loading component with dots or custom components and smooth animation",
   "repository": "https://github.com/alexvcasillas/react-native-loading-dots",
   "author": "Alex Casillas",
   "license": "MIT",
   "main": "src/react-native-loading-dots.js",
   "dependencies": {},
   "peerDependencies": {
     "react": "^16.8.6",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz"
-  },
-  "devDependencies": {}
+    "react-native": "^0.68.2"
+  }
 }

src/react-native-loading-dots.js

@@ -1,23 +1,26 @@
 import React, { useState, useEffect, useRef } from "react";
 import { StyleSheet, Animated, Easing } from "react-native";
 
-const defaultColors = [
-  "#4dabf7",
-  "#3bc9db",
-  "#38d9a9",
-  "#69db7c"
-];
+const defaultColors = ["#4dabf7", "#3bc9db", "#38d9a9", "#69db7c"];
 
-function LoadingDots({ dots = 4, colors = defaultColors, size = 20, bounceHeight = 20, borderRadius }) {
+function LoadingDots({
+  dots = 4,
+  colors = defaultColors,
+  size = 20,
+  bounceHeight = 20,
+  borderRadius,
+  components = null,
+}) {
   const [animations, setAnimations] = useState([]);
   const [reverse, setReverse] = useState(false);
 
   const opacity = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
     const dotAnimations = [];
-    // eslint-disable-next-line no-plusplus
-    for (let i = 0; i < dots; i++) {
+    let animationsAmount =
+      !!components && Array.isArray(components) ? components.length : dots;
+    for (let i = 0; i < animationsAmount; i++) {
       dotAnimations.push(new Animated.Value(0));
     }
     setAnimations(dotAnimations);
@@ -33,7 +36,7 @@ function LoadingDots({ dots = 4, colors = defaultColors, size = 20, bounceHeight
     Animated.timing(opacity, {
       toValue: 1,
       easing: Easing.ease,
-      useNativeDriver: true
+      useNativeDriver: true,
     }).start();
   }
 
@@ -43,19 +46,19 @@ function LoadingDots({ dots = 4, colors = defaultColors, size = 20, bounceHeight
         toValue: reverseY ? bounceHeight : -bounceHeight,
         easing: Easing.bezier(0.41, -0.15, 0.56, 1.21),
         delay,
-        useNativeDriver: true
+        useNativeDriver: true,
       }),
       Animated.timing(node, {
         toValue: reverseY ? -bounceHeight : bounceHeight,
         easing: Easing.bezier(0.41, -0.15, 0.56, 1.21),
         delay,
-        useNativeDriver: true
+        useNativeDriver: true,
       }),
       Animated.timing(node, {
         toValue: 0,
         delay,
-        useNativeDriver: true
-      })
+        useNativeDriver: true,
+      }),
     ]);
     return floatSequence;
   }
@@ -75,17 +78,29 @@ function LoadingDots({ dots = 4, colors = defaultColors, size = 20, bounceHeight
 
   return (
     <Animated.View style={[styles.loading, { opacity }]}>
-      {animations.map((animation, index) => (
-        <Animated.View
-          // eslint-disable-next-line react/no-array-index-key
-          key={`loading-anim-${index}`}
-          style={[
-            { width: size, height: size, borderRadius: borderRadius || size / 2 },
-            { backgroundColor: colors[index] || "#4dabf7" },
-            { transform: [{ translateY: animation }] }
-          ]}
-        />
-      ))}
+      {animations.map((animation, index) =>
+        components ? (
+          <Animated.View
+            key={`loading-anim-${index}`}
+            style={[{ transform: [{ translateY: animation }] }]}
+          >
+            {components[index]}
+          </Animated.View>
+        ) : (
+          <Animated.View
+            key={`loading-anim-${index}`}
+            style={[
+              {
+                width: size,
+                height: size,
+                borderRadius: borderRadius || size / 2,
+              },
+              { backgroundColor: colors[index] || "#4dabf7" },
+              { transform: [{ translateY: animation }] },
+            ]}
+          />
+        )
+      )}
     </Animated.View>
   );
 }
@@ -95,8 +110,8 @@ const styles = StyleSheet.create({
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "space-between"
-  }
+    justifyContent: "space-between",
+  },
 });
 
 export default LoadingDots;