diff --git a/example/package-lock.json b/example/package-lock.json
index 0ade50d..1421441 100644
--- a/example/package-lock.json
+++ b/example/package-lock.json
@@ -11,7 +11,7 @@
         "@rose-hulman/react-native-dropdown-selector": "file:..",
         "react": "19.0.0",
         "react-native": "0.79.3",
-        "react-native-svg": "15.12.0"
+        "react-native-svg": "^15.12.0"
       },
       "devDependencies": {
         "@babel/core": "^7.25.2",
@@ -9239,6 +9239,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "license": "CC0-1.0"
+    },
     "node_modules/memoize-one": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
diff --git a/package-lock.json b/package-lock.json
index 1bc01f6..00017fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.2.1",
       "license": "MIT",
       "dependencies": {
-        "react-native-svg": "15.12.0"
+        "react-native-svg": "^15.12.0"
       },
       "devDependencies": {
         "@types/react": "^18.2.9",
diff --git a/src/components/MultiSelect.tsx b/src/components/MultiSelect.tsx
index 712b573..777179c 100644
--- a/src/components/MultiSelect.tsx
+++ b/src/components/MultiSelect.tsx
@@ -4,6 +4,7 @@ import { useThemeStyles } from '../styles';
 import type { Data, SelectorRect, MultiSelectProperties } from '../types';
 import SelectionList from './SelectionList';
 import Svg, { Path } from 'react-native-svg';
+import { createMeasureHandler, updatePriorities, renderDropdownArrow } from '../utils/SelectorUtils';
 
 /* Renders a multi-selector component. Takes in props defined in the MultiSelectProperties type. */
 const MultiSelect = (props: MultiSelectProperties): React.JSX.Element => {
@@ -25,21 +26,7 @@ const MultiSelect = (props: MultiSelectProperties): React.JSX.Element => {
     props.data.filter((d: Data) =>
     props.defaultValue?.includes(d))
   );
-  const updatePriorities = (data: Data[]) => [
-    ...data.filter((d: Data) => d.priority),
-    ...data.filter((d: Data) => !d.priority),
-  ];
-  const updatePos = (display = false) =>
-    ref.current?.measureInWindow((x, y, width, height) => {
-      setRefRect({
-        x: x,
-        y: y - refRectYOffset,
-        width: props.boxStyle?.width ?? width,
-        height: height + 2*refRectYOffset,
-      });
-      if (display)
-        setListDisplay(true);
-    });
+  const updatePos = createMeasureHandler(ref, setRefRect, setListDisplay, props.boxStyle?.width);
 
   return (
     <View>
@@ -81,17 +68,10 @@ const MultiSelect = (props: MultiSelectProperties): React.JSX.Element => {
               {props.placeholderText ?? defaultPlaceholderText}
             </Text>
         }
-        <View style={{ position: 'absolute', right: 0, paddingBottom: 4 }}>
-          {listDisplay ? (
-            // This is the up arrow "ᨈ"
-            <Svg width={25} height={25} viewBox="0 0 25 25" fill="none">
-              <Path d="M17 14l-5-5-5 5" stroke={props.dropdownArrowColor ?? style.arrow.color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
-            </Svg>) : (
-            // This is the down arrow "ᨆ"
-            <Svg width={25} height={25} viewBox="0 0 25 25" fill="none">
-              <Path d="M7 10l5 5 5-5" stroke={props.dropdownArrowColor ?? style.arrow.color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
-            </Svg>)}
-        </View>
+        {renderDropdownArrow(
+          listDisplay,
+          props.dropdownArrowColor ?? style.arrow?.color ?? '#000'
+        )}
       </TouchableOpacity>
       <SelectionList
         styles={{
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 94c0549..6f315fd 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -4,6 +4,7 @@ import { useThemeStyles } from '../styles';
 import type { Data, SelectorRect, SelectProperties } from '../types';
 import SelectionList from './SelectionList';
 import Svg, {Path} from 'react-native-svg';
+import { createMeasureHandler, updatePriorities, renderDropdownArrow } from '../utils/SelectorUtils';
 
 /* Renders a selector component. Takes in props defined in the SelectProperties type. */
 const Select = (props: SelectProperties): React.JSX.Element => {
@@ -26,20 +27,7 @@ const Select = (props: SelectProperties): React.JSX.Element => {
       ? props.defaultValue
       : {label: props.placeholderText ?? defaultPlaceholderText}
   );
-  const updatePriorities = (data: Data[]) => [
-    ...data.filter((d: Data) => d.priority),
-    ...data.filter((d: Data) => !d.priority),
-  ];
-  const updatePos = () =>
-    ref.current?.measureInWindow((x, y, width, height) => {
-      setRefRect({
-        x: x,
-        y: y - refRectYOffset,
-        width: props.boxStyle?.width ?? width,
-        height: height + 2*refRectYOffset,
-      });
-      setListDisplay(true);
-    });
+  const updatePos = createMeasureHandler(ref, setRefRect, setListDisplay, props.boxStyle?.width);
 
   return (
     <View>
@@ -51,7 +39,7 @@ const Select = (props: SelectProperties): React.JSX.Element => {
           {opacity: props.disabled ? disabledOpacity : enabledOpacity},
         ]}
         disabled={props.disabled}
-        onPress={updatePos}
+        onPress={() => updatePos(true)}
         ref={ref}
       >
         <Text
@@ -59,17 +47,10 @@ const Select = (props: SelectProperties): React.JSX.Element => {
         >
           {selected.label}
         </Text>
-        <View style={{ position: 'absolute', right: 0, paddingBottom: 4 }}>
-          {listDisplay ? (
-            // This is the up arrow "ᨈ"
-            <Svg width={25} height={25} viewBox="0 0 25 25" fill="none">
-              <Path d="M17 14l-5-5-5 5" stroke={props.dropdownArrowColor ?? style.arrow.color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
-            </Svg>) : (
-            // This is the down arrow "ᨆ"
-            <Svg width={25} height={25} viewBox="0 0 25 25" fill="none">
-              <Path d="M7 10l5 5 5-5" stroke={props.dropdownArrowColor ?? style.arrow.color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
-            </Svg>)}
-        </View>
+        {renderDropdownArrow(
+          listDisplay,
+          props.dropdownArrowColor ?? style.arrow?.color ?? '#000'
+        )}
       </TouchableOpacity>
       <SelectionList
         styles={{
diff --git a/src/utils/SelectorUtils.tsx b/src/utils/SelectorUtils.tsx
new file mode 100644
index 0000000..22dab8a
--- /dev/null
+++ b/src/utils/SelectorUtils.tsx
@@ -0,0 +1,61 @@
+/* this file has all the common selector utils for Select and MultiSelect */
+import React from 'react';
+import { ColorValue, View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import type { Data, SelectorRect } from '../types';
+
+export const createMeasureHandler = (
+    ref: React.RefObject<any>,
+    setRefRect: React.Dispatch<React.SetStateAction<SelectorRect>>,
+    setListDisplay: React.Dispatch<React.SetStateAction<boolean>>,
+    boxStyleWidth?: number | string,
+    refRectYOffset: number = 5,
+) => {
+    return (display = false) => {
+        ref.current?.measureInWindow((x: number, y: number, width: number, height: number) => {
+            setRefRect({
+                x: x,
+                y: y - refRectYOffset,
+                width: boxStyleWidth ?? width,
+                height: height + refRectYOffset * 2,
+            });
+
+            if (display && setListDisplay) {
+                setListDisplay(true);
+            }
+        });
+    }       
+}
+
+export const updatePriorities = (data: Data[]) => [
+    ...data.filter((d: Data) => d.priority),
+    ...data.filter((d: Data) => !d.priority),
+];
+
+export const renderDropdownArrow = (listDisplay: boolean, arrowColor: ColorValue) => (
+    <View style={{ position: 'absolute', right: 0, paddingBottom: 4 }}>
+        {listDisplay ? (
+            // This is the up arrow "ᨈ"
+            <Svg width={25} height={25} viewBox="0 0 25 25" fill="none">
+                <Path 
+                    d="M17 14l-5-5-5 5" 
+                    stroke={arrowColor} 
+                    strokeWidth={2} 
+                    strokeLinecap="round" 
+                    strokeLinejoin="round" 
+                />
+            </Svg>) : (
+            // This is the up arrow "ᨆ"
+            <Svg width={25} height={25} viewBox="0 0 25 25" fill="none">
+                <Path 
+                    d="M7 10l5 5 5-5" 
+                    stroke={arrowColor} 
+                    strokeWidth={2} 
+                    strokeLinecap="round" 
+                    strokeLinejoin="round" 
+                />
+                
+            </Svg>
+        )}
+    </View>
+)
\ No newline at end of file