Merge pull request #2 from kolking/active-color

Active color

Author: kolking

README.md

@@ -107,6 +107,7 @@ Prop | Type | Default | Description
 `count` | number | | The total number of pages (required)
 `current` | number | `0` | The current page index
 `color` | string | `black` | Color of the indicators
+`activeColor` | string | | Optional color of the active indicator
 `size` | number | `6` | Size of the indicators
 `gap` | number | `6` | Distance between the indicators
 `opacity` | number | `0.6` | Opacity of inactive indicators

example/App.tsx

@@ -40,6 +40,7 @@ const App = () => {
   const { width, height } = useWindowDimensions();
   const [current, setCurrent] = useState(0);
   const scrollX = useRef(new Animated.Value(0)).current;
+  const animatedCurrent = useRef(Animated.divide(scrollX, width)).current;
 
   const handleScrollEnd = useCallback(
     (e: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -75,7 +76,7 @@ const App = () => {
         style={styles.pageIndicator}
         count={pages.length}
         //current={current}
-        animatedCurrent={Animated.divide(scrollX, width)}
+        animatedCurrent={animatedCurrent}
         color="white"
       />
     </View>

src/Indicator.tsx

@@ -10,6 +10,7 @@ interface IndicatorProps extends ViewProps {
   stroke: number;
   opacity: number;
   vertical: boolean;
+  activeColor: string;
   borderRadius: number;
   animatedValue: Animated.Value | Animated.AnimatedInterpolation;
 }
@@ -23,10 +24,12 @@ const Indicator = ({
   stroke,
   opacity,
   vertical,
+  activeColor,
   borderRadius,
   animatedValue,
 }: IndicatorProps) => {
   const offset = (stroke - size) / 2;
+  const overlay = activeColor !== color;
 
   const wrapperTranslate = animatedValue.interpolate({
     inputRange: [index - 1, index, index + 1],
@@ -43,12 +46,22 @@ const Indicator = ({
     [vertical ? 'marginVertical' : 'marginHorizontal']: gap / 2,
     opacity: animatedValue.interpolate({
       inputRange: [index - 1, index, index + 1],
-      outputRange: [opacity, 1, opacity],
+      outputRange: [opacity, overlay ? 0 : 1, opacity],
       extrapolate: 'clamp',
     }),
     transform: [vertical ? { translateY: wrapperTranslate } : { translateX: wrapperTranslate }],
   };
 
+  const overlayStyles: Animated.AnimatedProps<ViewStyle> = {
+    ...wrapperStyles,
+    ...StyleSheet.absoluteFillObject,
+    opacity: animatedValue.interpolate({
+      inputRange: [index - 1, index, index + 1],
+      outputRange: [0, 1, 0],
+      extrapolate: 'clamp',
+    }),
+  };
+
   const commonStyle: Animated.AnimatedProps<ViewStyle> = {
     width: vertical ? size : stroke / 2,
     height: vertical ? stroke / 2 : size,
@@ -82,14 +95,26 @@ const Indicator = ({
   };
 
   return (
-    <Animated.View style={wrapperStyles}>
-      <View style={styles.mask}>
-        <Animated.View style={leftStyles} />
-      </View>
-      <View style={styles.mask}>
-        <Animated.View style={rightStyles} />
-      </View>
-    </Animated.View>
+    <View>
+      <Animated.View style={wrapperStyles}>
+        <View style={styles.mask}>
+          <Animated.View style={leftStyles} />
+        </View>
+        <View style={styles.mask}>
+          <Animated.View style={rightStyles} />
+        </View>
+      </Animated.View>
+      {overlay && (
+        <Animated.View style={overlayStyles}>
+          <View style={styles.mask}>
+            <Animated.View style={[leftStyles, { backgroundColor: activeColor }]} />
+          </View>
+          <View style={styles.mask}>
+            <Animated.View style={[rightStyles, { backgroundColor: activeColor }]} />
+          </View>
+        </Animated.View>
+      )}
+    </View>
   );
 };
 

src/PageIndicator.tsx

@@ -14,6 +14,7 @@ export interface PageIndicatorProps extends ViewProps {
   opacity?: number;
   duration?: number;
   vertical?: boolean;
+  activeColor?: string;
   borderRadius?: number;
   easing?: EasingFunction;
   animatedCurrent?: Animated.Value | Animated.AnimatedInterpolation;
@@ -29,6 +30,7 @@ export const PageIndicator = ({
   opacity = 0.6,
   duration = 500,
   vertical = false,
+  activeColor = color,
   borderRadius = size / 2,
   easing = Easing.out(Easing.cubic),
   animatedCurrent,
@@ -60,6 +62,7 @@ export const PageIndicator = ({
           count={count}
           index={index}
           vertical={vertical}
+          activeColor={activeColor}
           stroke={Math.max(stroke, size * 2)}
           opacity={clamp(opacity, 0, 1)}
           borderRadius={clamp(borderRadius, 0, size / 2)}