diff --git a/README.md b/README.md
index daeba06..c18aa9d 100644
--- a/README.md
+++ b/README.md
@@ -58,6 +58,7 @@ export default ExampleDotPaginate;
 | `activeDotColor`   | `string`                    | required                   | Active Dot Color. dot will control by opacity                  |
 | `inactiveDotColor` | `string`                    | undefined                  | InActive Dot Color. dot will control by opacity                |
 | `sizeRatio`        | `number`                    | 1.0                        | Customize Dot Size. minimum value is 1.0 (*recommend 1.0 ~ 2.0*) |
+| `opacity`          | `number`                    | 0.2                        | Dot opacity for inactive dot                                   |
 | `vertical`         | `boolean`                   | false                      | Dot direction                                                  |
 
 ## Contributing
diff --git a/src/component/Dot.tsx b/src/component/Dot.tsx
index b4184fa..6f701c1 100644
--- a/src/component/Dot.tsx
+++ b/src/component/Dot.tsx
@@ -17,6 +17,7 @@ const Dot: React.FC<{
   activeColor: string;
   inactiveColor?: string;
   sizeRatio: number;
+  opacity?: number;
 }> = (props) => {
   const [animVal] = useState(new Animated.Value(0));
   const [animate, setAnimate] = useState(false);
@@ -37,8 +38,18 @@ const Dot: React.FC<{
     return props.inactiveColor ?? props.activeColor;
   });
 
+  const [dotOpacity, setDotOpacity] = useState<number>(() => {
+    if (props.curPage === props.idx) {
+      //its current active page now
+      return 1;
+    }
+
+    return props.opacity ?? 0.2;
+  });
+
   const prevType = usePrevious(type);
   const prevDotColor = usePrevious<string>(dotColor);
+  const prevOpacity = usePrevious<number>(dotOpacity);
 
   useEffect(() => {
     const nextType = getDotStyle({
@@ -47,18 +58,20 @@ const Dot: React.FC<{
       maxPage: props.maxPage,
     });
 
-    const nextAnimate =
-      nextType.size !== (prevType?.size || 3) ||
-      nextType.opacity !== (prevType?.opacity || 0.2);
+    const nextAnimate = nextType.size !== (prevType?.size || 3);
     if (props.curPage === props.idx) {
       setDotColor(props.activeColor);
+      setDotOpacity(1);
     } else {
       setDotColor(props.inactiveColor ?? props.activeColor);
+      setDotOpacity(props.opacity ?? 0.2);
     }
 
     setType(nextType);
     setAnimate(nextAnimate);
   }, [
+    dotOpacity,
+    prevType,
     prevType?.opacity,
     prevType?.size,
     props.activeColor,
@@ -66,6 +79,7 @@ const Dot: React.FC<{
     props.idx,
     props.inactiveColor,
     props.maxPage,
+    props.opacity,
   ]);
 
   useEffect(() => {
@@ -93,6 +107,11 @@ const Dot: React.FC<{
       outputRange: [prevDotColor ?? props.activeColor, dotColor],
     });
 
+    const opacity = animVal.interpolate({
+      inputRange: [0, 1],
+      outputRange: [prevOpacity ?? props.opacity, dotOpacity],
+    });
+
     return {
       width: size,
       height: size,
@@ -104,20 +123,18 @@ const Dot: React.FC<{
           type.size * props.sizeRatio * 0.5,
         ],
       }),
-      opacity: animVal.interpolate({
-        inputRange: [0, 1],
-        outputRange: [prevType?.opacity || 0.2, type.opacity],
-      }),
+      opacity: opacity,
     };
   }, [
     animVal,
     dotColor,
+    dotOpacity,
     prevDotColor,
-    prevType?.opacity,
+    prevOpacity,
     prevType?.size,
     props.activeColor,
+    props.opacity,
     props.sizeRatio,
-    type.opacity,
     type.size,
   ]);
 
diff --git a/src/index.tsx b/src/index.tsx
index ed559fe..069ee4b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -23,6 +23,7 @@ export interface IDotContainerProps {
   activeDotColor: string;
   inactiveDotColor?: string;
   vertical?: boolean;
+  opacity?: number;
 }
 
 const ONE_EMPTY_DOT_SIZE = defaultEmptyDotSize * defaultEmptyDotSize;
@@ -86,7 +87,7 @@ 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, opacity } = props;
   const list = useMemo(() => [...Array(maxPage).keys()], [maxPage]);
 
   let normalizedPage = curPage;
@@ -114,6 +115,7 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
               maxPage={maxPage}
               activeColor={activeDotColor}
               inactiveColor={inactiveDotColor}
+              opacity={opacity}
             />
           );
         })}
@@ -152,6 +154,7 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
               maxPage={maxPage}
               activeColor={activeDotColor}
               inactiveColor={inactiveDotColor}
+              opacity={opacity}
             />
           );
         })}