React-native: 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

[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>

[divyanalluri]

react-native:0.60.5
Android :9.0 version -emulator
environment :ubuntu
selectionColor prop in TextInput is not working in react-native

[kubilaykiymaci]

same here

react-native version: 0.59.10

Edit: Problem starts here "AndroidTextInputNativeComponent.js". Highlight and cursor color have to be different prop.

  /**
   * The highlight and cursor color of the text input.
   */
  selectionColor?: ?ColorValue,

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[alexbchr]

This is still an issue, even on Android 10 phones.

[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, selectionColordoes 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

[fabriziobertoglio1987]

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 https://github.com/facebook/react-native/commit/e7a14b803fdc8840bbcde51d4bfa9cf9a85a8472 https://github.com/facebook/react-native/commit/6a61557b2481151c13a398c333203e0244c30ea5

[fabriziobertoglio1987]

https://github.com/facebook/react-native/blob/e2dd18d8b0269d6cfd13870f038a58c5c9bf2795/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java#L451-L456

There must be a reason he added the exception with https://github.com/facebook/react-native/commit/e7a14b803fdc8840bbcde51d4bfa9cf9a85a8472 and I believe it is not worth investigating. Thanks a lot

[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

[EhsanSarshar]

Still experiencing this issue on 0.63.2

[thakurdivendra]

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 [e-mail]
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
https://github.com/facebook/react-native/issues/22762#issuecomment-672884226,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAASEDQBQYUO3WN7FX2TEKDSAKND3ANCNFSM4GL7W5TA
.

--
To unsubscribe from this group and stop receiving emails from it, send an
email to [email protected].

--
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 [e-mail] 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:
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?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/22762#issuecomment-673015474,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAASEDVGLR64QDLXXJ55NZ3SALH5DANCNFSM4GL7W5TA
.

--
To unsubscribe from this group and stop receiving emails from it, send an
email to [email protected].

--
Fabrizio Michels

[mathieumg]

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