feat: 💄 add inactiveColor props

Author: pratt3351

src/component/Dot.tsx

@@ -15,6 +15,7 @@ const Dot: React.FC<{
   curPage: number;
   maxPage: number;
   activeColor: string;
+  inactiveColor?: string;
   sizeRatio: number;
 }> = (props) => {
   const [animVal] = useState(new Animated.Value(0));
@@ -26,7 +27,18 @@ const Dot: React.FC<{
       maxPage: props.maxPage,
     })
   );
+
+  const [dotColor, setDotColor] = useState<string>(() => {
+    if (props.curPage === props.idx) {
+      //its current active page now
+      return props.activeColor;
+    }
+
+    return props.inactiveColor ?? props.activeColor;
+  });
+
   const prevType = usePrevious(type);
+  const prevDotColor = usePrevious<string>(dotColor);
 
   useEffect(() => {
     const nextType = getDotStyle({
@@ -38,14 +50,21 @@ const Dot: React.FC<{
     const nextAnimate =
       nextType.size !== (prevType?.size || 3) ||
       nextType.opacity !== (prevType?.opacity || 0.2);
+    if (props.curPage === props.idx) {
+      setDotColor(props.activeColor);
+    } else {
+      setDotColor(props.inactiveColor ?? props.activeColor);
+    }
 
     setType(nextType);
     setAnimate(nextAnimate);
   }, [
     prevType?.opacity,
     prevType?.size,
+    props.activeColor,
     props.curPage,
     props.idx,
+    props.inactiveColor,
     props.maxPage,
   ]);
 
@@ -68,9 +87,16 @@ const Dot: React.FC<{
         type.size * props.sizeRatio,
       ],
     });
+
+    const backgroundColor = animVal.interpolate({
+      inputRange: [0, 1],
+      outputRange: [prevDotColor ?? props.activeColor, dotColor],
+    });
+
     return {
       width: size,
       height: size,
+      backgroundColor,
       borderRadius: animVal.interpolate({
         inputRange: [0, 1],
         outputRange: [
@@ -85,8 +111,11 @@ const Dot: React.FC<{
     };
   }, [
     animVal,
+    dotColor,
+    prevDotColor,
     prevType?.opacity,
     prevType?.size,
+    props.activeColor,
     props.sizeRatio,
     type.opacity,
     type.size,
@@ -102,7 +131,6 @@ const Dot: React.FC<{
     <Animated.View
       style={[
         {
-          backgroundColor: props.activeColor,
           margin: 3 * props.sizeRatio,
         },
         animStyle,

src/index.tsx

@@ -5,7 +5,13 @@
  * Converted to Functional component. on 21/09/2021
  */
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { ScrollView, View, ViewStyle, StyleProp } from 'react-native';
+import {
+  ScrollView,
+  View,
+  ViewStyle,
+  StyleProp,
+  StyleSheet,
+} from 'react-native';
 import Dot from './component/Dot';
 import EmptyDot, { defaultEmptyDotSize } from './component/EmptyDot';
 import usePrevious from 'react-use/lib/usePrevious';
@@ -15,6 +21,7 @@ export interface IDotContainerProps {
   maxPage: number;
   sizeRatio?: number;
   activeDotColor: string;
+  inactiveDotColor?: string;
   vertical?: boolean;
 }
 
@@ -79,7 +86,7 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
       scrollTo(props.curPage);
   }, [prevPage, props.curPage, props.maxPage, scrollTo]);
 
-  const { curPage, maxPage, activeDotColor } = props;
+  const { curPage, maxPage, activeDotColor, inactiveDotColor } = props;
   const list = useMemo(() => [...Array(maxPage).keys()], [maxPage]);
 
   let normalizedPage = curPage;
@@ -106,6 +113,7 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
               curPage={normalizedPage}
               maxPage={maxPage}
               activeColor={activeDotColor}
+              inactiveColor={inactiveDotColor}
             />
           );
         })}
@@ -123,9 +131,7 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
     >
       <ScrollView
         ref={refScrollView}
-        contentContainerStyle={{
-          alignItems: 'center',
-        }}
+        contentContainerStyle={styles.scrollViewContainer}
         bounces={false}
         horizontal={!props.vertical}
         scrollEnabled={false}
@@ -145,6 +151,7 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
               curPage={normalizedPage}
               maxPage={maxPage}
               activeColor={activeDotColor}
+              inactiveColor={inactiveDotColor}
             />
           );
         })}
@@ -157,4 +164,10 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
   );
 };
 
+const styles = StyleSheet.create({
+  scrollViewContainer: {
+    alignItems: 'center',
+  },
+});
+
 export default DotContainer;