Prevent slider from overflowing out of the container in Web #176 (#177)

* Prevent slider from overflowing out of the container Signed-off-by: François BILLIOUD <f.billioud@gmail.com> * Fix component width Signed-off-by: François BILLIOUD <f.billioud@gmail.com> Co-authored-by: François BILLIOUD <f.billioud@gmail.com>
callstack · May 11, 2020 · 3636b68 · 3636b68
1 parent 19ea5f7
commit 3636b68
Showing 1 changed file with 5 additions and 4 deletions.
diff --git a/src/js/RNCSliderNativeComponent.web.js b/src/js/RNCSliderNativeComponent.web.js
@@ -175,7 +175,9 @@ const RCTSliderWebComponent = React.forwardRef(
 
     const containerStyle = StyleSheet.compose(
       {
-        width: '100%',
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: 'auto',
         flexDirection: 'row',
         userSelect: 'none',
         alignItems: 'center',
@@ -188,19 +190,18 @@ const RCTSliderWebComponent = React.forwardRef(
       height: trackHeight,
       borderRadius: trackHeight / 2,
       userSelect: 'none',
-      flexGrow: 1,
     };
 
     const minimumTrackStyle = {
       ...trackStyle,
       backgroundColor: minimumTrackTintColor,
-      flexBasis: minPercent * 100 + '%',
+      flexGrow: minPercent * 100,
     };
 
     const maximumTrackStyle = {
       ...trackStyle,
       backgroundColor: maximumTrackTintColor,
-      flexBasis: maxPercent * 100 + '%',
+      flexGrow: maxPercent * 100,
     };
 
     // const width = (containerSize.current ? containerSize.current.width : 0)