Fix/style sheet compose (#625)

* chore: bump react-native-web in example app * fix: patch style sheet compose usage * chore: update snapshot after style change
callstack · Aug 29, 2024 · 6421cf5 · 6421cf5
1 parent 220dbed
commit 6421cf5
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 426 deletions.
diff --git a/example-web/package-lock.json b/example-web/package-lock.json
diff --git 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
@@ -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}