diff --git a/packages/components/src/mobile/bottom-sheet/range-text-input.native.js b/packages/components/src/mobile/bottom-sheet/range-text-input.native.js index 29a843cd091f58..47885260653de8 100644 --- a/packages/components/src/mobile/bottom-sheet/range-text-input.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-text-input.native.js @@ -176,9 +176,9 @@ class RangeTextInput extends Component { styles.textInputDark ); - const verticalBorderStyle = getStylesFromColorScheme( - styles.verticalBorder, - styles.verticalBorderDark + const textInputIOSStyle = getStylesFromColorScheme( + styles.textInputIOS, + styles.textInputIOSDark ); const inputBorderStyles = [ @@ -188,7 +188,10 @@ class RangeTextInput extends Component { ]; const valueFinalStyle = [ - ! isIOS ? inputBorderStyles : verticalBorderStyle, + Platform.select( { + android: inputBorderStyles, + ios: textInputIOSStyle, + } ), { width: 50 * fontScale, }, diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index 942c39426390c2..70c2b40997a41c 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -174,14 +174,16 @@ // Range Text Input -.verticalBorder { +.textInputIOS { border-right-width: 1px; text-align: center; border-color: $light-gray-400; + color: $gray-dark; } -.verticalBorderDark { +.textInputIOSDark { border-color: $gray-70; + color: $white; } .textInputContainer { diff --git a/test/native/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js index d369d27b926544..a49f07231a4986 100644 --- a/test/native/__mocks__/styleMock.js +++ b/test/native/__mocks__/styleMock.js @@ -119,4 +119,14 @@ module.exports = { ripple: { backgroundColor: 'white', }, + spacing: { + marginLeft: 6, + marginRight: 6, + }, + arrow: { + color: 'red', + }, + textInput: { + color: 'black', + }, };