[0.63.1][Android 5] underlineColorAndroid not transparent #29379

Bardiamist · 2020-07-15T11:16:17Z

Description

I updated from 0.62.2 to 0.63.1 and TextInput on Android 5 has underline now.

underlineColorAndroid="transparent" does not help.

Android 6 and above hasn't underline.

React Native version:

System:
    OS: macOS 10.15.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 169.63 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.1
      System Images: android-21 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-29 | Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_252 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.1 => 0.63.1 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

npx react-native init underline
Render <TextInput />
Run on Android 5
Focus TextInput

Expected Results

TextInput underline shouldn't be rendered.

Code example:

import React from 'react';
import {TextInput} from 'react-native';

const App = () => <TextInput />;

export default App;

Screenshot

The text was updated successfully, but these errors were encountered:

safaiyeh · 2020-07-15T17:52:42Z

HI @Bardiamist, thanks for the issue.

I did a quick check on Android 5 and I cannot seem to reproduce this. Do you have any more details so I could reproduce this?

Bardiamist · 2020-07-15T18:04:55Z

@safaiyeh Yes, I tried now on same simulator (Nexus 5 API 22) this is Andoid 5.1 and no issue here.
Issue on Android 5:

safaiyeh · 2020-07-15T18:23:34Z

Yup, was able to reproduce this on Android 5. I'll bring this up

fabOnReact · 2020-07-16T09:43:02Z

Maybe is logging this exception?

react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java

Line 537 in 9f699ae

 FLog.e(TAG, "NullPointerException when setting underlineColorAndroid for TextInput", e); 

Bardiamist · 2020-07-16T09:50:22Z

No, I see many Could not find generated setter for class here.

Logcat

