[RNMobile] Reduce spacing in slider (#24161)

WordPress · Jul 28, 2020 · 131b21e · 131b21e
1 parent 3f2daa5
commit 131b21e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js
@@ -139,6 +139,7 @@ class BottomSheetRangeCell extends Component {
 	}
 
 	render() {
+		const isIOS = Platform.OS === 'ios';
 		const {
 			value,
 			defaultValue,
@@ -150,10 +151,8 @@ class BottomSheetRangeCell extends Component {
 			minimumTrackTintColor = preferredColorScheme === 'light'
 				? '#00669b'
 				: '#5198d9',
-			maximumTrackTintColor = Platform.OS === 'ios'
-				? '#e9eff3'
-				: '#909090',
-			thumbTintColor = Platform.OS === 'android' && '#00669b',
+			maximumTrackTintColor = isIOS ? '#e9eff3' : '#909090',
+			thumbTintColor = ! isIOS && '#00669b',
 			getStylesFromColorScheme,
 			...cellProps
 		} = this.props;
@@ -175,11 +174,16 @@ class BottomSheetRangeCell extends Component {
 			styles.sliderDarkTextInput
 		);
 
+		const cellRowContainerStyle = [
+			styles.cellRowStyles,
+			isIOS ? styles.cellRowStylesIOS : styles.cellRowStylesAndroid,
+		];
+
 		return (
 			<Cell
 				{ ...cellProps }
 				cellContainerStyle={ styles.cellContainerStyles }
-				cellRowContainerStyle={ styles.cellRowStyles }
+				cellRowContainerStyle={ cellRowContainerStyle }
 				accessibilityRole={ 'none' }
 				value={ '' }
 				editable={ false }

diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.scss b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss
@@ -34,7 +34,15 @@
 
 .cellRowStyles {
 	min-height: 48px;
-	margin-bottom: -13px;
+	flex: 1;
 	width: 100%;
 	justify-content: space-between;
 }
+
+.cellRowStylesIOS {
+	margin-bottom: -27px;
+}
+
+.cellRowStylesAndroid {
+	margin-bottom: -37px;
+}