diff --git a/.storybook/stories/other/Example/DotsExample.tsx b/.storybook/stories/other/Example/DotsExample.tsx
index 46cff5241..6a4806c00 100644
--- a/.storybook/stories/other/Example/DotsExample.tsx
+++ b/.storybook/stories/other/Example/DotsExample.tsx
@@ -5,7 +5,7 @@ import {Button, Dots, rem, View} from '@lad-tech/mobydick-core';
 const DotsExample = ({length}: {length: number}) => {
   const [activeDot, setActiveDot] = useState(0);
   const [activeDotFirstHalf, setActiveDotFirstHalf] = useState(2);
-  const [activeDotSecondHalf, setActiveDotSecondHalf] = useState(7);
+  const [activeDotSecondHalf, setActiveDotSecondHalf] = useState(3);
 
   const onPressPrevFirstHalf = useCallback(() => {
     if (activeDotFirstHalf !== 0) {
@@ -68,7 +68,12 @@ const DotsExample = ({length}: {length: number}) => {
           paddingHorizontal: rem(20),
         }}>
         <Button text={'Prev'} onPress={onPressPrevSecondHalf} />
-        <Dots length={length} activeDot={activeDotSecondHalf} />
+        <Dots
+          length={length}
+          activeDot={activeDotSecondHalf}
+          fixedSize={rem(6)}
+          activeDotColor={'red'}
+        />
         <Button text={'Next'} onPress={onPressNextSecondHalf} />
       </View>
     </View>
diff --git a/packages/core/src/other/README.md b/packages/core/src/other/README.md
index 42319265e..d35eb7dca 100644
--- a/packages/core/src/other/README.md
+++ b/packages/core/src/other/README.md
@@ -25,3 +25,7 @@ maxLength —— по default 2, отображает максимальное 
 
 isLoop – бесконечная карусель, вы должны понимать, что элементов в ней лучше немного использовать
 isDots – не использовать, они еще в работе
+
+
+## ***Dots***
+fixedSize – будет работать, если элементов меньше 7
diff --git a/packages/core/src/other/components/Carousel/Carousel.tsx b/packages/core/src/other/components/Carousel/Carousel.tsx
index f8c3f0f93..5b8c123d3 100644
--- a/packages/core/src/other/components/Carousel/Carousel.tsx
+++ b/packages/core/src/other/components/Carousel/Carousel.tsx
@@ -42,6 +42,10 @@ const Carousel = <T,>({
   isScrolling = false,
   ms = 2000,
   indexScroll,
+  dotSize,
+  activeDotColor,
+  passiveDotColor,
+  dotsStyles,
   ...otherProps
 }: ICarouselProps<T>): JSX.Element => {
   const ref = useRef<FlatList>(null);
@@ -231,6 +235,10 @@ const Carousel = <T,>({
           length={data.length}
           activeDot={currIndex}
           animateAutoScroll={animateAutoScroll}
+          fixedSize={dotSize}
+          activeDotColor={activeDotColor}
+          passiveDotColor={passiveDotColor}
+          dotsStyles={dotsStyles}
         />
       )}
     </>
diff --git a/packages/core/src/other/components/Carousel/__tests__/Carousel.test.tsx b/packages/core/src/other/components/Carousel/__tests__/Carousel.test.tsx
index eaf1e3ca1..4e80f3436 100644
--- a/packages/core/src/other/components/Carousel/__tests__/Carousel.test.tsx
+++ b/packages/core/src/other/components/Carousel/__tests__/Carousel.test.tsx
@@ -207,6 +207,25 @@ describe('Carousel', () => {
       },
     });
   });
+  it('render Carousel isDots with props', () => {
+    const {toJSON} = render(
+      <SafeAreaProvider>
+        <Carousel
+          data={data}
+          sliderItem={sliderItem}
+          keyExtractor={keyExtractor}
+          isDots={true}
+          activeItemId={'1'}
+          itemWidth={itemWidth}
+          align={ICarouselAlign.start}
+          dotSize={4}
+          activeDotColor={'red'}
+          passiveDotColor={'black'}
+        />
+      </SafeAreaProvider>,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
   it('render Carousel onActiveChange', () => {
     const {toJSON} = render(
       <SafeAreaProvider>
diff --git a/packages/core/src/other/components/Carousel/__tests__/__snapshots__/Carousel.test.tsx.snap b/packages/core/src/other/components/Carousel/__tests__/__snapshots__/Carousel.test.tsx.snap
index dca4ba0dd..0ac3ca539 100644
--- a/packages/core/src/other/components/Carousel/__tests__/__snapshots__/Carousel.test.tsx.snap
+++ b/packages/core/src/other/components/Carousel/__tests__/__snapshots__/Carousel.test.tsx.snap
@@ -3749,13 +3749,680 @@ exports[`Carousel render Carousel isDots 1`] = `
         <View
           style={
             [
+              {
+                "borderRadius": 6,
+                "height": 12,
+                "marginHorizontal": 7.5,
+                "width": 12,
+              },
               {
                 "backgroundColor": "#5E6678",
+              },
+            ]
+          }
+        />
+        <View
+          style={
+            [
+              {
+                "borderRadius": 6,
+                "height": 12,
+                "marginHorizontal": 7.5,
+                "width": 12,
+              },
+              {
+                "backgroundColor": "#B6BBC6",
+              },
+            ]
+          }
+        />
+        <View
+          style={
+            [
+              {
+                "borderRadius": 6,
+                "height": 12,
+                "marginHorizontal": 7.5,
+                "width": 12,
+              },
+              {
+                "backgroundColor": "#B6BBC6",
+              },
+            ]
+          }
+        />
+        <View
+          style={
+            [
+              {
+                "borderRadius": 4.5,
+                "height": 9,
+                "marginHorizontal": 7.5,
+                "width": 9,
+              },
+              {
+                "backgroundColor": "#B6BBC6",
+              },
+            ]
+          }
+        />
+        <View
+          style={
+            [
+              {
+                "borderRadius": 3,
+                "height": 6,
+                "marginHorizontal": 7.5,
+                "width": 6,
+              },
+              {
+                "backgroundColor": "#B6BBC6",
+              },
+            ]
+          }
+        />
+        <View
+          style={
+            [
+              {
+                "borderRadius": 3,
+                "height": 6,
+                "marginHorizontal": 7.5,
+                "width": 6,
+              },
+              {
+                "backgroundColor": "#B6BBC6",
+              },
+            ]
+          }
+        />
+        <View
+          style={
+            [
+              {
+                "borderRadius": 3,
+                "height": 6,
+                "marginHorizontal": 7.5,
+                "width": 6,
+              },
+              {
+                "backgroundColor": "#B6BBC6",
+              },
+            ]
+          }
+        />
+      </View>
+    </RCTScrollView>
+  </View>,
+]
+`;
+
+exports[`Carousel render Carousel isDots with props 1`] = `
+[
+  <RCTScrollView
+    accessibilityLabel="carousel"
+    bounces={false}
+    data={
+      [
+        {
+          "id": "0",
+          "name": "icon-starfill",
+        },
+        {
+          "id": "1",
+          "name": "icon-starfill",
+        },
+        {
+          "id": "2",
+          "name": "icon-starfill",
+        },
+        {
+          "id": "3",
+          "name": "icon-starfill",
+        },
+        {
+          "id": "4",
+          "name": "icon-starfill",
+        },
+        {
+          "id": "5",
+          "name": "icon-starfill",
+        },
+        {
+          "id": "6",
+          "name": "icon-starfill",
+        },
+      ]
+    }
+    decelerationRate={0}
+    extraData={false}
+    getItem={[Function]}
+    getItemCount={[Function]}
+    horizontal={true}
+    initialNumToRender={10}
+    keyExtractor={[Function]}
+    onContentSizeChange={[Function]}
+    onEndReachedThreshold={0.5}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    onScrollToIndexFailed={[Function]}
+    onViewableItemsChanged={[Function]}
+    pagingEnabled={true}
+    removeClippedSubviews={true}
+    renderItem={[Function]}
+    scrollEventThrottle={16}
+    showsHorizontalScrollIndicator={false}
+    snapToAlignment="start"
+    snapToInterval={130}
+    stickyHeaderIndices={[]}
+    viewabilityConfig={
+      {
+        "itemVisiblePercentThreshold": 80,
+        "waitForInteraction": true,
+      }
+    }
+    viewabilityConfigCallbackPairs={
+      [
+        {
+          "onViewableItemsChanged": [Function],
+          "viewabilityConfig": {
+            "itemVisiblePercentThreshold": 80,
+            "waitForInteraction": true,
+          },
+        },
+      ]
+    }
+  >
+    <View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={
+          [
+            {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          accessibilityLabel="carouselItem"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "alignItems": "center",
+              "justifyContent": "center",
+              "marginHorizontal": 15,
+              "opacity": 1,
+            }
+          }
+        >
+          <Text
+            allowFontScaling={true}
+            style={
+              {
+                "color": "#5E6678",
+                "fontFamily": "Neotis",
+                "fontSize": 36,
+              }
+            }
+          >
+            
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={
+          [
+            {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          accessibilityLabel="carouselItem"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "alignItems": "center",
+              "justifyContent": "center",
+              "marginHorizontal": 15,
+              "opacity": 1,
+            }
+          }
+        >
+          <Text
+            allowFontScaling={true}
+            style={
+              {
+                "color": "#5E6678",
+                "fontFamily": "Neotis",
+                "fontSize": 36,
+              }
+            }
+          >
+            
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={
+          [
+            {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          accessibilityLabel="carouselItem"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "alignItems": "center",
+              "justifyContent": "center",
+              "marginHorizontal": 15,
+              "opacity": 1,
+            }
+          }
+        >
+          <Text
+            allowFontScaling={true}
+            style={
+              {
+                "color": "#5E6678",
+                "fontFamily": "Neotis",
+                "fontSize": 36,
+              }
+            }
+          >
+            
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={
+          [
+            {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          accessibilityLabel="carouselItem"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "alignItems": "center",
+              "justifyContent": "center",
+              "marginHorizontal": 15,
+              "opacity": 1,
+            }
+          }
+        >
+          <Text
+            allowFontScaling={true}
+            style={
+              {
+                "color": "#5E6678",
+                "fontFamily": "Neotis",
+                "fontSize": 36,
+              }
+            }
+          >
+            
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={
+          [
+            {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          accessibilityLabel="carouselItem"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "alignItems": "center",
+              "justifyContent": "center",
+              "marginHorizontal": 15,
+              "opacity": 1,
+            }
+          }
+        >
+          <Text
+            allowFontScaling={true}
+            style={
+              {
+                "color": "#5E6678",
+                "fontFamily": "Neotis",
+                "fontSize": 36,
+              }
+            }
+          >
+            
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={
+          [
+            {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          accessibilityLabel="carouselItem"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "alignItems": "center",
+              "justifyContent": "center",
+              "marginHorizontal": 15,
+              "opacity": 1,
+            }
+          }
+        >
+          <Text
+            allowFontScaling={true}
+            style={
+              {
+                "color": "#5E6678",
+                "fontFamily": "Neotis",
+                "fontSize": 36,
+              }
+            }
+          >
+            
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={
+          [
+            {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          accessibilityLabel="carouselItem"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "alignItems": "center",
+              "justifyContent": "center",
+              "marginHorizontal": 15,
+              "opacity": 1,
+            }
+          }
+        >
+          <Text
+            allowFontScaling={true}
+            style={
+              {
+                "color": "#5E6678",
+                "fontFamily": "Neotis",
+                "fontSize": 36,
+              }
+            }
+          >
+            
+          </Text>
+        </View>
+      </View>
+    </View>
+  </RCTScrollView>,
+  <View
+    accessibilityLabel="dotsAnimatedView"
+    collapsable={false}
+    onLayout={[Function]}
+    style={
+      {
+        "width": 150,
+      }
+    }
+  >
+    <RCTScrollView
+      accessibilityLabel="dotsScrollView"
+      bounces={false}
+      contentContainerStyle={
+        {
+          "alignItems": "center",
+        }
+      }
+      horizontal={true}
+      scrollEnabled={false}
+      showsHorizontalScrollIndicator={false}
+    >
+      <View>
+        <View
+          style={
+            [
+              {
                 "borderRadius": 6,
                 "height": 12,
                 "marginHorizontal": 7.5,
                 "width": 12,
               },
+              {
+                "backgroundColor": "red",
+              },
             ]
           }
         />
@@ -3763,12 +4430,14 @@ exports[`Carousel render Carousel isDots 1`] = `
           style={
             [
               {
-                "backgroundColor": "#B6BBC6",
                 "borderRadius": 6,
                 "height": 12,
                 "marginHorizontal": 7.5,
                 "width": 12,
               },
+              {
+                "backgroundColor": "black",
+              },
             ]
           }
         />
@@ -3776,12 +4445,14 @@ exports[`Carousel render Carousel isDots 1`] = `
           style={
             [
               {
-                "backgroundColor": "#B6BBC6",
                 "borderRadius": 6,
                 "height": 12,
                 "marginHorizontal": 7.5,
                 "width": 12,
               },
+              {
+                "backgroundColor": "black",
+              },
             ]
           }
         />
@@ -3789,12 +4460,14 @@ exports[`Carousel render Carousel isDots 1`] = `
           style={
             [
               {
-                "backgroundColor": "#B6BBC6",
                 "borderRadius": 4.5,
                 "height": 9,
                 "marginHorizontal": 7.5,
                 "width": 9,
               },
+              {
+                "backgroundColor": "black",
+              },
             ]
           }
         />
@@ -3802,12 +4475,14 @@ exports[`Carousel render Carousel isDots 1`] = `
           style={
             [
               {
-                "backgroundColor": "#B6BBC6",
                 "borderRadius": 3,
                 "height": 6,
                 "marginHorizontal": 7.5,
                 "width": 6,
               },
+              {
+                "backgroundColor": "black",
+              },
             ]
           }
         />
@@ -3815,12 +4490,14 @@ exports[`Carousel render Carousel isDots 1`] = `
           style={
             [
               {
-                "backgroundColor": "#B6BBC6",
                 "borderRadius": 3,
                 "height": 6,
                 "marginHorizontal": 7.5,
                 "width": 6,
               },
+              {
+                "backgroundColor": "black",
+              },
             ]
           }
         />
@@ -3828,12 +4505,14 @@ exports[`Carousel render Carousel isDots 1`] = `
           style={
             [
               {
-                "backgroundColor": "#B6BBC6",
                 "borderRadius": 3,
                 "height": 6,
                 "marginHorizontal": 7.5,
                 "width": 6,
               },
+              {
+                "backgroundColor": "black",
+              },
             ]
           }
         />
diff --git a/packages/core/src/other/components/Carousel/types.ts b/packages/core/src/other/components/Carousel/types.ts
index d922912f6..2cb3122c8 100644
--- a/packages/core/src/other/components/Carousel/types.ts
+++ b/packages/core/src/other/components/Carousel/types.ts
@@ -1,4 +1,5 @@
 import {FlatListProps} from 'react-native/Libraries/Lists/FlatList';
+import {ViewStyle} from 'react-native';
 
 export enum ICarouselAlign {
   center = 'center',
@@ -23,4 +24,8 @@ export interface ICarouselProps<T>
   isScrolling?: boolean;
   ms?: number;
   indexScroll?: number;
+  dotSize?: number;
+  activeDotColor?: string;
+  passiveDotColor?: string;
+  dotsStyles?: ViewStyle | ViewStyle[];
 }
diff --git a/packages/core/src/other/components/Dots/Dot.tsx b/packages/core/src/other/components/Dots/Dot.tsx
index 5b1a8da3f..ac3436a59 100644
--- a/packages/core/src/other/components/Dots/Dot.tsx
+++ b/packages/core/src/other/components/Dots/Dot.tsx
@@ -1,19 +1,40 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 
 import useStyles from '../../../styles/theme/hooks/useStyles';
 import View from '../../../basic/components/View/View';
+import {useTheme} from '../../../styles';
 
 import stylesCreate from './stylesCreate';
 
 interface IDot {
   active: boolean;
   size: number;
+  activeDotColor?: string | undefined;
+  passiveDotColor?: string | undefined;
 }
 
-const Dot = ({active, size}: IDot): JSX.Element => {
-  const [styles] = useStyles(stylesCreate, size, active);
+const Dot = ({
+  active,
+  size,
+  activeDotColor,
+  passiveDotColor,
+}: IDot): JSX.Element => {
+  const [styles] = useStyles(stylesCreate, size);
+  const {colors} = useTheme();
 
-  return <View style={[styles.dot]} />;
+  const backgroundColor = useMemo(() => {
+    return active
+      ? activeDotColor || colors.ElementNeutral
+      : passiveDotColor || colors.ElementMuted;
+  }, [
+    active,
+    activeDotColor,
+    colors.ElementMuted,
+    colors.ElementNeutral,
+    passiveDotColor,
+  ]);
+
+  return <View style={[styles.dot, {backgroundColor: backgroundColor}]} />;
 };
 
 export default Dot;
diff --git a/packages/core/src/other/components/Dots/Dots.tsx b/packages/core/src/other/components/Dots/Dots.tsx
index d6039a112..9c10c68a4 100644
--- a/packages/core/src/other/components/Dots/Dots.tsx
+++ b/packages/core/src/other/components/Dots/Dots.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {ScrollView, Animated} from 'react-native';
 
 import View from '../../../basic/components/View/View';
@@ -22,7 +22,15 @@ function getDirection(newIdx: number, prevIdx: number): number {
   return newIdx < prevIdx ? -1 : 1;
 }
 
-const Dots = ({length, activeDot, animateAutoScroll = true}: IDotsProps) => {
+const Dots = ({
+  length,
+  activeDot,
+  animateAutoScroll = true,
+  fixedSize,
+  activeDotColor,
+  passiveDotColor,
+  dotsStyles,
+}: IDotsProps) => {
   const refScrollView = useRef<ScrollView>(null);
   const dots = [...Array(length).keys()];
   const [prevIndex, setPrevIndex] = useState(activeDot - 1);
@@ -98,7 +106,7 @@ const Dots = ({length, activeDot, animateAutoScroll = true}: IDotsProps) => {
 
   useEffect(() => {
     isDynamicDots ? setIndexes() : isMiddleDotActive && scrollTo(activeDot);
-  }, [activeDot]);
+  }, [activeDot, isDynamicDots, isMiddleDotActive]);
 
   const size = useCallback(
     (k: number) => {
@@ -124,7 +132,13 @@ const Dots = ({length, activeDot, animateAutoScroll = true}: IDotsProps) => {
 
   const renderDot = () => {
     return dots.map(dot => (
-      <Dot key={dot} active={dot === activeDot} size={size(dot)} />
+      <Dot
+        key={dot}
+        active={dot === activeDot}
+        size={isDynamicDots ? fixedSize || size(dot) : size(dot)}
+        activeDotColor={activeDotColor}
+        passiveDotColor={passiveDotColor}
+      />
     ));
   };
 
@@ -133,13 +147,22 @@ const Dots = ({length, activeDot, animateAutoScroll = true}: IDotsProps) => {
     scrollTo(activeDot);
   }, [activeDot]);
 
+  const width = useMemo(() => {
+    return isDynamicDots
+      ? (fixedSize && (fixedSize + MARGIN_DOT) * 8) || WIDTH_MEDIUM
+      : WIDTH_MEDIUM;
+  }, [fixedSize, isDynamicDots]);
+
   if (isDynamicDots) {
     return (
       <View
-        style={{
-          alignItems: 'center',
-          flexDirection: 'row',
-        }}>
+        style={[
+          {
+            alignItems: 'center',
+            flexDirection: 'row',
+          },
+          dotsStyles,
+        ]}>
         {renderDot()}
       </View>
     );
@@ -149,8 +172,9 @@ const Dots = ({length, activeDot, animateAutoScroll = true}: IDotsProps) => {
     <Animated.View
       style={[
         {
-          width: WIDTH_MEDIUM,
+          width: width,
         },
+        dotsStyles,
       ]}
       onLayout={onLayout}
       accessibilityLabel={LABELS.dotsAnimatedView}>
diff --git a/packages/core/src/other/components/Dots/__tests__/Dots.test.tsx b/packages/core/src/other/components/Dots/__tests__/Dots.test.tsx
index b5111e40c..ca10255f0 100644
--- a/packages/core/src/other/components/Dots/__tests__/Dots.test.tsx
+++ b/packages/core/src/other/components/Dots/__tests__/Dots.test.tsx
@@ -17,6 +17,19 @@ describe('Dots', () => {
     const {toJSON} = render(<Dots length={16} activeDot={2} />);
     expect(toJSON()).toMatchSnapshot();
   });
+  test('render dots activeDot=2 fixedSize', () => {
+    const {toJSON} = render(
+      <Dots
+        length={5}
+        activeDot={2}
+        fixedSize={4}
+        passiveDotColor={'black'}
+        activeDotColor={'red'}
+        dotsStyles={{zIndex: 2}}
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
   test('render dots activeDot=10', () => {
     const {toJSON} = render(
       <Dots length={10} activeDot={9} animateAutoScroll={false} />,
diff --git a/packages/core/src/other/components/Dots/__tests__/__snapshots__/Dots.test.tsx.snap b/packages/core/src/other/components/Dots/__tests__/__snapshots__/Dots.test.tsx.snap
index 78a147acd..7fa375c65 100644
--- a/packages/core/src/other/components/Dots/__tests__/__snapshots__/Dots.test.tsx.snap
+++ b/packages/core/src/other/components/Dots/__tests__/__snapshots__/Dots.test.tsx.snap
@@ -3,10 +3,13 @@
 exports[`Dots render dots = 0 1`] = `
 <View
   style={
-    {
-      "alignItems": "center",
-      "flexDirection": "row",
-    }
+    [
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
   }
 />
 `;
@@ -39,12 +42,14 @@ exports[`Dots render dots activeDot left 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -52,12 +57,14 @@ exports[`Dots render dots activeDot left 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -65,12 +72,14 @@ exports[`Dots render dots activeDot left 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -78,12 +87,14 @@ exports[`Dots render dots activeDot left 1`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -91,12 +102,14 @@ exports[`Dots render dots activeDot left 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -104,12 +117,14 @@ exports[`Dots render dots activeDot left 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -117,12 +132,14 @@ exports[`Dots render dots activeDot left 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -130,12 +147,14 @@ exports[`Dots render dots activeDot left 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -143,12 +162,14 @@ exports[`Dots render dots activeDot left 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -156,12 +177,14 @@ exports[`Dots render dots activeDot left 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -198,12 +221,14 @@ exports[`Dots render dots activeDot left 2`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -211,12 +236,14 @@ exports[`Dots render dots activeDot left 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -224,12 +251,14 @@ exports[`Dots render dots activeDot left 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -237,12 +266,14 @@ exports[`Dots render dots activeDot left 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -250,12 +281,14 @@ exports[`Dots render dots activeDot left 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -263,12 +296,14 @@ exports[`Dots render dots activeDot left 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -276,12 +311,14 @@ exports[`Dots render dots activeDot left 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -289,12 +326,14 @@ exports[`Dots render dots activeDot left 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -302,12 +341,14 @@ exports[`Dots render dots activeDot left 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -315,12 +356,14 @@ exports[`Dots render dots activeDot left 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -357,12 +400,14 @@ exports[`Dots render dots activeDot left 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -370,12 +415,14 @@ exports[`Dots render dots activeDot left 3`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -383,12 +430,14 @@ exports[`Dots render dots activeDot left 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -396,12 +445,14 @@ exports[`Dots render dots activeDot left 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -409,12 +460,14 @@ exports[`Dots render dots activeDot left 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -422,12 +475,14 @@ exports[`Dots render dots activeDot left 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -435,12 +490,14 @@ exports[`Dots render dots activeDot left 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -448,12 +505,14 @@ exports[`Dots render dots activeDot left 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -461,12 +520,14 @@ exports[`Dots render dots activeDot left 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -474,12 +535,14 @@ exports[`Dots render dots activeDot left 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -516,12 +579,14 @@ exports[`Dots render dots activeDot left 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -529,12 +594,14 @@ exports[`Dots render dots activeDot left 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -542,12 +609,14 @@ exports[`Dots render dots activeDot left 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -555,12 +624,14 @@ exports[`Dots render dots activeDot left 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -568,12 +639,14 @@ exports[`Dots render dots activeDot left 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -581,12 +654,14 @@ exports[`Dots render dots activeDot left 4`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -594,12 +669,14 @@ exports[`Dots render dots activeDot left 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -607,12 +684,14 @@ exports[`Dots render dots activeDot left 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -620,12 +699,14 @@ exports[`Dots render dots activeDot left 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -633,12 +714,14 @@ exports[`Dots render dots activeDot left 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -675,12 +758,14 @@ exports[`Dots render dots activeDot right 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -688,12 +773,14 @@ exports[`Dots render dots activeDot right 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -701,12 +788,14 @@ exports[`Dots render dots activeDot right 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -714,12 +803,14 @@ exports[`Dots render dots activeDot right 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -727,12 +818,14 @@ exports[`Dots render dots activeDot right 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -740,12 +833,14 @@ exports[`Dots render dots activeDot right 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -753,12 +848,14 @@ exports[`Dots render dots activeDot right 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -766,12 +863,14 @@ exports[`Dots render dots activeDot right 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -779,12 +878,14 @@ exports[`Dots render dots activeDot right 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -792,12 +893,14 @@ exports[`Dots render dots activeDot right 1`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -834,12 +937,14 @@ exports[`Dots render dots activeDot right 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -847,12 +952,14 @@ exports[`Dots render dots activeDot right 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -860,12 +967,14 @@ exports[`Dots render dots activeDot right 2`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -873,12 +982,14 @@ exports[`Dots render dots activeDot right 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -886,12 +997,14 @@ exports[`Dots render dots activeDot right 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -899,12 +1012,14 @@ exports[`Dots render dots activeDot right 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -912,12 +1027,14 @@ exports[`Dots render dots activeDot right 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -925,12 +1042,14 @@ exports[`Dots render dots activeDot right 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -938,12 +1057,14 @@ exports[`Dots render dots activeDot right 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -951,12 +1072,14 @@ exports[`Dots render dots activeDot right 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -993,12 +1116,14 @@ exports[`Dots render dots activeDot right 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1006,12 +1131,14 @@ exports[`Dots render dots activeDot right 3`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -1019,12 +1146,14 @@ exports[`Dots render dots activeDot right 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1032,12 +1161,14 @@ exports[`Dots render dots activeDot right 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1045,12 +1176,14 @@ exports[`Dots render dots activeDot right 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1058,12 +1191,14 @@ exports[`Dots render dots activeDot right 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1071,12 +1206,14 @@ exports[`Dots render dots activeDot right 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1084,12 +1221,14 @@ exports[`Dots render dots activeDot right 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1097,12 +1236,14 @@ exports[`Dots render dots activeDot right 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1110,12 +1251,14 @@ exports[`Dots render dots activeDot right 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1152,12 +1295,14 @@ exports[`Dots render dots activeDot right 4`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -1165,12 +1310,14 @@ exports[`Dots render dots activeDot right 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1178,12 +1325,14 @@ exports[`Dots render dots activeDot right 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1191,12 +1340,14 @@ exports[`Dots render dots activeDot right 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1204,12 +1355,14 @@ exports[`Dots render dots activeDot right 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1217,12 +1370,14 @@ exports[`Dots render dots activeDot right 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1230,12 +1385,14 @@ exports[`Dots render dots activeDot right 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1243,12 +1400,14 @@ exports[`Dots render dots activeDot right 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1256,12 +1415,14 @@ exports[`Dots render dots activeDot right 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1269,12 +1430,14 @@ exports[`Dots render dots activeDot right 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1311,12 +1474,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1324,12 +1489,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1337,12 +1504,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -1350,12 +1519,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1363,12 +1534,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1376,12 +1549,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1389,12 +1564,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1402,12 +1579,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1415,12 +1594,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1428,12 +1609,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1441,12 +1624,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1454,12 +1639,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1467,12 +1654,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1480,12 +1669,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1493,12 +1684,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1506,12 +1699,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1520,6 +1715,98 @@ exports[`Dots render dots activeDot=2 1`] = `
 </View>
 `;
 
+exports[`Dots render dots activeDot=2 fixedSize 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      {
+        "zIndex": 2,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 2,
+          "height": 4,
+          "marginHorizontal": 7.5,
+          "width": 4,
+        },
+        {
+          "backgroundColor": "black",
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "borderRadius": 2,
+          "height": 4,
+          "marginHorizontal": 7.5,
+          "width": 4,
+        },
+        {
+          "backgroundColor": "black",
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "borderRadius": 2,
+          "height": 4,
+          "marginHorizontal": 7.5,
+          "width": 4,
+        },
+        {
+          "backgroundColor": "red",
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "borderRadius": 2,
+          "height": 4,
+          "marginHorizontal": 7.5,
+          "width": 4,
+        },
+        {
+          "backgroundColor": "black",
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "borderRadius": 2,
+          "height": 4,
+          "marginHorizontal": 7.5,
+          "width": 4,
+        },
+        {
+          "backgroundColor": "black",
+        },
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`Dots render dots activeDot=10 1`] = `
 <View
   accessibilityLabel="dotsAnimatedView"
@@ -1548,12 +1835,14 @@ exports[`Dots render dots activeDot=10 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1561,12 +1850,14 @@ exports[`Dots render dots activeDot=10 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1574,12 +1865,14 @@ exports[`Dots render dots activeDot=10 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1587,12 +1880,14 @@ exports[`Dots render dots activeDot=10 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1600,12 +1895,14 @@ exports[`Dots render dots activeDot=10 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1613,12 +1910,14 @@ exports[`Dots render dots activeDot=10 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1626,12 +1925,14 @@ exports[`Dots render dots activeDot=10 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1639,12 +1940,14 @@ exports[`Dots render dots activeDot=10 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1652,12 +1955,14 @@ exports[`Dots render dots activeDot=10 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1665,12 +1970,14 @@ exports[`Dots render dots activeDot=10 1`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -1707,12 +2014,14 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1720,12 +2029,14 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1733,12 +2044,14 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1746,12 +2059,14 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1759,12 +2074,14 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1772,12 +2089,14 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1785,12 +2104,14 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1798,12 +2119,14 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1811,12 +2134,14 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1824,12 +2149,14 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -1841,22 +2168,27 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
 exports[`Dots render dots length < 7 1`] = `
 <View
   style={
-    {
-      "alignItems": "center",
-      "flexDirection": "row",
-    }
+    [
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
   }
 >
   <View
     style={
       [
         {
-          "backgroundColor": "#5E6678",
           "borderRadius": 6,
           "height": 12,
           "marginHorizontal": 7.5,
           "width": 12,
         },
+        {
+          "backgroundColor": "#5E6678",
+        },
       ]
     }
   />
@@ -1864,12 +2196,14 @@ exports[`Dots render dots length < 7 1`] = `
     style={
       [
         {
-          "backgroundColor": "#B6BBC6",
           "borderRadius": 6,
           "height": 12,
           "marginHorizontal": 7.5,
           "width": 12,
         },
+        {
+          "backgroundColor": "#B6BBC6",
+        },
       ]
     }
   />
@@ -1877,12 +2211,14 @@ exports[`Dots render dots length < 7 1`] = `
     style={
       [
         {
-          "backgroundColor": "#B6BBC6",
           "borderRadius": 6,
           "height": 12,
           "marginHorizontal": 7.5,
           "width": 12,
         },
+        {
+          "backgroundColor": "#B6BBC6",
+        },
       ]
     }
   />
@@ -1890,12 +2226,14 @@ exports[`Dots render dots length < 7 1`] = `
     style={
       [
         {
-          "backgroundColor": "#B6BBC6",
           "borderRadius": 4.5,
           "height": 9,
           "marginHorizontal": 7.5,
           "width": 9,
         },
+        {
+          "backgroundColor": "#B6BBC6",
+        },
       ]
     }
   />
@@ -1903,12 +2241,14 @@ exports[`Dots render dots length < 7 1`] = `
     style={
       [
         {
-          "backgroundColor": "#B6BBC6",
           "borderRadius": 3,
           "height": 6,
           "marginHorizontal": 7.5,
           "width": 6,
         },
+        {
+          "backgroundColor": "#B6BBC6",
+        },
       ]
     }
   />
@@ -1916,12 +2256,14 @@ exports[`Dots render dots length < 7 1`] = `
     style={
       [
         {
-          "backgroundColor": "#B6BBC6",
           "borderRadius": 3,
           "height": 6,
           "marginHorizontal": 7.5,
           "width": 6,
         },
+        {
+          "backgroundColor": "#B6BBC6",
+        },
       ]
     }
   />
@@ -1956,12 +2298,14 @@ exports[`Dots render dots length > 7 1`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -1969,12 +2313,14 @@ exports[`Dots render dots length > 7 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1982,12 +2328,14 @@ exports[`Dots render dots length > 7 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1995,12 +2343,14 @@ exports[`Dots render dots length > 7 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2008,12 +2358,14 @@ exports[`Dots render dots length > 7 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2021,12 +2373,14 @@ exports[`Dots render dots length > 7 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2034,12 +2388,14 @@ exports[`Dots render dots length > 7 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2047,12 +2403,14 @@ exports[`Dots render dots length > 7 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2060,12 +2418,14 @@ exports[`Dots render dots length > 7 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2073,12 +2433,14 @@ exports[`Dots render dots length > 7 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2115,12 +2477,14 @@ exports[`Dots render dots onLayout 1`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -2128,12 +2492,14 @@ exports[`Dots render dots onLayout 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2141,12 +2507,14 @@ exports[`Dots render dots onLayout 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2154,12 +2522,14 @@ exports[`Dots render dots onLayout 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2167,12 +2537,14 @@ exports[`Dots render dots onLayout 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2180,12 +2552,14 @@ exports[`Dots render dots onLayout 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2193,12 +2567,14 @@ exports[`Dots render dots onLayout 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2206,12 +2582,14 @@ exports[`Dots render dots onLayout 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2219,12 +2597,14 @@ exports[`Dots render dots onLayout 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2232,12 +2612,14 @@ exports[`Dots render dots onLayout 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
diff --git a/packages/core/src/other/components/Dots/__tests__/stylesCreate.test.ts b/packages/core/src/other/components/Dots/__tests__/stylesCreate.test.ts
index 522765abb..f90c3e810 100644
--- a/packages/core/src/other/components/Dots/__tests__/stylesCreate.test.ts
+++ b/packages/core/src/other/components/Dots/__tests__/stylesCreate.test.ts
@@ -14,7 +14,6 @@ describe('dots/stylesCreate', () => {
         height: rem(8),
         marginHorizontal: rem(5),
         borderRadius: rem(8) / 2,
-        backgroundColor: '#B6BBC6',
       },
       dots: {
         flexDirection: 'row',
diff --git a/packages/core/src/other/components/Dots/stylesCreate.ts b/packages/core/src/other/components/Dots/stylesCreate.ts
index 02fe1a4b4..776191c5d 100644
--- a/packages/core/src/other/components/Dots/stylesCreate.ts
+++ b/packages/core/src/other/components/Dots/stylesCreate.ts
@@ -3,18 +3,13 @@ import {StyleSheet} from 'react-native';
 import {IThemeContext} from '../../../styles';
 import rem from '../../../styles/spaces/rem';
 
-const stylesCreate = (
-  {colors, spaces}: IThemeContext,
-  size = spaces.Space8,
-  active = false,
-) => {
+const stylesCreate = ({spaces}: IThemeContext, size = spaces.Space8) => {
   return StyleSheet.create({
     dot: {
       width: size,
       height: size,
       marginHorizontal: rem(5),
       borderRadius: size / 2,
-      backgroundColor: active ? colors.ElementNeutral : colors.ElementMuted,
     },
     dots: {
       flexDirection: 'row',
diff --git a/packages/core/src/other/components/Dots/types.ts b/packages/core/src/other/components/Dots/types.ts
index c538b58fa..960d7b678 100644
--- a/packages/core/src/other/components/Dots/types.ts
+++ b/packages/core/src/other/components/Dots/types.ts
@@ -1,6 +1,12 @@
+import {ViewStyle} from 'react-native';
+
 export interface IDotsProps {
   length: number;
   activeDot: number;
   maxDots?: number;
   animateAutoScroll?: boolean;
+  fixedSize?: number | undefined;
+  activeDotColor?: string | undefined;
+  passiveDotColor?: string | undefined;
+  dotsStyles?: ViewStyle | ViewStyle[] | undefined;
 }