``` 07-16 15:45:44.460 5742-5742/? E/libprocessgroup: failed to make and chown /acct/uid_10061: Read-only file system 07-16 15:45:44.460 5742-5742/? W/Zygote: createProcessGroup failed, kernel missing CONFIG_CGROUP_CPUACCT? 07-16 15:45:44.461 5742-5742/? I/art: Not late-enabling -Xcheck:jni (already on) 07-16 15:45:44.510 5742-5742/com.underline D/SoLoader: init start 07-16 15:45:44.511 5742-5742/com.underline D/SoLoader: adding system library source: /vendor/lib 07-16 15:45:44.511 5742-5742/com.underline D/SoLoader: adding system library source: /system/lib 07-16 15:45:44.511 5742-5742/com.underline D/SoLoader: adding application source: com.facebook.soloader.DirectorySoSource[root = /data/app/com.underline-1/lib/x86 flags = 0] 07-16 15:45:44.512 5742-5742/com.underline D/SoLoader: adding backup source from : com.facebook.soloader.ApkSoSource[root = /data/data/com.underline/lib-main flags = 1] 07-16 15:45:44.513 5742-5742/com.underline D/SoLoader: Preparing SO source: com.facebook.soloader.DirectorySoSource[root = /system/lib flags = 2] 07-16 15:45:44.513 5742-5742/com.underline D/SoLoader: Preparing SO source: com.facebook.soloader.DirectorySoSource[root = /system/vendor/lib flags = 2] 07-16 15:45:44.513 5742-5742/com.underline D/SoLoader: Preparing SO source: com.facebook.soloader.DirectorySoSource[root = /data/app/com.underline-1/lib/x86 flags = 0] 07-16 15:45:44.513 5742-5742/com.underline D/SoLoader: Preparing SO source: com.facebook.soloader.ApkSoSource[root = /data/data/com.underline/lib-main flags = 1] 07-16 15:45:44.516 5742-5742/com.underline V/fb-UnpackingSoSource: locked dso store /data/data/com.underline/lib-main 07-16 15:45:44.516 5742-5742/com.underline I/fb-UnpackingSoSource: dso store is up-to-date: /data/data/com.underline/lib-main 07-16 15:45:44.516 5742-5742/com.underline V/fb-UnpackingSoSource: releasing dso store lock for /data/data/com.underline/lib-main 07-16 15:45:44.516 5742-5742/com.underline D/SoLoader: init finish: 4 SO sources prepared 07-16 15:45:44.516 5742-5742/com.underline D/SoLoader: init exiting 07-16 15:45:44.519 5742-5742/com.underline D/SoLoader: init exiting 07-16 15:45:44.519 5742-5742/com.underline D/SoLoader: About to load: libjscexecutor.so 07-16 15:45:44.520 5742-5742/com.underline D/SoLoader: libjscexecutor.so not found on /data/data/com.underline/lib-main 07-16 15:45:44.520 5742-5742/com.underline D/SoLoader: libjscexecutor.so found on /data/app/com.underline-1/lib/x86 07-16 15:45:44.520 5742-5742/com.underline D/SoLoader: Not resolving dependencies for libjscexecutor.so 07-16 15:45:44.524 5742-5742/com.underline D/JavaScriptCore.Version: 245459.0.0 07-16 15:45:44.525 5742-5742/com.underline D/SoLoader: Loaded: libjscexecutor.so 07-16 15:45:44.526 5742-5742/com.underline D/SoLoader: init exiting 07-16 15:45:44.588 5742-5766/com.underline D/SoLoader: About to load: libfbjni.so 07-16 15:45:44.588 5742-5766/com.underline D/SoLoader: libfbjni.so not found on /data/data/com.underline/lib-main 07-16 15:45:44.588 5742-5766/com.underline D/SoLoader: libfbjni.so found on /data/app/com.underline-1/lib/x86 07-16 15:45:44.588 5742-5766/com.underline D/SoLoader: Not resolving dependencies for libfbjni.so 07-16 15:45:44.594 5742-5766/com.underline D/SoLoader: Loaded: libfbjni.so 07-16 15:45:44.594 5742-5766/com.underline D/SoLoader: About to load: libflipper.so 07-16 15:45:44.594 5742-5766/com.underline D/SoLoader: libflipper.so not found on /data/data/com.underline/lib-main 07-16 15:45:44.594 5742-5766/com.underline D/SoLoader: libflipper.so found on /data/app/com.underline-1/lib/x86 07-16 15:45:44.594 5742-5766/com.underline D/SoLoader: Not resolving dependencies for libflipper.so 07-16 15:45:44.600 5742-5766/com.underline D/SoLoader: Loaded: libflipper.so 07-16 15:45:44.624 5742-5742/com.underline I/flipper: flipper: FlipperClient::addPlugin Inspector 07-16 15:45:44.625 5742-5742/com.underline I/flipper: flipper: FlipperClient::addPlugin React 07-16 15:45:44.635 5742-5742/com.underline I/flipper: flipper: FlipperClient::addPlugin Databases 07-16 15:45:44.636 5742-5742/com.underline I/flipper: flipper: FlipperClient::addPlugin Preferences 07-16 15:45:44.637 5742-5742/com.underline I/flipper: flipper: FlipperClient::addPlugin CrashReporter 07-16 15:45:44.641 5742-5742/com.underline I/flipper: flipper: FlipperClient::addPlugin Network 07-16 15:45:44.710 5742-5742/com.underline W/art: Before Android 4.1, method android.graphics.PorterDuffColorFilter androidx.vectordrawable.graphics.drawable.VectorDrawableCompat.updateTintFilter(android.graphics.PorterDuffColorFilter, android.content.res.ColorStateList, android.graphics.PorterDuff$Mode) would have incorrectly overridden the package-private method in android.graphics.drawable.Drawable 07-16 15:45:44.738 5742-5742/com.underline I/art: Rejecting re-init on previously-failed class java.lang.Class 07-16 15:45:44.738 5742-5742/com.underline I/art: Rejecting re-init on previously-failed class java.lang.Class 07-16 15:45:44.744 5742-5757/com.underline W/art: Suspending all threads took: 5.409ms 07-16 15:45:44.746 5742-5757/com.underline I/art: Background partial concurrent mark sweep GC freed 1097(82KB) AllocSpace objects, 0(0B) LOS objects, 39% free, 1951KB/3MB, paused 6.222ms total 23.613ms 07-16 15:45:44.757 5742-5780/com.underline D/OpenGLRenderer: Render dirty regions requested: true 07-16 15:45:44.759 5742-5742/com.underline D/Atlas: Validating map... 07-16 15:45:44.765 5742-5742/com.underline W/unknown:ReactNative: Packager connection already open, nooping. 07-16 15:45:44.787 5742-5780/com.underline I/OpenGLRenderer: Initialized EGL, version 1.4 07-16 15:45:44.787 5742-5780/com.underline W/OpenGLRenderer: Failed to choose config with EGL_SWAP_BEHAVIOR_PRESERVED, retrying without... 07-16 15:45:44.789 5742-5780/com.underline D/EGL_emulation: eglCreateContext: 0xa51470a0: maj 3 min 0 rcv 3 07-16 15:45:44.790 5742-5780/com.underline D/EGL_emulation: eglMakeCurrent: 0xa51470a0: ver 3 0 (tinfo 0xa5116700) 07-16 15:45:44.790 5742-5780/com.underline E/eglCodecCommon: glUtilsParamSize: unknow param 0x00008cdf 07-16 15:45:44.791 5742-5780/com.underline E/eglCodecCommon: glUtilsParamSize: unknow param 0x00008824 07-16 15:45:44.793 5742-5780/com.underline D/OpenGLRenderer: Enabling debug mode 0 07-16 15:45:44.798 5742-5780/com.underline D/EGL_emulation: eglMakeCurrent: 0xa51470a0: ver 3 0 (tinfo 0xa5116700) 07-16 15:45:44.906 5742-5780/com.underline D/EGL_emulation: eglMakeCurrent: 0xa51470a0: ver 3 0 (tinfo 0xa5116700) 07-16 15:45:45.005 5742-5781/com.underline D/SoLoader: About to load: libreactnativejni.so 07-16 15:45:45.005 5742-5781/com.underline D/SoLoader: libreactnativejni.so not found on /data/data/com.underline/lib-main 07-16 15:45:45.005 5742-5781/com.underline D/SoLoader: libreactnativejni.so found on /data/app/com.underline-1/lib/x86 07-16 15:45:45.005 5742-5781/com.underline D/SoLoader: Not resolving dependencies for libreactnativejni.so 07-16 15:45:45.006 5742-5781/com.underline D/SoLoader: Loaded: libreactnativejni.so 07-16 15:45:45.019 5742-5781/com.underline E/unknown:ReactNative: ReactInstanceManager.createReactContext: mJSIModulePackage null 07-16 15:45:45.023 5742-5783/com.underline E/unknown:ReactNative: ReactInstanceManager.attachRootViewToInstance() 07-16 15:45:45.023 5742-5742/com.underline W/unknown:ReactNative: Packager connection already open, nooping. 07-16 15:45:45.046 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.art.ARTGroupViewManager 07-16 15:45:45.046 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.art.ARTGroupShadowNode 07-16 15:45:45.047 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.art.ARTShapeViewManager 07-16 15:45:45.048 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.art.ARTShapeShadowNode 07-16 15:45:45.049 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.art.ARTTextViewManager 07-16 15:45:45.049 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.art.ARTTextShadowNode 07-16 15:45:45.049 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.checkbox.ReactCheckBoxManager 07-16 15:45:45.051 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.uimanager.LayoutShadowNode 07-16 15:45:45.053 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.picker.ReactDialogPickerManager 07-16 15:45:45.056 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.drawer.ReactDrawerLayoutManager 07-16 15:45:45.060 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.picker.ReactDropdownPickerManager 07-16 15:45:45.061 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.scroll.ReactHorizontalScrollViewManager 07-16 15:45:45.063 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.scroll.ReactHorizontalScrollContainerViewManager 07-16 15:45:45.064 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.progressbar.ReactProgressBarViewManager 07-16 15:45:45.065 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.progressbar.ProgressBarShadowNode 07-16 15:45:45.067 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.scroll.ReactScrollViewManager 07-16 15:45:45.068 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.slider.ReactSliderManager 07-16 15:45:45.069 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.slider.ReactSliderManager$ReactSliderShadowNode 07-16 15:45:45.069 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.switchview.ReactSwitchManager 07-16 15:45:45.073 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.switchview.ReactSwitchManager$ReactSwitchShadowNode 07-16 15:45:45.074 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.swiperefresh.SwipeRefreshLayoutManager 07-16 15:45:45.077 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.art.ARTSurfaceViewManager 07-16 15:45:45.078 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.art.ARTSurfaceViewShadowNode 07-16 15:45:45.079 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.text.frescosupport.FrescoBasedReactTextInlineImageViewManager 07-16 15:45:45.079 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.text.frescosupport.FrescoBasedReactTextInlineImageShadowNode 07-16 15:45:45.080 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.image.ReactImageManager 07-16 15:45:45.082 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.modal.ReactModalHostManager 07-16 15:45:45.086 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.modal.ModalHostShadowNode 07-16 15:45:45.087 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.text.ReactRawTextManager 07-16 15:45:45.088 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.text.ReactRawTextShadowNode 07-16 15:45:45.088 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.textinput.ReactTextInputManager 07-16 15:45:45.090 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.textinput.ReactTextInputShadowNode 07-16 15:45:45.091 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.text.ReactTextViewManager 07-16 15:45:45.092 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.text.ReactTextShadowNode 07-16 15:45:45.092 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.view.ReactViewManager 07-16 15:45:45.093 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.viewpager.ReactViewPagerManager 07-16 15:45:45.095 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.text.ReactVirtualTextViewManager 07-16 15:45:45.095 5742-5783/com.underline W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.text.ReactVirtualTextShadowNode 07-16 15:45:45.099 5742-5783/com.underline D/SoLoader: About to load: libyoga.so 07-16 15:45:45.099 5742-5783/com.underline D/SoLoader: libyoga.so not found on /data/data/com.underline/lib-main 07-16 15:45:45.099 5742-5783/com.underline D/SoLoader: libyoga.so found on /data/app/com.underline-1/lib/x86 07-16 15:45:45.099 5742-5783/com.underline D/SoLoader: Not resolving dependencies for libyoga.so 07-16 15:45:45.103 5742-5783/com.underline D/SoLoader: Loaded: libyoga.so 07-16 15:45:45.106 5742-5783/com.underline E/unknown:ReactRootView: runApplication: call AppRegistry.runApplication 07-16 15:45:45.117 5742-5783/com.underline I/flipper: flipper: FlipperClient::addPlugin Fresco 07-16 15:45:45.154 5742-5742/com.underline E/unknown:ReactNative: ReactInstanceManager.attachRootViewToInstance() 07-16 15:45:45.154 5742-5742/com.underline E/unknown:ReactRootView: runApplication: call AppRegistry.runApplication 07-16 15:45:45.192 5742-5782/com.underline D/SoLoader: About to load: libreactnativeblob.so 07-16 15:45:45.192 5742-5782/com.underline D/SoLoader: libreactnativeblob.so not found on /data/data/com.underline/lib-main 07-16 15:45:45.192 5742-5782/com.underline D/SoLoader: libreactnativeblob.so found on /data/app/com.underline-1/lib/x86 07-16 15:45:45.192 5742-5782/com.underline D/SoLoader: Not resolving dependencies for libreactnativeblob.so 07-16 15:45:45.192 5742-5782/com.underline D/SoLoader: Loaded: libreactnativeblob.so 07-16 15:45:45.229 5742-5783/com.underline I/WebViewFactory: Loading com.google.android.webview version 77.0.3865.92 (code 386509215) 07-16 15:45:45.251 5742-5783/com.underline I/art: Rejecting re-init on previously-failed class java.lang.Class 07-16 15:45:45.251 5742-5783/com.underline I/art: Rejecting re-init on previously-failed class java.lang.Class 07-16 15:45:45.252 5742-5783/com.underline I/art: Rejecting re-init on previously-failed class java.lang.Class 07-16 15:45:45.252 5742-5783/com.underline I/art: Rejecting re-init on previously-failed class java.lang.Class 07-16 15:45:45.276 5742-5783/com.underline I/cr_LibraryLoader: Time to load native libraries: 1 ms (timestamps 644-645) 07-16 15:45:45.291 5742-5783/com.underline I/chromium: [INFO:library_loader_hooks.cc(51)] Chromium logging enabled: level = 0, default verbosity = 0 07-16 15:45:45.291 5742-5783/com.underline I/cr_LibraryLoader: Expected native library version number "77.0.3865.92", actual native library version number "77.0.3865.92" 07-16 15:45:45.509 5742-5782/com.underline I/ReactNativeJS: Running "underline" with {"rootTag":1} 07-16 15:45:45.591 5742-5780/com.underline D/EGL_emulation: eglMakeCurrent: 0xa51470a0: ver 3 0 (tinfo 0xa5116700) ```

