Handle borderColor styles of TextField in Android (#1961)

Author: ethanshar

demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {TextInput, StyleSheet, ScrollView, ActivityIndicator} from 'react-native';
-import {Assets, Colors, Spacings, Typography, View, Text, Button, Keyboard, Incubator} from 'react-native-ui-lib'; //eslint-disable-line
+import {Assets, Colors, Spacings, Typography, View, Text, Button, Keyboard, Incubator, Constants} from 'react-native-ui-lib'; //eslint-disable-line
 const {TextField} = Incubator;
 const {KeyboardAwareInsetsView} = Keyboard;
 
@@ -283,12 +283,12 @@ const styles = StyleSheet.create({
   container: {},
   withUnderline: {
     borderBottomWidth: 1,
-    borderColor: Colors.$outlineDisabledHeavy,
+    borderColor: Constants.isAndroid ? Colors.$outlineDisabledHeavy.toString() : Colors.$outlineDisabledHeavy,
     paddingBottom: 4
   },
   withFrame: {
     borderWidth: 1,
-    borderColor: Colors.$outlineDisabledHeavy,
+    borderColor: Constants.isAndroid ? Colors.$outlineDisabledHeavy.toString() : Colors.$outlineDisabledHeavy,
     padding: 4,
     borderRadius: 2
   }

src/incubator/TextField/presets/default.ts

@@ -1,4 +1,5 @@
 import {StyleSheet} from 'react-native';
+import {Constants} from '../../../commons/new';
 import {Colors, Spacings, Typography} from '../../../style';
 
 const colorByState = {
@@ -10,7 +11,7 @@ const colorByState = {
 const styles = StyleSheet.create({
   field: {
     borderBottomWidth: 1,
-    borderBottomColor: Colors.$outlineDisabled,
+    borderBottomColor: Constants.isAndroid ? Colors.$outlineDisabled.toString() : Colors.$outlineDisabled,
     paddingBottom: Spacings.s2
   },
   input: {