Dot style

src/component/Dot.tsx

@@ -5,7 +5,7 @@
  * Converted to Functional component. on 21/09/2021
  */
 import React, { useEffect, useMemo, useState } from 'react';
-import { Animated } from 'react-native';
+import { Animated, ViewStyle } from 'react-native';
 import usePrevious from 'react-use/lib/usePrevious';
 import EmptyDot from './EmptyDot';
 import { getDotStyle } from '../util/DotUtils';
@@ -17,6 +17,7 @@ const Dot: React.FC<{
   activeColor: string;
   inactiveColor?: string;
   sizeRatio: number;
+  activeStyle?: ViewStyle;
 }> = (props) => {
   const [animVal] = useState(new Animated.Value(0));
   const [animate, setAnimate] = useState(false);
@@ -108,6 +109,7 @@ const Dot: React.FC<{
         inputRange: [0, 1],
         outputRange: [prevType?.opacity || 0.2, type.opacity],
       }),
+      ...props.activeStyle,
     };
   }, [
     animVal,
@@ -119,6 +121,7 @@ const Dot: React.FC<{
     props.sizeRatio,
     type.opacity,
     type.size,
+    props.activeStyle,
   ]);
 
   if (props.curPage < 3) {

src/component/EmptyDot.tsx

@@ -3,12 +3,13 @@
  * Converted to Functional component. on 21/09/2021
  */
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 
 export const defaultEmptyDotSize = 3;
 
 const EmptyDot: React.FC<{
   sizeRatio: number;
+  inActiveStyle?: ViewStyle;
 }> = (props) => {
   return (
     <View
@@ -19,6 +20,7 @@ const EmptyDot: React.FC<{
           height: defaultEmptyDotSize * props.sizeRatio,
           margin: defaultEmptyDotSize * props.sizeRatio,
         },
+        props.inActiveStyle,
       ]}
     />
   );

src/index.tsx

@@ -23,6 +23,8 @@ export interface IDotContainerProps {
   activeDotColor: string;
   inactiveDotColor?: string;
   vertical?: boolean;
+  activeStyle: ViewStyle;
+  inActiveStyle: ViewStyle;
 }
 
 const ONE_EMPTY_DOT_SIZE = defaultEmptyDotSize * defaultEmptyDotSize;
@@ -86,7 +88,14 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
       scrollTo(props.curPage);
   }, [prevPage, props.curPage, props.maxPage, scrollTo]);
 
-  const { curPage, maxPage, activeDotColor, inactiveDotColor } = props;
+  const {
+    curPage,
+    maxPage,
+    activeDotColor,
+    inactiveDotColor,
+    activeStyle,
+    inActiveStyle,
+  } = props;
   const list = useMemo(() => [...Array(maxPage).keys()], [maxPage]);
 
   let normalizedPage = curPage;
@@ -114,6 +123,7 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
               maxPage={maxPage}
               activeColor={activeDotColor}
               inactiveColor={inactiveDotColor}
+              activeStyle={activeStyle}
             />
           );
         })}
@@ -139,8 +149,8 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
         showsHorizontalScrollIndicator={false}
       >
         {/* previous empty dummy dot */}
-        <EmptyDot sizeRatio={sizeRatio} />
-        <EmptyDot sizeRatio={sizeRatio} />
+        <EmptyDot sizeRatio={sizeRatio} inActiveStyle={inActiveStyle} />
+        <EmptyDot sizeRatio={sizeRatio} inActiveStyle={inActiveStyle} />
 
         {list.map((i) => {
           return (
@@ -152,13 +162,14 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
               maxPage={maxPage}
               activeColor={activeDotColor}
               inactiveColor={inactiveDotColor}
+              activeStyle={activeStyle}
             />
           );
         })}
 
         {/* previous empty dummy dot */}
-        <EmptyDot sizeRatio={sizeRatio} />
-        <EmptyDot sizeRatio={sizeRatio} />
+        <EmptyDot sizeRatio={sizeRatio} inActiveStyle={inActiveStyle} />
+        <EmptyDot sizeRatio={sizeRatio} inActiveStyle={inActiveStyle} />
       </ScrollView>
     </View>
   );