diff --git a/example-web/package-lock.json b/example-web/package-lock.json
index eee39e64..4a6b9eef 100644
--- a/example-web/package-lock.json
+++ b/example-web/package-lock.json
@@ -17,7 +17,7 @@
         "@types/react-dom": "^18.0.9",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-native-web": "^0.18.10",
+        "react-native-web": "^0.19.12",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.4",
         "web-vitals": "^2.1.4"
@@ -3097,6 +3097,12 @@
         }
       }
     },
+    "node_modules/@react-native/normalize-colors": {
+      "version": "0.74.87",
+      "resolved": "https://registry.npmjs.org/@react-native/normalize-colors/-/normalize-colors-0.74.87.tgz",
+      "integrity": "sha512-Xh7Nyk/MPefkb0Itl5Z+3oOobeG9lfLb7ZOY2DKpFnoCE1TzBmib9vMNdFaLdSxLIP+Ec6icgKtdzYg8QUPYzA==",
+      "license": "MIT"
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -5601,15 +5607,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/create-react-class": {
-      "version": "15.7.0",
-      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz",
-      "integrity": "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==",
-      "dependencies": {
-        "loose-envify": "^1.3.1",
-        "object-assign": "^4.1.1"
-      }
-    },
     "node_modules/cross-fetch": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz",
@@ -10318,6 +10315,12 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+      "license": "MIT"
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -10617,11 +10620,6 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
       "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ=="
     },
