tear drop in text input

[hodatorabi]

Environment

React Native Environment Info:
System:
OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver)
CPU: x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
Memory: 1.52 GB / 15.54 GB
Shell: 4.4.19 - /bin/bash
Binaries:
Node: 10.6.0 - ~/.nvm/versions/node/v10.6.0/bin/node
Yarn: 1.7.0 - ~/.nvm/versions/node/v10.6.0/bin/yarn
npm: 6.1.0 - ~/.nvm/versions/node/v10.6.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
Android SDK:
Build Tools: 27.0.3, 28.0.1, 28.0.2
API Levels: 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28
npmPackages:
react: ^16.6.3 => 16.6.3
react-native: ^0.57.7 => 0.57.7
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1

Description

I am facing this issue on samsung J3 devices but it seems this issue exists for many samsung devices.
I get a green drop whenever i select some text in textinput and when I click on screen I get another one and the drops just stay there. Changing screen doesn't make them disappear. The only way is to close and reopen the app. This issue has been opened before #17057 but it's been closed and marked as resolved even though it hasn't been resolved obviously.
Here is a picture of the green drop after I've navigated to another screen:

[rickhanlonii]

Hey @hodatorabi, thanks for filing! Do you have any reproduction steps for us?

[hodatorabi]

@rickhanlonii Just a simple input box and a Samsung device. For me it happens on a Samsung Galaxy J3 device.

[Udbhav12]

@hodatorabi - Did you manage to solve this problem ? I am facing this exact issue

[hodatorabi]

@hodatorabi - Did you manage to solve this problem ? I am facing this exact issue

yes we actually changed our cursor handler to an empty png. We put an empty png file like android/app/src/main/res/drawable-xhdpi/empty.png and put the following code in our android/app/src/main/res/values/styles.xml

        <item name="android:textSelectHandleLeft">@drawable/empty</item>
        <item name="android:textSelectHandleRight">@drawable/empty</item>
        <item name="android:textSelectHandle">@drawable/empty</item>

You can also checkout this link

Hope this helps!

[kelset]

This to me seems more like an issue with some version of Samsung custom Android OS. I wonder if it happens on newer Samsung OSs like the Android 9 version.

Given that there is a workaround, I'm going to close this as I feel it's not fixable in the react-native realm. (probably it can happen also on a standard Android app)

If I'm wrong please provide a testable repro that uses latest stable (at time of writing is 0.59) and we can reopen and investigate this further.

[Udbhav12]

@hodatorabi I just noticed today that the solution which you mentioned fixes the tear drop issue, but the causes the webview to crash whenever we type anything

I am using the following in my styles.xml

@android:color/transparent
@android:color/transparent
@android:color/transparent