TextInput blinking cursor color is not correct on Android Pie when using selectionColor

[tamirrab]

• [V] Review the documentation: https://facebook.github.io/react-native
• [V] Search for existing issues: https://github.com/facebook/react-native/issues
• [V] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS 10.14.3
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Memory: 284.46 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.11.4 - ~/.nvm/versions/node/v8.11.4/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.5.0 - ~/.nvm/versions/node/v8.11.4/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 23, 26, 27, 28
Build Tools: 27.0.3, 28.0.2, 28.0.3
System Images: android-24 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: ^16.7.0 => 16.7.0
react-native: 0.57.8 => 0.57.8
npmGlobalPackages:
react-native-git-upgrade: 0.2.7

Description

TextInput selectionColor not change the color on android react-native 0.57.8

Reproducible Demo

<TextInput selectionColor={'red'}/>

[SasjaVDD]

Confirmed for react-native 0.57.7

[cvarley100]

Facing the same issue in 0.57.5.

[donnes]

Issue occurring on RN 0.57.7 and Android 9

[ferrannp]

I tried this with RN 0.59.1 and an Android Pie device and I am able to change selectionColor in TextInput correctly. Please trying updating to RN 0.59.1.

But please, if it's actually still an issue with 0.59.x please comment below and we can reopen it.

[LeThanhAn]

I am still facing it in React Native 0.59.4

[tamirrab]

Same here

[pang0018]

Same for React Native 0.59.5

[mrcarjul]

React Native 0.59.5 still a issue

[ferrannp]

I can see that the cursor color (the one that blinks when the text is focused) has the wrong color on Android P.

There is a way to do this quite easy natively which is changing the colorAccent in your res/values/styles.xml:

 <item name="colorControlActivated">yourColorHere</item> 

However this will affect any TextInput in your app (unless you write different styles and mess with more native code).

[grifotv]

@ferrannp This fix will also change the color of the Alert buttons unfortunately.

In case you need white or a very light color, your Alert buttons will not be visible due to the white background color in Alert modal in Android.

[ferrannp]

@grifotv yeah that might happen as several native widget use colorAccent. Then you would need to do even more overriding like in this answer: https://stackoverflow.com/a/29303960/2277631.

[grifotv]

@ferrannp I see, not so bad. thanks

[mgcostaParedes]

What about the expo users? There´s no solution? makes no sense when react native recommends to use the expo on docs.

[brentvatne]

@mgcostaParedes - it sounds like there’s a bug with selectionColor in react-native’s textinput on android pie, you can work around it by changing the global accent colour by editing native config as @ferrannp mentioned but this should be fixed. eject your expo project if you need to change it before this is fixed

[bmbmjmdm]

I'm also experiencing this as an expo user and ejecting is far too much trouble for this one little bug. Please fix

[wired8]

I need to be able to set this per TextInput as I have some components with a black background and some with white. Overriding in styles.xml is global, so this bug really needs fixing.

<item name="colorControlActivated">@android:color/black</item>

[KashyapProdigy]

Still an Issue !
Please Fix it React-Native Team !

[micnguyen]

This is still an issue on Android 10. Supplying selectionColor to a TextInput does not show the correct color (It's always green for me).

[TechAsif]

Please Fix This Issue

[react-ram]

Please fix the issue

[react-ram]

Please fix the issue

i am waiting for this

[Chasty]

green color in textinput, selectionColor does not work at all.

[ewantindale]

Still experiencing this issue on 0.62, would love to see a fix for this

[pxpeterxu]

The fix for this seems to be in 0.63.0-rc.0, so if you're willing to update React Native to a release candidate, this should be solved once and for all.

The relevant code is here: https://github.com/facebook/react-native/blob/v0.63.0-rc.0/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java#L437

Note that this will work for every version of Android except Android Pie (9), as it seems like there's no support for that version based on the code

[fabOnReact]

Testing on latest master. Does not work on Android Pie 9. The title of this issue is:

TextInput blinking cursor color is not correct on Android Pie when using selectionColor

@pxpeterxu Do you have information stating that Android Pie does not support this functionality? Otherwise I'll try to fix it. Thanks

Related e7a14b8 6a61557

[fabOnReact]

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

Lines 451 to 456 in e2dd18d

	if (Build.VERSION.SDK_INT == Build.VERSION_CODES.P) {
	// Pre-Android 10, there was no supported API to change the cursor color programmatically.
	// In Android 9.0, they changed the underlying implementation,
	// but also "dark greylisted" the new field, rendering it unusable.
	return;
	}

There must be a reason he added the exception with e7a14b8

[rizwanatta]

@fabriziobertoglio1987 is this dealt with in RN 0.63.0?

[pxpeterxu]

@fabrizio

@pxpeterxu Do you have information stating that Android Pie does not support this functionality?

Nope, I don't! I haven't really tried this

[ehxxn]

Still experiencing this issue on 0.63.2

[parasiteDev]

still not found any solution for this. if we want to provide a different color for cursor

[fabrizio]

please remove me from this thread..I am not the right "Fabrizio"

…

On Wed, 12 Aug 2020 at 10:53, Divendra Rajput ***@***.***> wrote: still not found any solution for this. if we want to provide a different color for cursor — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#22762 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAASEDQBQYUO3WN7FX2TEKDSAKND3ANCNFSM4GL7W5TA> . -- To unsubscribe from this group and stop receiving emails from it, send an email to ***@***.***

-- Fabrizio Michels

[chrisglein]

Based on comments above this seems like it's fixed. I'm also not able to repro on a modern Expo Snack on Android: https://snack.expo.io/@chrisglein/repro29627
But sounds like some others are still seeing. Can you clarify what's different about your repro from the Snack above?

[fabrizio]

please remove me from this thread..I am not the right "Fabrizio"

…

On Wed, 12 Aug 2020 at 14:41, Chris Glein ***@***.***> wrote: Based on comments above this seems like it's fixed. I'm also not able to repro on a modern Expo Snack on Android: ***@***.***/repro29627 But sounds like some others are still seeing. Can you clarify what's different about your repro from the Snack above? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#22762 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAASEDVGLR64QDLXXJ55NZ3SALH5DANCNFSM4GL7W5TA> . -- To unsubscribe from this group and stop receiving emails from it, send an email to ***@***.***

-- Fabrizio Michels

[mathieumg]

@fabrizio The unsubscribe link is in the footer of the email you're replying to.

[fabOnReact]

as explained here #22762 (comment)

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

Lines 451 to 456 in e2dd18d

	if (Build.VERSION.SDK_INT == Build.VERSION_CODES.P) {
	// Pre-Android 10, there was no supported API to change the cursor color programmatically.
	// In Android 9.0, they changed the underlying implementation,
	// but also "dark greylisted" the new field, rendering it unusable.
	return;
	}

this does not work on ReactNative on API 28 (Pie) as explained in this commit because we are using a reflection to set the cursor color

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

Line 463 in e2dd18d

Field cursorDrawableResField = TextView.class.getDeclaredField("mCursorDrawableRes");

the field mCursorDrawableRes has been blacklisted in API 28 and we cannot anymore change the cursor color with the above method.

https://android.googlesource.com/platform/frameworks/base/+/pie-release/config/hiddenapi-light-greylist.txt#7307

[aleksandarbos]

react-native: 0.63.4

[andresribeiro]

Any news?

[zenpi-me]

We are using "expo": "43.0.0" and "react-native": "0.64.3", and we are facing this issue as well, that on some android devices the pipe is invisible. Also after putting the selectionColor prop in.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.