-    "node_modules/normalize-css-color": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/normalize-css-color/-/normalize-css-color-1.0.2.tgz",
-      "integrity": "sha512-jPJ/V7Cp1UytdidsPqviKEElFQJs22hUUgK5BOPHTwOonNCk7/2qOxhhqzEajmFrWJowADFfOFh1V+aWkRfy+w=="
-    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -10671,6 +10669,12 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/nullthrows": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
+      "integrity": "sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==",
+      "license": "MIT"
+    },
     "node_modules/nwsapi": {
       "version": "2.2.7",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
@@ -12713,21 +12717,23 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
     "node_modules/react-native-web": {
-      "version": "0.18.12",
-      "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.18.12.tgz",
-      "integrity": "sha512-fboP7yqobJ8InSr4fP+bQ3scOtSQtUoPcR+HWasH8b/fk/RO+mWcJs/8n+lewy9WTZc2D68ha7VwRDviUshEWA==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.12.tgz",
+      "integrity": "sha512-o2T0oztoVDQjztt4YksO9S1XRjoH/AqcSvifgWLrPJgGVbMWsfhILgl6lfUdEamVZzZSVV/2gqDVMAk/qq7mZw==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.18.6",
-        "create-react-class": "^15.7.0",
+        "@react-native/normalize-colors": "^0.74.1",
         "fbjs": "^3.0.4",
         "inline-style-prefixer": "^6.0.1",
-        "normalize-css-color": "^1.0.2",
+        "memoize-one": "^6.0.0",
+        "nullthrows": "^1.1.1",
         "postcss-value-parser": "^4.2.0",
-        "styleq": "^0.1.2"
+        "styleq": "^0.1.3"
       },
       "peerDependencies": {
-        "react": "^17.0.2 || ^18.0.0",
-        "react-dom": "^17.0.2 || ^18.0.0"
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
       }
     },
     "node_modules/react-refresh": {
diff --git a/example-web/package.json b/example-web/package.json
index 31198794..88f05e9e 100644
--- a/example-web/package.json
+++ b/example-web/package.json
@@ -12,7 +12,7 @@
     "@types/react-dom": "^18.0.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-native-web": "^0.18.10",
+    "react-native-web": "^0.19.12",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.4",
     "web-vitals": "^2.1.4"
diff --git a/package/src/Slider.tsx b/package/src/Slider.tsx
index d77f28b2..015b1561 100644
--- a/package/src/Slider.tsx
+++ b/package/src/Slider.tsx
@@ -2,7 +2,6 @@ import React, {useState} from 'react';
 import {
   Image,
   Platform,
-  StyleSheet,
   AccessibilityActionEvent,
   ViewProps,
   ViewStyle,
@@ -230,7 +229,7 @@ const SliderComponent = (
   const defaultStyle =
     Platform.OS === 'ios' ? styles.defaultSlideriOS : styles.defaultSlider;
   const sliderStyle = {zIndex: 1, width: width};
-  const style = StyleSheet.compose(props.style, defaultStyle);
+  const style = [props.style, defaultStyle];
 
   const onValueChangeEvent = (event: Event) => {
     onValueChange && onValueChange(event.nativeEvent.value);
@@ -287,7 +286,7 @@ const SliderComponent = (
       onLayout={(event) => {
         setWidth(event.nativeEvent.layout.width);
       }}
-      style={[styles, style, {justifyContent: 'center'}]}>
+      style={[style, {justifyContent: 'center'}]}>
       {props.StepMarker || !!props.renderStepNumber ? (
         <StepsIndicator
           options={options}
diff --git a/package/src/__tests__/__snapshots__/Slider.test.tsx.snap b/package/src/__tests__/__snapshots__/Slider.test.tsx.snap
index 622a70b1..658f56dd 100644
--- a/package/src/__tests__/__snapshots__/Slider.test.tsx.snap
+++ b/package/src/__tests__/__snapshots__/Slider.test.tsx.snap
@@ -5,65 +5,12 @@ exports[`<Slider /> accessibilityState disabled sets disabled={true} 1`] = `
   onLayout={[Function]}
   style={
     [
-      {
-        "defaultIndicatorIdle": {
-          "backgroundColor": "#C0C0C0",
-          "height": 10,
-          "width": 2,
-        },
-        "defaultIndicatorMarked": {
-          "backgroundColor": "#CCCCCC",
-          "height": 20,
-          "width": 5,
-        },
-        "defaultSlider": {},
-        "defaultSlideriOS": {
+      [
+        undefined,
+        {
           "height": 40,
         },
-        "sliderMainContainer": {
-          "width": "100%",
-          "zIndex": 1,
-        },
-        "stepIndicatorElement": {
-          "alignContent": "center",
-          "alignItems": "center",
-        },
-        "stepNumber": {
-          "alignItems": "center",
-          "marginTop": 20,
-          "position": "absolute",
-        },
-        "stepsIndicator": {
-          "flex": 1,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-          "top": 10,
-          "zIndex": 2,
-        },
-        "thumbImage": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "position": "absolute",
-        },
-        "thumbImageContainer": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "justifyContent": "center",
-          "position": "absolute",
-          "zIndex": 3,
-        },
-        "trackMarkContainer": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "alignSelf": "center",
-          "justifyContent": "center",
-          "position": "absolute",
-          "zIndex": 3,
-        },
-      },
-      {
-        "height": 40,
-      },
+      ],
       {
         "justifyContent": "center",
       },
@@ -116,65 +63,12 @@ exports[`<Slider /> disabled prop overrides accessibilityState.disabled 1`] = `
   onLayout={[Function]}
   style={
     [
-      {
-        "defaultIndicatorIdle": {
-          "backgroundColor": "#C0C0C0",
-          "height": 10,
-          "width": 2,
-        },
-        "defaultIndicatorMarked": {
-          "backgroundColor": "#CCCCCC",
-          "height": 20,
-          "width": 5,
-        },
-        "defaultSlider": {},
-        "defaultSlideriOS": {
+      [
+        undefined,
+        {
           "height": 40,
         },
-        "sliderMainContainer": {
-          "width": "100%",
-          "zIndex": 1,
-        },
-        "stepIndicatorElement": {
-          "alignContent": "center",
-          "alignItems": "center",
-        },
-        "stepNumber": {
-          "alignItems": "center",
-          "marginTop": 20,
-          "position": "absolute",
-        },
-        "stepsIndicator": {
-          "flex": 1,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-          "top": 10,
-          "zIndex": 2,
-        },
-        "thumbImage": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "position": "absolute",
-        },
-        "thumbImageContainer": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "justifyContent": "center",
-          "position": "absolute",
-          "zIndex": 3,
-        },
-        "trackMarkContainer": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "alignSelf": "center",
-          "justifyContent": "center",
-          "position": "absolute",
-          "zIndex": 3,
-        },
-      },
-      {
-        "height": 40,
-      },
+      ],
       {
         "justifyContent": "center",
       },
@@ -227,65 +121,12 @@ exports[`<Slider /> disabled prop overrides accessibilityState.enabled 1`] = `
   onLayout={[Function]}
   style={
     [
-      {
-        "defaultIndicatorIdle": {
-          "backgroundColor": "#C0C0C0",
-          "height": 10,
-          "width": 2,
-        },
-        "defaultIndicatorMarked": {
-          "backgroundColor": "#CCCCCC",
-          "height": 20,
-          "width": 5,
-        },
-        "defaultSlider": {},
-        "defaultSlideriOS": {
+      [
+        undefined,
+        {
           "height": 40,
         },
-        "sliderMainContainer": {
-          "width": "100%",
-          "zIndex": 1,
-        },
-        "stepIndicatorElement": {
-          "alignContent": "center",
-          "alignItems": "center",
-        },
-        "stepNumber": {
-          "alignItems": "center",
-          "marginTop": 20,
-          "position": "absolute",
-        },
-        "stepsIndicator": {
-          "flex": 1,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-          "top": 10,
-          "zIndex": 2,
-        },
-        "thumbImage": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "position": "absolute",
-        },
-        "thumbImageContainer": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "justifyContent": "center",
-          "position": "absolute",
-          "zIndex": 3,
-        },
-        "trackMarkContainer": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "alignSelf": "center",
-          "justifyContent": "center",
-          "position": "absolute",
-          "zIndex": 3,
-        },
-      },
-      {
-        "height": 40,
-      },
+      ],
       {
         "justifyContent": "center",
       },
@@ -338,65 +179,12 @@ exports[`<Slider /> renders a slider with custom props 1`] = `
   onLayout={[Function]}
   style={
     [
-      {
-        "defaultIndicatorIdle": {
-          "backgroundColor": "#C0C0C0",
-          "height": 10,
-          "width": 2,
-        },
-        "defaultIndicatorMarked": {
-          "backgroundColor": "#CCCCCC",
-          "height": 20,
-          "width": 5,
-        },
-        "defaultSlider": {},
-        "defaultSlideriOS": {
+      [
+        undefined,
+        {
           "height": 40,
         },
-        "sliderMainContainer": {
-          "width": "100%",
-          "zIndex": 1,
-        },
-        "stepIndicatorElement": {
-          "alignContent": "center",
-          "alignItems": "center",
-        },
-        "stepNumber": {
-          "alignItems": "center",
-          "marginTop": 20,
-          "position": "absolute",
-        },
-        "stepsIndicator": {
-          "flex": 1,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-          "top": 10,
-          "zIndex": 2,
-        },
-        "thumbImage": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "position": "absolute",
-        },
-        "thumbImageContainer": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "justifyContent": "center",
-          "position": "absolute",
-          "zIndex": 3,
-        },
-        "trackMarkContainer": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "alignSelf": "center",
-          "justifyContent": "center",
-          "position": "absolute",
-          "zIndex": 3,
-        },
-      },
-      {
-        "height": 40,
-      },
+      ],
       {
         "justifyContent": "center",
       },
@@ -448,65 +236,12 @@ exports[`<Slider /> renders a slider with custom stepMaker 1`] = `
   onLayout={[Function]}
   style={
     [
-      {
-        "defaultIndicatorIdle": {
-          "backgroundColor": "#C0C0C0",
-          "height": 10,
-          "width": 2,
-        },
-        "defaultIndicatorMarked": {
-          "backgroundColor": "#CCCCCC",
-          "height": 20,
-          "width": 5,
-        },
-        "defaultSlider": {},
-        "defaultSlideriOS": {
+      [
+        undefined,
+        {
           "height": 40,
         },
-        "sliderMainContainer": {
-          "width": "100%",
-          "zIndex": 1,
-        },
-        "stepIndicatorElement": {
-          "alignContent": "center",
-          "alignItems": "center",
-        },
-        "stepNumber": {
-          "alignItems": "center",
-          "marginTop": 20,
-          "position": "absolute",
-        },
-        "stepsIndicator": {
-          "flex": 1,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-          "top": 10,
-          "zIndex": 2,
-        },
-        "thumbImage": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "position": "absolute",
-        },
-        "thumbImageContainer": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "justifyContent": "center",
-          "position": "absolute",
-          "zIndex": 3,
-        },
-        "trackMarkContainer": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "alignSelf": "center",
-          "justifyContent": "center",
-          "position": "absolute",
-          "zIndex": 3,
-        },
-      },
-      {
-        "height": 40,
-      },
+      ],
       {
         "justifyContent": "center",
       },
@@ -605,65 +340,12 @@ exports[`<Slider /> renders disabled slider 1`] = `
   onLayout={[Function]}
   style={
     [
-      {
-        "defaultIndicatorIdle": {
-          "backgroundColor": "#C0C0C0",
-          "height": 10,
-          "width": 2,
-        },
-        "defaultIndicatorMarked": {
-          "backgroundColor": "#CCCCCC",
-          "height": 20,
-          "width": 5,
-        },
-        "defaultSlider": {},
-        "defaultSlideriOS": {
+      [
+        undefined,
+        {
           "height": 40,
         },
-        "sliderMainContainer": {
-          "width": "100%",
-          "zIndex": 1,
-        },
-        "stepIndicatorElement": {
-          "alignContent": "center",
-          "alignItems": "center",
-        },
-        "stepNumber": {
-          "alignItems": "center",
-          "marginTop": 20,
-          "position": "absolute",
-        },
-        "stepsIndicator": {
-          "flex": 1,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-          "top": 10,
-          "zIndex": 2,
-        },
-        "thumbImage": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "position": "absolute",
-        },
-        "thumbImageContainer": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "justifyContent": "center",
-          "position": "absolute",
-          "zIndex": 3,
-        },
-        "trackMarkContainer": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "alignSelf": "center",
-          "justifyContent": "center",
-          "position": "absolute",
-          "zIndex": 3,
-        },
-      },
-      {
-        "height": 40,
-      },
+      ],
       {
         "justifyContent": "center",
       },
@@ -716,65 +398,12 @@ exports[`<Slider /> renders enabled slider 1`] = `
   onLayout={[Function]}
   style={
     [
-      {
-        "defaultIndicatorIdle": {
-          "backgroundColor": "#C0C0C0",
-          "height": 10,
-          "width": 2,
-        },
-        "defaultIndicatorMarked": {
-          "backgroundColor": "#CCCCCC",
-          "height": 20,
-          "width": 5,
-        },
-        "defaultSlider": {},
-        "defaultSlideriOS": {
+      [
+        undefined,
+        {
           "height": 40,
         },
-        "sliderMainContainer": {
-          "width": "100%",
-          "zIndex": 1,
-        },
-        "stepIndicatorElement": {
-          "alignContent": "center",
-          "alignItems": "center",
-        },
-        "stepNumber": {
-          "alignItems": "center",
-          "marginTop": 20,
-          "position": "absolute",
-        },
-        "stepsIndicator": {
-          "flex": 1,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-          "top": 10,
-          "zIndex": 2,
-        },
-        "thumbImage": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "position": "absolute",
-        },
-        "thumbImageContainer": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "justifyContent": "center",
-          "position": "absolute",
-          "zIndex": 3,
-        },
-        "trackMarkContainer": {
-          "alignContent": "center",
-          "alignItems": "center",
-          "alignSelf": "center",
-          "justifyContent": "center",
-          "position": "absolute",
-          "zIndex": 3,
-        },
-      },
-      {
-        "height": 40,
-      },
+      ],
       {
         "justifyContent": "center",
       },