TextInput's selectionColor doesn't style Android's selection handles

[adamsoutar]

Description

Using selectionColor on iOS styles the selection, as well as the 'handles' on either side of it:

However, on Android these handles are green, which also happens to be the default selectionColor if you don't override it. I feel that these should go along with what iOS does (turn pink in this example).

Another example (where it should also be pink):

React Native version:

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 21.14 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.11.0 - ~/.nvm/versions/node/v14.11.0/bin/node
    Yarn: Not Found
    npm: 6.14.8 - ~/.nvm/versions/node/v14.11.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.1, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 12.1/12A7403 - /usr/bin/xcodebuild
  Languages:
    Java: javac 15 - /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.3 => 0.63.3
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Create a TextInput and set its selectionColor prop to something
2. Run in the iOS or Android simulators, make a selection, and check the handle colours

Expected Results

The selection drag handles should be coloured by selectionColor on Android.

Snack, code example, screenshot, or link to a repository:

Snack

[finghtingjie]

i have the same problem with you. and i tried to config some android xml files and turn out not work at all.

[yibingxiong]

I also meet this problem. Do you know the solutions now? @adamsoutar

[charles-goode]

I'm pretty sure this problem has been around for a year at least. Ideally the prop should work cross-platform. Worst-case the docs should be updated to reflect that this is an iOS-only prop...

[fabOnReact]

Work In Progress 🚧
Related #22762 (comment) #22762 (comment) https://stackoverflow.com/a/27307004/11452286

If anyone wants to change cursor pointer color. Use Jared Rummler approach but: instead of "mCursorDrawableRes" use "mTextSelectHandleRes" instead of "mCursorDrawable" use "mSelectHandleCenter" if you also need selection on top of that use mTextSelectHandleLeftRes, mTextSelectHandleRightRes and mSelectHandleLeft, mSelectHandleRight accordingly Checkout TextView.java and Edit.java for more information

https://github.com/aosp-mirror/platform_frameworks_base/blob/c5d02da0f6553a00da6b0d833b67d3bbe87341e0/core/java/android/widget/Editor.java#L328-L333

    @UnsupportedAppUsage(maxTargetSdk = Build.VERSION_CODES.P)
    Drawable mSelectHandleLeft;
    @UnsupportedAppUsage(maxTargetSdk = Build.VERSION_CODES.P)
    Drawable mSelectHandleRight;
    @UnsupportedAppUsage(maxTargetSdk = Build.VERSION_CODES.P)
    Drawable mSelectHandleCenter;

I just applied this gist solution and I was able to fix this issue. I'll prepare a pr 🙏 ☮️

CLICK TO OPEN TESTS RESULTS