Possible to hide underline by

inputRef.current?.setNativeProps({
  underlineColorAndroid: 'transparent',
});

but on focus/unfocus underlineColorAndroid is changing by something

Bardiamist · 2020-07-22T04:14:05Z

Any fix/patch/workaround?

badikumar · 2020-07-27T15:50:11Z

@safaiyeh - What's the status on this bug?

safaiyeh · 2020-07-27T15:54:20Z

@badikumar no activity, PRs are welcome!

2ducanhpham · 2020-08-20T09:41:04Z

same problem

luyouwei66 · 2020-08-30T17:31:04Z

me too

mskarimi · 2020-09-05T09:06:49Z

me too

owenjeon · 2020-09-25T10:55:28Z

+1

Luccasoli · 2020-09-25T11:56:44Z

Same thing here with Expo managed workflow, and it started after i upgrade expo sdk from 38 to 39, that upgrade react-native from 0.62 to 0.63

"expo": "^39.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.0.tar.gz",

ksti · 2020-09-27T04:21:28Z

I found a workaround: it seems that it should be given a borderBottomColor style, now underlineColorAndroid works.

<TextInput
  style={{
    fontSize: 16,
    flex: 1,
    borderBottomColor: 'transparent',
  }}
  underlineColorAndroid={'transparent'}
