From 1974c1287754658447552b9230b00cfda211d739 Mon Sep 17 00:00:00 2001 From: abdelmagied Date: Wed, 26 Jan 2022 19:28:20 +0200 Subject: [PATCH] fix: underline color not working in android 21+ since react native 0.63 https://github.com/facebook/react-native/issues/29379 --- dist/src/basic/Input.js | 2 +- dist/src/basic/Input.js.map | 2 +- dist/src/basic/Textarea.js | 2 +- dist/src/basic/Textarea.js.map | 2 +- src/basic/Input.js | 13 +++++++++++-- src/basic/Textarea.js | 4 ++-- 6 files changed, 17 insertions(+), 8 deletions(-) diff --git a/dist/src/basic/Input.js b/dist/src/basic/Input.js index cbe65c228..2aeefd73c 100644 --- a/dist/src/basic/Input.js +++ b/dist/src/basic/Input.js @@ -1,2 +1,2 @@ -Object.defineProperty(exports,"__esModule",{value:true});exports.Input=undefined;var _extends=Object.assign||function(target){for(var i=1;i {\n this._textInput = c;\n this._root = c;\n }}\n editable={!this.props.disabled}\n underlineColorAndroid=\"rgba(0,0,0,0)\"\n placeholderTextColor={\n this.props.placeholderTextColor\n ? this.props.placeholderTextColor\n : variables.inputColorPlaceholder\n }\n {...this.props}\n />\n );\n }\n}\n\nInput.propTypes = {\n ...TextInput.propTypes,\n style: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.number,\n PropTypes.array\n ])\n};\n\nconst StyledInput = connectStyle('NativeBase.Input', {}, mapPropsToStyleNames)(\n Input\n);\n\nexport { StyledInput as Input };\n"]} \ No newline at end of file +{"version":3,"sources":["../../../src/basic/Input.js"],"names":["Input","defaultProps","style","borderBottomColor","props","variables","context","theme","variable","_textInput","c","_root","disabled","placeholderTextColor","inputColorPlaceholder","prepareRootProps","NativeBaseComponent","propTypes","TextInput","PropTypes","oneOfType","object","number","array","StyledInput","mapPropsToStyleNames"],"mappings":"q1BAAA,4B,2CACA,qC,mDACA,yCACA,iEAEA,mE,yEACA,mD,yDACA,qD,iDAEA,gE,48BAEMA,M,+SACe,CACjB,GAAMC,cAAe,CACnBC,MAAO,CACLC,kBAAmB,aADd,CADY,CAArB,CAKA,MAAO,2BAAa,KAAKC,KAAlB,CAAyBH,YAAzB,CAAP,CACD,C,uCAEQ,iBACP,GAAMI,WAAY,KAAKC,OAAL,CAAaC,KAAb,CACd,KAAKD,OAAL,CAAaC,KAAb,CAAmB,4BAAnB,EAAiDF,SADnC,CAEdG,kBAFJ,CAGA,MACE,+BAAC,sBAAD,WACE,IAAK,eAAK,CACR,OAAKC,UAAL,CAAkBC,CAAlB,CACA,OAAKC,KAAL,CAAaD,CAAb,CACD,CAJH,CAKE,SAAU,CAAC,KAAKN,KAAL,CAAWQ,QALxB,CAME,qBACE,KAAKR,KAAL,CAAWS,oBAAX,CACI,KAAKT,KAAL,CAAWS,oBADf,CAEIR,UAAUS,qBATlB,EAWM,KAAKC,gBAAL,EAXN,mDADF,CAeD,C,mBA7BiBC,6B,EAgCpBhB,MAAMiB,SAAN,aACKC,uBAAUD,SADf,EAEEf,MAAOiB,oBAAUC,SAAV,CAAoB,CACzBD,oBAAUE,MADe,CAEzBF,oBAAUG,MAFe,CAGzBH,oBAAUI,KAHe,CAApB,CAFT,GASA,GAAMC,aAAc,yCAAa,kBAAb,CAAiC,EAAjC,CAAqCC,8BAArC,EAClBzB,KADkB,CAApB,C,QAIwBA,K,CAAfwB,W","file":"Input.js","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { TextInput } from 'react-native';\nimport { connectStyle } from 'native-base-shoutem-theme';\n\nimport mapPropsToStyleNames from '../utils/mapPropsToStyleNames';\nimport computeProps from '../utils/computeProps';\nimport variable from '../theme/variables/platform';\n\nimport NativeBaseComponent from './Base/NativeBaseComponent';\n\nclass Input extends NativeBaseComponent {\n prepareRootProps() {\n const defaultProps = {\n style: {\n borderBottomColor: 'transparent'\n }\n };\n return computeProps(this.props, defaultProps);\n }\n\n render() {\n const variables = this.context.theme\n ? this.context.theme['@@shoutem.theme/themeStyle'].variables\n : variable;\n return (\n {\n this._textInput = c;\n this._root = c;\n }}\n editable={!this.props.disabled}\n placeholderTextColor={\n this.props.placeholderTextColor\n ? this.props.placeholderTextColor\n : variables.inputColorPlaceholder\n }\n {...this.prepareRootProps()}\n />\n );\n }\n}\n\nInput.propTypes = {\n ...TextInput.propTypes,\n style: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.number,\n PropTypes.array\n ])\n};\n\nconst StyledInput = connectStyle('NativeBase.Input', {}, mapPropsToStyleNames)(\n Input\n);\n\nexport { StyledInput as Input };\n"]} \ No newline at end of file diff --git a/dist/src/basic/Textarea.js b/dist/src/basic/Textarea.js index 2ba6ebf2e..b09ee63c2 100644 --- a/dist/src/basic/Textarea.js +++ b/dist/src/basic/Textarea.js @@ -1,2 +1,2 @@ -Object.defineProperty(exports,"__esModule",{value:true});exports.Textarea=undefined;var _extends=Object.assign||function(target){for(var i=1;i {\n this._textInput = c;\n this._root = c;\n }}\n {...this.prepareRootProps()}\n multiline\n placeholderTextColor={\n this.props.placeholderTextColor\n ? this.props.placeholderTextColor\n : variables.inputColorPlaceholder\n }\n underlineColorAndroid=\"rgba(0,0,0,0)\"\n editable={!this.props.disabled}\n />\n );\n }\n}\n\nTextarea.propTypes = {\n ...TextInput.propTypes,\n style: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.number,\n PropTypes.array\n ]),\n rowSpan: PropTypes.number,\n bordered: PropTypes.bool,\n underline: PropTypes.bool\n};\n\nconst StyledTextarea = connectStyle(\n 'NativeBase.Textarea',\n {},\n mapPropsToStyleNames\n)(Textarea);\n\nexport { StyledTextarea as Textarea };\n"]} \ No newline at end of file +{"version":3,"sources":["../../../src/basic/Textarea.js"],"names":["Textarea","textarea","height","props","rowSpan","borderBottomColor","defaultProps","style","getStyle","_textInput","c","_root","prepareRootProps","placeholderTextColor","variables","inputColorPlaceholder","disabled","Component","propTypes","TextInput","PropTypes","oneOfType","object","number","array","bordered","bool","underline","StyledTextarea","mapPropsToStyleNames"],"mappings":"21BAAA,4B,2CACA,qC,mDACA,yCACA,iEAEA,qD,iDACA,mD,yDACA,mE,68BAEMA,S,6RACO,CACT,MAAO,CACLC,SAAU,CACRC,OAAQ,KAAKC,KAAL,CAAWC,OAAX,CAAqB,KAAKD,KAAL,CAAWC,OAAX,CAAqB,EAA1C,CAA+C,EAD/C,CAERC,kBAAmB,aAFX,CADL,CAAP,CAMD,C,2DAEkB,CACjB,GAAMC,cAAe,CACnBC,MAAO,KAAKC,QAAL,GAAgBP,QADJ,CAArB,CAGA,MAAO,2BAAa,KAAKE,KAAlB,CAAyBG,YAAzB,CAAP,CACD,C,uCACQ,iBACP,MACE,+BAAC,sBAAD,WACE,IAAK,eAAK,CACR,OAAKG,UAAL,CAAkBC,CAAlB,CACA,OAAKC,KAAL,CAAaD,CAAb,CACD,CAJH,EAKM,KAAKE,gBAAL,EALN,EAME,cANF,CAOE,qBACE,KAAKT,KAAL,CAAWU,oBAAX,CACI,KAAKV,KAAL,CAAWU,oBADf,CAEIC,mBAAUC,qBAVlB,CAYE,SAAU,CAAC,KAAKZ,KAAL,CAAWa,QAZxB,kDADF,CAgBD,C,sBAjCoBC,gB,EAoCvBjB,SAASkB,SAAT,aACKC,uBAAUD,SADf,EAEEX,MAAOa,oBAAUC,SAAV,CAAoB,CACzBD,oBAAUE,MADe,CAEzBF,oBAAUG,MAFe,CAGzBH,oBAAUI,KAHe,CAApB,CAFT,CAOEpB,QAASgB,oBAAUG,MAPrB,CAQEE,SAAUL,oBAAUM,IARtB,CASEC,UAAWP,oBAAUM,IATvB,GAYA,GAAME,gBAAiB,yCACrB,qBADqB,CAErB,EAFqB,CAGrBC,8BAHqB,EAIrB7B,QAJqB,CAAvB,C,QAM2BA,Q,CAAlB4B,c","file":"Textarea.js","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { TextInput } from 'react-native';\nimport { connectStyle } from 'native-base-shoutem-theme';\n\nimport variables from '../theme/variables/platform';\nimport computeProps from '../utils/computeProps';\nimport mapPropsToStyleNames from '../utils/mapPropsToStyleNames';\n\nclass Textarea extends Component {\n getStyle() {\n return {\n textarea: {\n height: this.props.rowSpan ? this.props.rowSpan * 25 : 60,\n borderBottomColor: 'transparent'\n }\n };\n }\n\n prepareRootProps() {\n const defaultProps = {\n style: this.getStyle().textarea\n };\n return computeProps(this.props, defaultProps);\n }\n render() {\n return (\n {\n this._textInput = c;\n this._root = c;\n }}\n {...this.prepareRootProps()}\n multiline\n placeholderTextColor={\n this.props.placeholderTextColor\n ? this.props.placeholderTextColor\n : variables.inputColorPlaceholder\n }\n editable={!this.props.disabled}\n />\n );\n }\n}\n\nTextarea.propTypes = {\n ...TextInput.propTypes,\n style: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.number,\n PropTypes.array\n ]),\n rowSpan: PropTypes.number,\n bordered: PropTypes.bool,\n underline: PropTypes.bool\n};\n\nconst StyledTextarea = connectStyle(\n 'NativeBase.Textarea',\n {},\n mapPropsToStyleNames\n)(Textarea);\n\nexport { StyledTextarea as Textarea };\n"]} \ No newline at end of file diff --git a/src/basic/Input.js b/src/basic/Input.js index 08f8a1732..9ff2058c9 100644 --- a/src/basic/Input.js +++ b/src/basic/Input.js @@ -4,11 +4,21 @@ import { TextInput } from 'react-native'; import { connectStyle } from 'native-base-shoutem-theme'; import mapPropsToStyleNames from '../utils/mapPropsToStyleNames'; +import computeProps from '../utils/computeProps'; import variable from '../theme/variables/platform'; import NativeBaseComponent from './Base/NativeBaseComponent'; class Input extends NativeBaseComponent { + prepareRootProps() { + const defaultProps = { + style: { + borderBottomColor: 'transparent' + } + }; + return computeProps(this.props, defaultProps); + } + render() { const variables = this.context.theme ? this.context.theme['@@shoutem.theme/themeStyle'].variables @@ -20,13 +30,12 @@ class Input extends NativeBaseComponent { this._root = c; }} editable={!this.props.disabled} - underlineColorAndroid="rgba(0,0,0,0)" placeholderTextColor={ this.props.placeholderTextColor ? this.props.placeholderTextColor : variables.inputColorPlaceholder } - {...this.props} + {...this.prepareRootProps()} /> ); } diff --git a/src/basic/Textarea.js b/src/basic/Textarea.js index ef297d4cd..dacd66628 100644 --- a/src/basic/Textarea.js +++ b/src/basic/Textarea.js @@ -11,7 +11,8 @@ class Textarea extends Component { getStyle() { return { textarea: { - height: this.props.rowSpan ? this.props.rowSpan * 25 : 60 + height: this.props.rowSpan ? this.props.rowSpan * 25 : 60, + borderBottomColor: 'transparent' } }; } @@ -36,7 +37,6 @@ class Textarea extends Component { ? this.props.placeholderTextColor : variables.inputColorPlaceholder } - underlineColorAndroid="rgba(0,0,0,0)" editable={!this.props.disabled} /> );