Adding Dashed Separator Stroke

README.md

@@ -34,6 +34,7 @@ import StepIndicator from 'react-native-step-indicator';
 const labels = ["Cart","Delivery Address","Order Summary","Payment Method","Track"];
 const customStyles = {
   stepIndicatorSize: 25,
+  separatorStrokeStyle: 'solid',
   currentStepIndicatorSize:30,
   separatorStrokeWidth: 2,
   currentStepStrokeWidth: 3,
@@ -98,6 +99,7 @@ onPageChange(position){
 | ------------ | ------------ |------------ |
 | ```stepIndicatorSize``` | Number  | 30
 | ```currentStepIndicatorSize``` | Number  | 40
+| ```separatorStrokeStyle``` | String  | 'solid'
 | ```separatorStrokeWidth``` | Number  | 3
 | ```separatorStrokeUnfinishedWidth``` | Number  | 0
 | ```separatorStrokeFinishedWidth``` | Number  | 0

example/metro.config.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const blacklist = require('metro-config/src/defaults/blacklist');
+const blacklist = require('metro-config/src/defaults/exclusionList');
 const escape = require('escape-string-regexp');
 const pak = require('../package.json');
 
@@ -11,7 +11,7 @@ const modules = Object.keys({
 
 module.exports = {
   projectRoot: __dirname,
-  watchFolders: [root],
+  watchFolders: [path.resolve(__dirname, 'node_modules'), root],
 
   // We need to make sure that only one version is loaded for peerDependencies
   // So we blacklist them at the root, and alias them to the versions in example's node_modules

example/package.json

@@ -12,19 +12,19 @@
     "test": "jest"
   },
   "dependencies": {
-    "expo": "~37.0.3",
-    "react": "~16.9.0",
-    "react-dom": "~16.9.0",
-    "react-native": "~0.61.5",
+    "expo": "^47.0.13",
+    "react": "~18.1.0",
+    "react-dom": "~18.1.0",
+    "react-native": "0.70.5",
     "react-native-swiper": "^1.6.0",
     "react-native-unimodules": "~0.9.0",
-    "react-native-web": "~0.11.7"
+    "react-native-web": "~0.18.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/runtime": "^7.9.6",
-    "babel-plugin-module-resolver": "^4.0.0",
-    "babel-preset-expo": "~8.1.0",
-    "expo-cli": "^3.17.18"
+    "@babel/core": "^7.20.12",
+    "@babel/runtime": "^7.20.13",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "babel-preset-expo": "~9.2.2",
+    "expo-cli": "^6.3.1"
   }
 }

example/src/HorizontalStepIndicator.tsx

@@ -1,15 +1,16 @@
-/* eslint-disable react-native/no-inline-styles */
 import * as React from 'react';
 import { StyleSheet, View, Text } from 'react-native';
 import StepIndicator from 'react-native-step-indicator';
+import { StepIndicatorStyles } from 'react-native-step-indicator/types';
 import Swiper from 'react-native-swiper';
 import { MaterialIcons } from '@expo/vector-icons';
 
 const PAGES = ['Page 1', 'Page 2', 'Page 3', 'Page 4', 'Page 5'];
 
-const firstIndicatorStyles = {
+const firstIndicatorStyles: StepIndicatorStyles = {
   stepIndicatorSize: 30,
   currentStepIndicatorSize: 40,
+  separatorStrokeStyle: 'solid',
   separatorStrokeWidth: 3,
   currentStepStrokeWidth: 5,
   separatorFinishedColor: '#4aae4f',
@@ -27,9 +28,10 @@ const firstIndicatorStyles = {
   currentStepLabelColor: '#4aae4f',
 };
 
-const secondIndicatorStyles = {
+const secondIndicatorStyles: StepIndicatorStyles = {
   stepIndicatorSize: 30,
   currentStepIndicatorSize: 40,
+  separatorStrokeStyle: 'dashed',
   separatorStrokeWidth: 2,
   currentStepStrokeWidth: 3,
   stepStrokeCurrentColor: '#fe7013',
@@ -52,11 +54,12 @@ const secondIndicatorStyles = {
   currentStepLabelColor: '#fe7013',
 };
 
-const thirdIndicatorStyles = {
+const thirdIndicatorStyles: StepIndicatorStyles = {
   stepIndicatorSize: 25,
   currentStepIndicatorSize: 30,
-  separatorStrokeWidth: 2,
-  currentStepStrokeWidth: 3,
+  separatorStrokeStyle: 'solid',
+  separatorStrokeWidth: 1,
+  currentStepStrokeWidth: 2,
   stepStrokeCurrentColor: '#7eaec4',
   stepStrokeWidth: 3,
   stepStrokeFinishedColor: '#7eaec4',
@@ -76,15 +79,44 @@ const thirdIndicatorStyles = {
   currentStepLabelColor: '#7eaec4',
 };
 
+const forthIndicatorStyles: StepIndicatorStyles = {
+  stepIndicatorSize: 25,
+  currentStepIndicatorSize: 30,
+  separatorStrokeStyle: 'dashed',
+  separatorStrokeWidth: 4,
+  currentStepStrokeWidth: 2,
+  stepStrokeCurrentColor: '#7600bc',
+  stepStrokeWidth: 3,
+  stepStrokeFinishedColor: '#7600bc',
+  stepStrokeUnFinishedColor: '#dedede',
+  separatorFinishedColor: '#7600bc',
+  separatorUnFinishedColor: '#dedede',
+  stepIndicatorFinishedColor: '#7600bc',
+  stepIndicatorUnFinishedColor: '#ffffff',
+  stepIndicatorCurrentColor: '#ffffff',
+  stepIndicatorLabelFontSize: 0,
+  currentStepIndicatorLabelFontSize: 0,
+  stepIndicatorLabelCurrentColor: 'transparent',
+  stepIndicatorLabelFinishedColor: 'transparent',
+  stepIndicatorLabelUnFinishedColor: 'transparent',
+  labelColor: '#999999',
+  labelSize: 13,
+  currentStepLabelColor: '#7600bc',
+};
+
 const getStepIndicatorIconConfig = ({
   position,
   stepStatus,
 }: {
   position: number;
   stepStatus: string;
 }) => {
-  const iconConfig = {
-    name: 'feed',
+  const iconConfig: {
+    name: keyof typeof MaterialIcons.glyphMap;
+    color: string;
+    size: number;
+  } = {
+    name: 'rss-feed',
     color: stepStatus === 'finished' ? '#ffffff' : '#fe7013',
     size: 15,
   };
@@ -193,8 +225,17 @@ export default function App() {
           labels={['Approval', 'Processing', 'Shipping', 'Delivery']}
         />
       </View>
+      <View style={styles.stepIndicator}>
+        <StepIndicator
+          stepCount={5}
+          customStyles={forthIndicatorStyles}
+          currentPosition={currentPage}
+          onPress={onStepPress}
+          labels={['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5']}
+        />
+      </View>
       <Swiper
-        style={{ flexGrow: 1 }}
+        style={styles.swiperContainer}
         loop={false}
         index={currentPage}
         autoplay={false}
@@ -214,6 +255,9 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#ffffff',
   },
+  swiperContainer: {
+    flexGrow: 1,
+  },
   stepIndicator: {
     marginVertical: 50,
   },

example/src/VerticalStepIndicator.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
-import { StyleSheet, View, Text, FlatList } from 'react-native';
+import { StyleSheet, View, Text, FlatList, ViewToken } from 'react-native';
 import StepIndicator from 'react-native-step-indicator';
+import { StepIndicatorStyles } from 'react-native-step-indicator/types';
 import dummyData from './data';
 
-const stepIndicatorStyles = {
+const stepIndicatorStyles: StepIndicatorStyles = {
   stepIndicatorSize: 30,
   currentStepIndicatorSize: 40,
+  separatorStrokeStyle: 'dashed',
   separatorStrokeWidth: 3,
   currentStepStrokeWidth: 5,
   stepStrokeCurrentColor: '#fe7013',
@@ -26,8 +28,9 @@ const stepIndicatorStyles = {
 
 export default function VerticalStepIndicator() {
   const [currentPage, setCurrentPage] = React.useState<number>(0);
-  const viewabilityConfig = React.useRef({ itemVisiblePercentThreshold: 40 })
-    .current;
+  const viewabilityConfig = React.useRef({
+    itemVisiblePercentThreshold: 40,
+  }).current;
 
   const renderPage = (rowData: any) => {
     const item = rowData.item;
@@ -39,12 +42,19 @@ export default function VerticalStepIndicator() {
     );
   };
 
-  const onViewableItemsChanged = React.useCallback(({ viewableItems }) => {
-    const visibleItemsCount = viewableItems.length;
-    if (visibleItemsCount !== 0) {
-      setCurrentPage(viewableItems[visibleItemsCount - 1].index);
-    }
-  }, []);
+  const onViewableItemsChanged = React.useCallback(
+    ({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
+      const visibleItemsCount = viewableItems.length;
+      if (visibleItemsCount !== 0) {
+        setCurrentPage(viewableItems[visibleItemsCount - 1].index ?? 0);
+      }
+    },
+    []
+  );
+
+  const viewabilityConfigCallbackPairs = React.useRef([
+    { viewabilityConfig, onViewableItemsChanged },
+  ]);
 
   return (
     <View style={styles.container}>
@@ -58,10 +68,10 @@ export default function VerticalStepIndicator() {
         />
       </View>
       <FlatList
-        style={{ flexGrow: 1 }}
+        style={styles.flatListContainer}
         data={dummyData.data}
         renderItem={renderPage}
-        onViewableItemsChanged={onViewableItemsChanged}
+        viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
         viewabilityConfig={viewabilityConfig}
       />
     </View>
@@ -74,6 +84,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     backgroundColor: '#ffffff',
   },
+  flatListContainer: {
+    flexGrow: 1,
+  },
   stepIndicator: {
     marginVertical: 50,
     paddingHorizontal: 20,

example/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "paths": {
+      "react-native-step-indicator": ["../src/index"],
+      "react-native-step-indicator/types": ["../src/types"],
+    }
+  },
+}