/>

lieberscott · 2020-10-12T15:46:46Z

@ksti Still not working for me :(

nates-dennis · 2020-10-20T11:42:08Z

setting the border bottom width to 0 along with the underlineColorAndroid to transparent worked for me. I tested this using a android 5.0 emulator 4.7 WXGA Android 21 on react native 0.63.1

Ashoat · 2020-10-27T02:39:23Z

After updating to RN0.63 I can confirm that the borderBottomColor: 'transparent' style fixes the issue.

It appears to me that the underlineColorAndroid='transparent' prop is no longer necessary. I've tested Android API levels 21, 22, 23, and 29.

Is anybody still using underlineColorAndroid, and if so for what case? If it's no longer necessary, we might want to update the docs.

Summary: `underlineColorAndroid` no longer seems to work. It only matters for devices with API level 21 (Android 5.0) and lower, but the property appears to have no effect. More details on this [React Native GitHub issue](facebook/react-native#29379). Test Plan: I tested each callsite individually on API levels 21, 22, 23, and 29. Most of them needed to be replaced with the `borderBottomColor: 'transparent'` style, but two (`Entry` and `ChatInputBar`) did not seem to have issues. Reviewers: palys-swm Subscribers: KatPo, zrebcu411, Adrian Differential Revision: https://phabricator.ashoat.com/D320

GospelHW · 2020-12-21T03:35:34Z

Hi @Ashoat you means you solve this issue？I have same issue on android api 10

GospelHW · 2020-12-21T03:38:41Z

Hi @Ashoat you means you solve this issue？I have same issue on android api 10

my react-native:0.59.8，must upgrade to 0.63？

nri-yayan · 2021-01-19T06:10:24Z

I'm in 0.63.4, either underlineColorAndroid='transparent' or borderBottomColor: 'transparent' doesn't work.

Edit: underlineColorAndroid="rgba(255,255,255,0)" did the trick.

facebook#29379

fabOnReact · 2021-02-05T17:08:59Z

Hello ReactNative Developers! 😃

I just prepared Pull Request #30897 that seems to solve this issue

You can contact me by email at fabrizio.developer@gmail.com

Please head over to the Pull Request #30897 and thumbs up if you like it.

If you don't like the pr please feel free to leave a code review or comment, I'll be happy to add improvements and changes.

Thanks a lot 🙏 ☮️ 🏖️

facebook/react-native#29379

BrianAutomatize · 2022-02-03T21:47:45Z

Tried underlineColorAndroid='transparent'
underlineColorAndroid="rgba(255,255,255,0)"
borderBottomColor: 'transparent'
borderBottomWidth:0
nothing seems to get rid of the android underline
using "react-native": "0.66.0"

jeececab · 2022-02-23T13:36:49Z

Tried underlineColorAndroid='transparent' underlineColorAndroid="rgba(255,255,255,0)" borderBottomColor: 'transparent' borderBottomWidth:0 nothing seems to get rid of the android underline using "react-native": "0.66.0"

Same...

facebook/react-native#29379

Summary: This issue fixes facebook#29379 `underlineColorAndroid'='transparent'` does not work on Android API 21. Setting `style: { bottomBorderColor: 'transparent'}` fixes the issue. The following steps fix underlineColorAndroid on Android API 21: - Store the bottomBorderColor in a local variable - Then set the bottomBorderColor to the same color of underlineColorAndroid - Set underlineColorAndroid - Then Set the bottomBorderColor to the previous color previously stored in the local variable This change requires `ReactViewBackgroundDrawable` method `getBorderColor` to be public and accessible from `ReactTextInputManager` to retrieve the border color. https://github.com/facebook/react-native/blob/6061b7928320c64a94716ce3d6646667ebf3f6b5/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java#L1231-L1236 Related Discussions facebook#18938 facebook#18988 facebook#29412 (comment) More Information at fabOnReact/react-native-notes#4 (comment) ## Changelog [Android] [Fixed] - Fix underlineColorAndroid transparent not working on API 21 Pull Request resolved: facebook#30897 Test Plan: This changes fix the Java API which can not be tested as explained in commit facebook@709a441 The java TextInputTest was excluded from the test suite in commit facebook@709a441 as they need the Yoga libraries to run **<details><summary>CLICK TO OPEN TESTS RESULTS - API 21</summary>** <p> Does not show underline by default (`transparent`) ```javascript <TextInput /> ``` <image src="https://user-images.githubusercontent.com/24992535/107060953-dee34d00-67d7-11eb-8f01-360dbb1420b8.png" width="150" /> ```javascript <TextInput underlineColorAndroid="red" /> ``` <image src="https://user-images.githubusercontent.com/24992535/107061134-194cea00-67d8-11eb-9da1-9780b1aa8294.png" width="150" /> ```javascript <TextInput underlineColorAndroid="green" style={ { borderBottomColor: 'red', borderBottomWidth: 2, borderTopColor: 'black', borderTopWidth: 4 } } /> ``` <image src="https://user-images.githubusercontent.com/24992535/107062411-9167df80-67d9-11eb-810c-749992d8d2d3.png" width="150" /> ```javascript <TextInput style={ { borderBottomColor: 'red', borderBottomWidth: 2, borderTopColor: 'black', borderTopWidth: 4 } } /> ``` <image src="https://user-images.githubusercontent.com/24992535/107062735-e6a3f100-67d9-11eb-93c3-02cd768f8421.png" width="150" /> ```javascript <TextInput underlineColorAndroid="blue" style={ { borderBottomColor: 'red', borderBottomWidth: 2, borderTopColor: 'black', borderTopWidth: 4, borderLeftColor: 'pink', borderLeftWidth: 7, borderRightColor: 'yellow', borderRightWidth: 7, } } /> ``` <image src="https://user-images.githubusercontent.com/24992535/107063263-75b10900-67da-11eb-97ab-316736d525a2.png" width="150" /> ```javascript <TextInput underlineColorAndroid="transparent" style={ { borderBottomColor: 'red', borderBottomWidth: 2, borderTopColor: 'black', borderTopWidth: 4, borderLeftColor: 'pink', borderLeftWidth: 7, borderRightColor: 'yellow', borderRightWidth: 7, } } /> ``` <image src="https://user-images.githubusercontent.com/24992535/107063332-8792ac00-67da-11eb-82fc-99793bf4d49d.png" width="150" /> </p> </details> Reviewed By: cortinico Differential Revision: D33906415 Pulled By: lunaleaps fbshipit-source-id: bd7efe4aac40ad701aec83f051ac40dcd4a99cda

Bardiamist added the Needs: Triage 🔍 label Jul 15, 2020

react-native-bot added the Platform: Android Android applications. label Jul 15, 2020

Bardiamist mentioned this issue Jul 15, 2020

V0.63.2 Discussion react-native-community/releases#200

Closed

safaiyeh added Needs: Author Feedback and removed Needs: Triage 🔍 labels Jul 15, 2020

github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback labels Jul 15, 2020

safaiyeh added Component: TextInput Related to the TextInput component. Impact: Regression Describes a behavior that used to work on a prior release, but stopped working recently. and removed Needs: Attention Issues where the author has responded to feedback. labels Jul 15, 2020

fabOnReact added a commit to fabOnReact/react-native that referenced this issue Feb 5, 2021

fix underlineColor transparent not working on API 21

eee5d7b

facebook#29379

fabOnReact mentioned this issue Feb 5, 2021

underlineColor transparent not working on API 21 #30897

Closed

abdelmagied94 added a commit to abdelmagied94/NativeBase that referenced this issue Jan 26, 2022

fix: underline color not working in android 21+ since react native 0.63

66324b7

facebook/react-native#29379

abdelmagied94 added a commit to abdelmagied94/react-native-gifted-chat that referenced this issue Jan 26, 2022

fix: underline color not working in android 21+ since react native 0.63

f86f2c8

facebook/react-native#29379

abdelmagied94 added a commit to abdelmagied94/NativeBase that referenced this issue Jan 26, 2022

fix: underline color not working in android 21+ since react native 0.63

1974c12

facebook/react-native#29379

facebook-github-bot closed this as completed in 52aee50 Mar 10, 2022

jpinto321 added a commit to Dharma-Platform/react-native-material-kit that referenced this issue Nov 29, 2022

fix issue with Android 5.0 having a strikethrough

2d21b59

facebook/react-native#29379

facebook locked as resolved and limited conversation to collaborators Mar 10, 2023

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Mar 10, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[0.63.1][Android 5] underlineColorAndroid not transparent #29379

[0.63.1][Android 5] underlineColorAndroid not transparent #29379

Bardiamist commented Jul 15, 2020 •

edited

Loading

safaiyeh commented Jul 15, 2020

Bardiamist commented Jul 15, 2020

safaiyeh commented Jul 15, 2020

fabOnReact commented Jul 16, 2020

Bardiamist commented Jul 16, 2020 •

edited

Loading

Bardiamist commented Jul 22, 2020

badikumar commented Jul 27, 2020

safaiyeh commented Jul 27, 2020

2ducanhpham commented Aug 20, 2020

luyouwei66 commented Aug 30, 2020

mskarimi commented Sep 5, 2020

owenjeon commented Sep 25, 2020

Luccasoli commented Sep 25, 2020 •

edited

Loading

ksti commented Sep 27, 2020

lieberscott commented Oct 12, 2020 •

edited

Loading

nates-dennis commented Oct 20, 2020

Ashoat commented Oct 27, 2020

GospelHW commented Dec 21, 2020

GospelHW commented Dec 21, 2020

nri-yayan commented Jan 19, 2021 •

edited

Loading

fabOnReact commented Feb 5, 2021

BrianAutomatize commented Feb 3, 2022

jeececab commented Feb 23, 2022

[0.63.1][Android 5] underlineColorAndroid not transparent #29379

[0.63.1][Android 5] underlineColorAndroid not transparent #29379

Comments

Bardiamist commented Jul 15, 2020 • edited Loading

Description

React Native version:

Steps To Reproduce

Expected Results

Code example:

safaiyeh commented Jul 15, 2020

Bardiamist commented Jul 15, 2020

safaiyeh commented Jul 15, 2020

fabOnReact commented Jul 16, 2020

Bardiamist commented Jul 16, 2020 • edited Loading

Bardiamist commented Jul 22, 2020

badikumar commented Jul 27, 2020

safaiyeh commented Jul 27, 2020

2ducanhpham commented Aug 20, 2020

luyouwei66 commented Aug 30, 2020

mskarimi commented Sep 5, 2020

owenjeon commented Sep 25, 2020

Luccasoli commented Sep 25, 2020 • edited Loading

ksti commented Sep 27, 2020

lieberscott commented Oct 12, 2020 • edited Loading

nates-dennis commented Oct 20, 2020

Ashoat commented Oct 27, 2020

GospelHW commented Dec 21, 2020

GospelHW commented Dec 21, 2020

nri-yayan commented Jan 19, 2021 • edited Loading

fabOnReact commented Feb 5, 2021

BrianAutomatize commented Feb 3, 2022

jeececab commented Feb 23, 2022

Bardiamist commented Jul 15, 2020 •

edited

Loading

Bardiamist commented Jul 16, 2020 •

edited

Loading

Luccasoli commented Sep 25, 2020 •

edited

Loading

lieberscott commented Oct 12, 2020 •

edited

Loading

nri-yayan commented Jan 19, 2021 •

edited

Loading